하위 태스크 1
포지셔닝 이해
static,relative,absolute,fixed포지셔닝의 차이와 사용법 학습
CSS 포지셔닝은 웹 문서의 요소를 적절히 배치하는 것을 뜻한다.
static은 요소를 문서의 흐름에 맞추어 배치한다. position 속성의 기본값이다.
relative는 요소를 문서의 흐름에 맞추어 배치한다. 다른 요소나 스타일 속성에 의해 위치가 옮겨질 수 있다.
absolute는 문서의 흐름에서 벗어나 원하는 위치에 요소를 배치한다. 요소의 기준 위치는 가장 가까운 부모 요소 또는 조상 요소 중 position: absolute인 요소다.
fixed는 문서의 흐름에서 벗어나 원하는 위치에 요소를 배치한다. 요소의 기준 위치는 브라우저 창이다. 문서를 스크롤해도 위치가 변하지 않는다.
하위 태스크 2
플로트 레이아웃 구현
float속성을 사용한 레이아웃 구성 및clear방법 이해
float 속성은 요소가 일반적인 문서 흐름에서 벗어나서 왼쪽 또는 오른쪽에 떠 있게 만든다. clear 속성은 float 속성을 무효화한다.
하위 태스크 3
z-index 활용
요소의 쌓임 순서를 제어하는
z-index속성 사용
z-index 속성은 요소가 쌓이는 순서를 제어한다. z-index가 크면 작은 요소보다 위에 쌓인다.
하위 태스크 4
다단 편집 적용
column-count,column-width,column-gap등을 사용한 다단 레이아웃 구현
column-count 속성은 단의 개수를 정해두고 화면을 분할한다.
column-width 속성은 단의 너비를 고정하고 화면을 분할한다.
column-gap 속성은 단 간격의 크기를 설정한다.
하위 태스크 5
표 스타일링
border-collapse,border-spacing,caption-side등을 사용한 표 디자인
border-collapse 속성은 표 테두리와 셀 테두리를 합칠 것인지 결정한다.
border-spacing 속성은 border-collapse 속성이 seperate일 때, 인접한 셀 테두리 사이의 거리를 지정한다.
caption-side 속성은 캡션의 위치(기본값은 상단)를 지정한다.
하위 태스크 6
시맨틱 태그 활용
<header>,<nav>,<section>,<article>,<aside>,<footer>태그 사용
<header>: 머리말 영역이다. 사이트 전체 또는 본문의 제목 영역이 될 수 있다.<nav>: 내비게이션 메뉴 영역이다. 종종 푸터의 사이트 링크 모음에도 사용된다.<section>: 주제별 컨텐츠 영역이다. 섹션 제목을 나타내는<h*>태그와 함께 사용된다.<article>: 컨텐츠 내용 영역이다. 독립적이고 완전한 컨텐츠를 포함한다.<aside>: 본문 이외 내용 영역이다. 문서의 주요 내용에 영향을 미치지 않는 내용을 포함한다.<footer>: 제작 정보 또는 저작권 정보를 포함한다.
하위 태스크 7
시맨틱 레이아웃 구성
시맨틱 태그를 활용한 완전한 웹 페이지 구조 작성
하위 태스크 8
오디오 태그 사용
<audio>태그와 속성을 사용하여 오디오 콘텐츠 삽입
<audio> 태그는 웹 문서에서 오디오를 재생할 수 있게 한다.
하위 태스크 9
비디오 태그 사용
<video>태그와 속성을 사용하여 비디오 콘텐츠 삽입
<video> 태그는 웹 문서에 동영상을 삽입한다.
하위 태스크 10
연결 선택자 활용
자손 선택자, 자식 선택자, 형제 선택자의 차이와 사용법 학습
자손 선택자는 부모 요소에 포함된 모든 하위 요소를 선택한다.
자식 선택자는 부모 요소의 자식 요소를 선택한다.
형제 선택자는 모든 형제 요소를 선택한다.
하위 태스크 11
속성 선택자 활용
다양한 속성 선택자(
[attr],[attr=value]등) 사용
[attr]선택자: 지정한 속성을 가진 요소를 선택한다.[attr=value]선택자: 지정한 속성과 속성값이 모두 일치하는 요소를 선택한다.
하위 태스크 12
가상 클래스 활용
:hover,:active,:nth-child()등 가상 클래스 사용
:hover: 요소에 마우스 커서를 올릴 때 스타일을 적용하기 위한 의사 클래스다.:active: 요소를 활성화할 때 스타일을 적용하기 위한 의사 클래스다.:nth-child: 앞에서부터 번째 자식 요소에 스타일을 적용하기 위한 의사 클래스다.