qwef

position 그 자리에 고정시킴. position: absolute; 순수한. 주위 관계없이 거기에 딱 float처럼 문서 흐름에서 띄어짐. top: 20px; left: 20px; 하면 body? 화면? 이 기준으로 움직임. 근데 부모가 position: relative 면 그거 기준임. 그래서 보통 relative랑 같이 씀 근데 부모가 relative라도 float처럼 자기 자식에서는 빠짐 top, bottom, left, right 외에 margin같은건 그래도 부모기준인듯. absolute 주는 순간 margin 같은 거 안 먹음. position: relative 상대적인 top: 20px; left: 20px; 하면 부모 기준으로 움직임. 그리고 이거는 문서 흐름에도 기존에 있던 자리는 ..

보호되어 있는 글입니다.

1100~1320로 잡음 보통 1200

거의 유일

1. height (비추천) 2. overflow:hidden 3. clear: both (형제요소에게.) 4. 가상요소 ( after ) 5. 상위요소에 연속적으로 float 주기 float는 형제 요소들에게 영향을 미침 clear: both를 하면 그 다음 형제요소들은 float 영향을 안받.. .box span::after{content: ""; background-color: orangered; display: block; clear: both;} 이거 같은 경우 다음 형제요소에 비어있는 문서흐름요소를 억지로 집어넣어서 그 전까지를 다 문서흐름에 집어넣는거랑 같은.. 효과... 그러니까 clear:both;를 쓰면, 기존까지 float쓰던 걸 묶어서 통째로 문서 흐름에 집어넣는다고 생각하면 됨.

@charset "utf-8"; *{margin: 0;padding: 0;} li{list-style-type: none;} a{text-decoration: none; color: inherit;} .wrap{width: 1282px; margin: 0 auto; outline: 1px dotted red;} #container_left{float: left; outline: 1px dotted red;} #container_right{float: right; outline: 1px dotted red;} #container::after{outline: 1px dotted red; display: block; clear: both; content: ''; } #footer{background-color..

hover나 그런 것 링크나 버튼에 쓰는 듯 a:link //평상시 a:visited //눌렀던 적 있을경우 a:hover //알죠? a:active //누르고 있는 상태 a:focus //Tab키 누르면 포커스

#box p::first-letter {font-size: 300%;} #box내의 p중 첫번째 글자만 ::는 엘리멘트 안의 내용을 가리키는 거고 :는 엘리멘트를 가르키는 거인듯? #box p:first-child {color: green;} #box p:last-child {color: purple;} #box p:nth-child(2) {background-color: aquamarine;} .line::first-line {background-color: orange;} 이거는 앞이나 뒤에 뭐 내용넣어주는 그런거 인 듯. 블록 요소로 보임 그냥 뭐 태그로 넣는게 아니라 그냥 내용 넣는거임. #box::after {content: '항목을 선택해 주세요.'; color: green;} #box::be..

ul.classname ul중 classname인 ul ul .classname ul 자손들 중 .classname인 것들 + 인접 선택자. #outbox + .outbox2 동일한 수준에서 선택 이건 하나만 선택 됨 붙어 있어야 함. 같은 형제라도 떨어져 있으면 안됨. 위쪽 말고 아래쪽 ~ 형제 선택자 #outbox ~ div outbox와 형제 수준의 div 모두 선택 종속선택자 일종의 교집합.. 포함되어지는.. 예를 들어 면 .small{} css와 .highlight-color{} CSS 모두 적용됨. 굳이 small.highlight-color{} 아니어도. input[type=checkbox]:checked + div.text_box{ visibility: visible; opacity: 1;..

margin은 바깥쪽으로 여백, padding은 안쪽으로 여백(즉, 내 상자와 상자안의 컨텐츠) 즉, padding은 자신의 크기를 키움. 블록태그는 이 margin이 위아래로 있음.