지도강사: 권대용, email: [email protected]

스터디 카페: https://cafe.naver.com/csslick

본 커리큘럼은 웹 퍼블리싱 & 프론트엔드 개발의 기본 내용을 포함하며, 창의성을 기르고 실무 능력을 향상시킬 수 있도록 구성되어 있습니다.

☞ 세부 일정은 사정상 변경될 수 있습니다.

회차 주제 주요 내용 응용 작품 URL
1 시작하기 https://www.w3schools.com/html/
개발환경 세팅(https://code.visualstudio.com/, https://m.blog.naver.com/lo8255ve/222077325818)
HTML 문서 작성
DOCTYPE & 메타데이터
2 텍스트 요소들 제목, 문단
줄 바꿈 (br)과 수평선 (hr) 태그
텍스트 요소
인라인 요소와 블록요소
문법검사(Validation)
3 링크와 이미지 하이퍼링크 (a) 태그를 사용한 페이지 연결
새 창 열기
이미지 (img) 태그와 대체 텍스트
이미지 크기 조절
이미지 경로 지정(절대경로, 상대경로) 메인, 서브페이지 구성의 자기 소개 페이지 https://csslick.github.io/web1-3-ex/
4 목록과 테이블 비순서형목록, 순서형 목록 , 정의형 목록
2단계 목록
기본 테이블 (table), 행 (tr), 열 (td) 구성
테이블 병합 1330 안내 페이지 https://csslick.github.io/web1-4-ex1/
5 CSS Selectors 스타일 서식(Internal, External, Inline style)
선택자(태그, id & class, 속성 선택자)
링크 관련 가상 선택자
6 CSS Properties Typography(크기, 서체, 두께, 자간, 행간, 장식)
Colors & Background Color
Background image https://codepen.io/csslick/full/BavYELK
https://codepen.io/csslick/full/jOXZRZG
https://codepen.io/csslick/full/OJrQGYm
7 CSS 박스 모델 width & height, margin & padding, box sizing
borders, box-shadow 버튼 디자인 https://codepen.io/csslick/full/wvRNXjE
8 레이아웃 기초 display mode
float & clear Layout
position, overflow, z-index Basic Layout https://codepen.io/csslick/full/oNJERWL
9 웹 폼 (Form) 및 스타일링 텍스트 입력 (input), 레이블(lable)
주요 입력 type
입력 속성
fieldset, legend 개인정보입력 폼
여러 줄 글상자와 목록상자 https://codepen.io/csslick/full/yLGvZow
https://codepen.io/csslick/full/LYMQqOR
10 메인 페이지 제작 header, nav, section, article, footer 등 시맨틱 요소
W3C Validation Basic Layout https://codepen.io/csslick/full/poqamWG

OT

Day 1 - HTML 시작하기

Day 2 - 텍스트 요소들

Day 3 - 링크와 이미지

Day 4 - 목록과 테이블

Day 5 - CSS Selector