[220506 / Day 4] CSS clear, 가상선택자

1. clear: both

위에 있는 형제 요소들이 플롯 되었을 때 풀어줄 때 씀

자식요소가 플롯 되었을 때 부모요소의 높이가 0이 된다.

1) 부모요소에 높이값을 정해준다

2) overflow: hidden 이용

3) .clearfix 클래스를 만들어서 사용

주로 2,3 번 많이 사용

1번은 줄 수 있는 요소와 없는 요소 있음, 높이값을 정해줘도 후에 자식요소의 크기가 더 커져버리면 소용이 없음

 

2. overflow

이 속성을 주면 높이를 따로 주지 않아도 알아서 높이를 지정함 상위요소가 알아서 하위요소의 높이를 계산해서 넣어줌

-hidden: 넘치면 나머지 숨겨버림

-scroll: 넘치지 않아도 스크롤이 있음

-auto: 넘치지 않으면 스크롤이 없음

-visible: 넘쳐도 넘친 채로 나머지를 보여줌

 

.clearfix 설명을 위해 가상선택자를 알아야 함

 

3. 가상선택자 437p pseudo선택자

가상 클래스는 코드 적을 때 : 하나, 가상 요소는 코드 적을 때 :: 두개

link 가상 클래스

a:link{color: black;} : 클릭하기 전 색깔을 블랙으로

a:visited{color: red;} : 클릭하고 나서 색깔을 레드로

a:hover{background-color: red;color: white;} : 마우스를 갖다대면 백그라운드는 레드, 글자 색깔을 화이트로

a:active{color: burlywood;} : 클릭할 때 색깔을 불리우드로

개발자 검사 모드로 들어가서 강제실행 상태 들어가보면 호버가 어떻게 사용되는지 보여줌

 

가상요소 after, before :: 은 하나만 해도 나오긴 함

소스에는 없지만 화면 상에서만 보이게, 대상 요소의 가장 첫번째나 마지막에 적용

::after – 대상요소의 마지막 자식으로 추가

::before – 대상요소의 첫번째 자식으로 추가

 

::after{content:”속성값”; display:block;width:20px;height:20px;}

content 무조건 줘야 하지만 비어 있게 하고 싶으면 속성은 주고 “” 비워 놓으면 됨

블록을 넣고 싶을 때는 백그라운드 컬러, 디스플레이 블록, 높이, 넓이 주면 됨

 

4. css 적는 법

블록태그 안에 하위 태그로 블록 태그 가능

블록태그 안에 하위 태그로 인라인 태그 가능

인라인 태그 안에 하위 태그로 인라인 태그 가능

인라인 안에 블록 태그는 안됨 (예외 > a 태그)

 

외부 css 만들고 @charset "utf-8"; 적어주기

안 적어줘도 되지만 안 적어주면 주석처리한 한글이 다 깨져서 나옴

 

inherit 상속이라는 값 (a 태그는 기본적으로 설정)

하위요소의 컬러가 정해져 있어도 상위요소의 컬러를 상속받음

 

5. 초기화

초기화 시키고 시작

/*초기화*/

h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p{margin:0;padding: 0;}

li{list-style: none;}

a{text-decoration: none;color: inherit;}

h1,h2,h3,h4,h5,h6{font-weight: normal;font-size: 100%;}

body{line-height: 1;}

table{border-collapse: collapse;}

.cf::after{content: "";display: block;width: 0;height: 0;clear: both;}

 

에릭마이어 리셋은 오래됨 – 무조건 초기화, 그래서 브라우저마다 조금씩 차이가 있는데 그걸 초기화

노말라이즈도 조금 오래됨 – 평균화,

각자 취향이 있어서 알아서 쓰면 됨

 

6. 실습 필기

 

nth-child(3n) : 3의 배수 번째를 처리

nth-child(3n-1) : 3의 배수의 -1 번째 처리 / +도 가능

 

폰트사이즈 상관없이 글을 두줄로 맞추고 싶을 땐 p 태그로 나누거나 br 태그를 사이로 넣어 끊어주던지

 

address 태그는 기본이 기울기로 보통 저작권 표시할 때 많이 씀, block 태그

 

<link rel="stylesheet" href="css/reset.css">

    <link rel="stylesheet" href="css/04.css"> = 이 순서 지킬 것

position 341p

absolute fixed는 마진 오토 안됨

#box2>div:nth-child(3){position: absolute;background-color: aqua;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;} -> 이렇게 퍼센트로 지정해주는 게 더 좋음