3. HTML | CSS | Javascript (16) 썸네일형 리스트형 4/4(화) IT 국비교육(24일차) / 1.Javascript의개요~7.데이터타입 0. Javascript에 들어가기 전 1. Javascript의 개요 2. Javascript의 특징 3. Javascript의 실행순서 4. Javascript의 출력 5. 변수 6. 상수 7. 데이터 타입(Data Type) 7-1. 숫자형(number) 7-2. 문자형(string) 7-3. 논리형(boolean) 7-4. undefined, null 7-5. 심볼형(symbol) 7-6. 객체형(object) 8. 자동 타입 변환 9. 타입변환 함수 TIP 0. Javascript에 들어가기 전 * Javascript 교육 간 사용할 에디터 : Visual Studio Code 교육에 사용할 폴더를 드래그해서 바탕화면 아이콘에 드롭하여 실행. * VS Code Extension ' JavaScr.. 4/3(월) IT K-DT(23일차) / 17.CSS2D변형~18.CSS우선순위계산 17. CSS 2D 변형 17-1. translate 17-2. rotate 17-3. scale 17-4. skew 17-5. linear-gradient 17-6. transition 17-7. CSS animation 18. CSS 우선순위 계산 예제 과제 17. CSS 2D 변형 Cascading Style Sheets (CSS)의 2차원(Transforms) 변형 기능을 의미. 이를 통해 HTML 요소의 위치, 크기, 회전 및 기타 속성을 조정하여 웹 페이지의 레이아웃과 모양을 변경. 17-1. translate: 이동 예) 수평으로 30px, 수직으로 50px 이동시키려는 경우. transform original translate 17-2. rotate: 회전 예) 시계방향으로 60도 회전시키.. 3/30(목) IT 국비교육(21일차) / 14.다단레이아웃~16.반응형쿼리 14. 다단 레이아웃 15. Flex 레이아웃 15-1. flex-wrap 15-2. flex-direction 15-3. flex-flow 15-4. justify-content 15-5. align-items 15-6. align-self 15-7. order 15-8. align-content 15-9. flex-basis 15-10. flex-grow 15-11. flex-shrink 15-12. flex 16. 미디어 쿼리 (media query) 14. 다단 레이아웃 다단: 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미. column 속성을 이용하여 텍스트를 여러 개의 단으로 생성. column-count: 단의 갯수를 설정. column-rule: 단과 단 사이의 구분선, 구분모양, 두.. 3/29(수) IT 국비교육(20일차) / 4.CSS폰트~13.clear 4. CSS 폰트 4-1. font-size 속성 4-2. font-family 속성 4-3. font-weight 속성 5. CSS 배경 5-1. background-color 속성 5-2. background-image 속성 5-3. background-repeat 속성 5-4. background-position 속성 5-5. background-attachment 속성 5-6. background-size 속성 5-7. background 속성 6. 박스 모델 (Box Model) 6-1. 내용(content) 6-2. 패딩(padding) 6-3. 테두리(border) 6-4. 마진(margin) 7. 박스 사이징(box sizing) 8. CSS 디스플레이 8-1. none 8-2. block.. 3/28(화) IT 국비교육(19일차) / 1.CSS의개요~3.CSS텍스트 0. CSS에 들어가기 전 1. CSS의 개요 1-1. CSS 정의 1-2. CSS 문법 1-2-1. 선택자 1-2-2. 주석문 1-3. CSS 적용법 1-3-1. 인라인 스타일 1-3-2. 내부 스타일 1-3-3. 외부 스타일 2. 선택자 2-1. 전체 선택자 2-2. 요소 선택자 2-3. ID 선택자 2-4. class 선택자 2-5. 그룹 선택자 2-6. 자식 선택자 2-7. 자손 선택자 2-8. 인접 형제 선택자 2-9. 일반 형제 선택자 2-10. 속성 선택자 2-11. 가상 선택자 2-12. 스타일링 링크 3. CSS 텍스트 3-1. CSS의 컬러 3-2. CSS의 텍스트 TIP 과제 0. CSS에 들어가기 전 * HTML/CSS 교육 간 사용할 에디터 : 교육에 사용할 폴더를 드래그해서 바탕.. 3/27(월) IT 국비교육(18일차) / 2-5-4.입력(input)태그~2-5-7.HTML의디스플레이 2-5. 태그(tag) 2-5-4. 입력(input) 태그 2-5-5. 버튼(button) type의 태그 2-5-6. 글상자(text) type의 태그 2-5-7. HTML의 디스플레이 TIP 과제 2-5. 태그(tag) 2-5-4. 입력(input) 태그 웹페이지에서 사용자로부터 입력을 받는 다양한 형식의 폼 요소를 생성하는데 사용됨. 태그의 안에 입력함. checkbox: 여러 개의 옵션 중에서 하나 이상의의 옵션을 입력받을 수 있도록 하는 버튼. 다수의 value값이 서버로 전달됨. 그룹을 맺기 위해 name은 동일하게, value는 모두 다르게 작성해야 함. 예) 취미: 운동 음악감상 영화감상 게임 등산 file: 원하는 파일을 서버로 전송하기 위한 글 상자. 첨부파일: number: 원하는 숫.. 3/24(금) IT 국비교육(17일차) / 2-1.경로~2-5-5.라벨(label)태그 2-1. 경로 2-1-1. 절대 경로 2-1-2. 상대 경로 2-2. 하이퍼링크 2-3. 호스팅(Hosting) 2-4. FTP(File Transfer Protocol) 2-5. 태그(tag) 2-5-1. 책갈피 2-5-2. 테이블(table) 태그 2-5-3. 폼(form) 태그 2-5-4. 입력(input) 태그 2-5-5. 라벨(label) 태그 2-1. 경로 2-1-1. 절대 경로 물리적 경로. 전체적인 경로를 의미.(상위,하위의 경로의 구분이 없음.) * URL주소를 사용하는 경우 웹사이트의 이미지를 우클릭하여 '이미지 주소 복사' 버튼 클릭. 예) * 드라이브의 경로를 사용하는 경우 Windows 탐색기에서 드라이브의 경로를 복사. 예) C:\yjcho\HTML\day1\sea1.png 해당.. 3/23(목) IT 국비교육(16일차) / 1-1.HTML의정의~1-3.HTML의태그 0. HTML에 들어가기 전 1. HTML의 개요 1-1. HTML의 정의 1-2. HTML 문서 만들기 1-3. HTML 태그 1-3-1. 기본 태그 1-3-2. 서식 태그 1-3-3. 목록 태그 1-3-4. 이미지 태그 1-3-5. 속성 태그 1-3-6. 메타 태그 1-3-7. 태그 참고사항 TIP 0. HTML에 들어가기 전 * HTML교육 간 사용할 에디터 : Visual Studio Code 교육에 사용할 폴더를 드래그해서 바탕화면 아이콘에 드롭하여 실행. * VS Code Extension 'Live Server'의 설치를 추천. 즉각적으로 html의 편집에 대한 확인이 가능하도록 도움을 주는 확장 프로그램. HTML문서를 저장 → Alt + L + O → 해당 문서에 대한 html창이 팝업됨.. 이전 1 2 다음
