지도강사: 권대용, email: tailofmoon@naver.com
스터디 카페: https://cafe.naver.com/csslick
본 커리큘럼은 웹 퍼블리싱 & 프론트엔드 개발의 기본 내용을 포함하며, 창의성을 기르고 실무 능력을 향상시킬 수 있도록 구성되어 있습니다.
각 단원별로 포트폴리오 산출물이 나옵니다.
습득하는 기술스택: VSCODE, HTML, CSS, SASS, Bootstrap, JavaScript, jQuery, Github
(웹 4까지 완료시)
미리보기
달력
출석부
☞ 세부 일정은 사정상 변경될 수 있습니다.
회차 | 주제 | 주요 내용 | 응용 | 작품 URL |
---|---|---|---|---|
1 | 시작하기 | HTML의 역할 및 이해 | ||
개발환경 세팅(코드 에디터, 브라우저) | ||||
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 |