탭 구성 탭 구성 탭1 탭1 콘텐츠 탭2 탭2 콘텐츠 탭3 탭3 콘텐츠

- 사용자 행동을 예측하여 css을 정의한다. - 선택자 : 가상선택자명{} hover - 마우스 선택자 위에 올렸을 때 #hover01:hover{background-color:red;color:#fff;} active - 마우스로 대상을 누르고 있을 때 #active01:active{background-color:#000;color:#fff;} focus -포커스 되었을 때 ( 커서 활성화 ) #focus01:focus{border:5px solid #f00;} child - 선택자에 상하관계가 표현되어야한다. - first-child : 선택된 대상의 첫번째 요소 선택 - last- child : 선택된 대상의 마지막번째 요소 선택 #focus01:focus{border:5px solid #f00;..

nav 만들기 home login menu1 menu2 menu3 menu4 컨텐츠

float, clear - 블럭요소 배치(레이아웃 배치) 할 때 쓰인다. - float : 좌우 블럭요소 배치, 좌우 정렬 가능, 설정된 높이가 인식이 잘 안됨 적용 안된 대상들은 float 설정된 대상의 높이를 인식하지 못한다. 1) float 적용 대상은 넓이 높이가 설정이 안되어 있다면 컨텐츠의 크기 만큼만 설정된다. - float 적용 대상의 부모 태그를 생성한다. 2) flot 적용된 자식요소에 의하여 상위태그는 높이를 인식하지 않는다. 1. clear : both; -> float 적용 해제 2. display : inline-block; 부모태그를 inline-block 변경 3. overflow : hidden; 부모 태그에 높이와 넓이를 설정하지 않고 사용 4, 부모 태그에 높이 설정 다..

display - 선택된 대상의 inline, block, inline - block, none 처리 - inline : 인라인 오쇼 변경 - block : 블럭 요소 변경 - inline - block : 높이와 넓이를 가지는 인라인 요소로 변경 - none : 화면 미 노출 display none inline inline > block inline > inline-block line-height - 텍스트(인라인 요소) 세로 간격 설정 .lineheight01{line-height:25px; } list-style - 불릿 변경 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. ​

기본설정 position, z-index - position : 블럭요소 배치 옵션 설정 absolute position 값이 설정된 relative 부모태그 기준으로 절대 위치에 배치 fixed 디바이스 크기의 절대 위치에 배치 - z - index : 블럭요소 앞뒤 정렬 옵션 ( 높은 수가 제일 앞으로 ) - top : 상단 절댓값 - left : 왼쪽 절댓값 - right : 오른쪽 절댓값 - bottom : 하단 절댓값 .position01{ position:absolute; top:10px; left:10px; background-color:red; }