float – 왼쪽이나 오른쪽에 배치하기 (clear로 해제(원치 않게 같이 끌려오는거 막아줌))
clear : both – float 정렬 풀어줄 때 사용 (위에 있는 형제 요소들이 float이 되었을 때 아래에 있는 형제 요소는 원치 않아도 자꾸 끌려 올라가니까 풀어주기 위해)
자식요소가 float 되었을 때 부모요소의 높이가 0이 된다.
그때는
1. 부모요소에 height 값을 설정한다.
2. overflow : hidden 이용
3. clearfix클래스를 만들어서 사용
overflow : 공간보다 넘치는 부분을 제어하는 속성
ㄴ hidden / auto / scroll / visible(기본값)
auto와 scroll 차이
scroll은 공간에 넘치지 않아도 무조건 스크롤 생김 auto는 공간에 넘칠 경우만 스크롤 생기고 넘치지 않으면 안 생김.
가상선택자 (pseudo 슈도 선택자)
가상클래스는 ::
가상요소는 :a:link{color: black;} < 링크
a:visited{color: red;} < 방문한 링크
a:hover{background-color: red; color: white;} <마우스 올렸을 때
a:active{color: orange;} < 누르는 순간
::after 대상요소의 마지막 자식으로 추가
::before 대상요소의 첫 번째 자식으로 추가
ex)
::after{content:’‘;display:block;width:20px;height:20px}
ul>li:first-child::after{content: '추가된 요소';color: red;}
요런식으로
clearfix(cf로 줄이기도함):clear:both; 로 위치 고정시켜서 높이 확보
.clearfix::after{content: ''; clear: both; display: block;}
display
블록태그 안에 하위 태그로 블록태그 가능
블록태그 안에 하위태그로 인라인 태그 가능
인라인 태그 안에 하위 태그로 인라인 태그 가능
인라인 태그 안에 하위 태그로 블록 태그는 불가능!
(예외 > a태그 : 얘는 인라인 태그 안에 블록 태그 가능하다~)
a 태그 속성 없앨 때 color:inherit 많이 씀 (상속)
css 파일 처음 할 때 설정 기본 리셋방법
@charset "utf-8"; /*초기화*/ h1,h2,h3,h4,h5,h6,ul,li,ol,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: 100px;} body{line-height: 1;} table{border-collapse: collapse;} .cf::after{content: ''; display: block; width: 0; height: 0; clear: both;eric meyer’s reset css나 nomalize 로 리셋 가능
html과 css 파일 연결하기
<link href="css/03.css" rel="stylesheet"> <link rel="stylesheet" href="css/reset.css"> --리셋먼저 <link rel="stylesheet" href="css/04.css"> --css파일 연결
h1요소와 p 요소 수평으로 맞추고 싶을때!!
-> h1은 block이라 안되니까 h1은 float : left , p는 float:right 해줘야해
nth-child(2n)하면 2의 배수 잡을 수 있다.
nth-child(2n+1) 이런 수식도 가능~ 홀수를 잡는 수식
: 저작자 등 표시, 기본 값이 이탤릭체
position (left/ right / top / bottom)
– static/relative/absolute/fixed
static – 문서흐름에 맞춰 배치
relative – 현재 나의 위치를 기준으로 배치 (이전 요소에 자연스럽게 연결해 배치하되 위치를 지정할 수 있습니다.)
absolute – 원하는 위치 지정해 배치 , 나보다 상위 요소가 기준되어 움직임 (근데 나보다 상위 요소가 포지션값이 있어야해)
fixed – 지정한 위치에 고정해서 배치 , 브라우저 기준
position fix 나 absolute 는 현재 흐름에서 빠져서 이동, margin-auto 적용 안됨
가운데 맞춤
margin 은 – 값 줄 수 있다
네모 크기가 100px*100px일 때 반드시 center에 오게 하기 :{position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;}
왼 , 위 50%씩 이동하면 꼭짓점이 가운데로 오게 되는데, 이 때 넓이의 절반만큼 마진을 반대로 주면 가운데로 와
#box4{margin: 20px auto 0; position: relative; }
#box4>div{position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
이렇게도 가능 (원래는 absolute에 마진 auto 못 주는데 이렇게 위치를 지정해주고 그 사이에서 오토인거니까 가능)
