qwef

거의 유일

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..

$(document).ready(function(){ $('h3').click(function(){ $('.text_box>p').toggleClass('show'); }); }); bool 처럼 show 클래스 p에 넣었다 뺐다. .addClass('show') 는 넣기만 함

p:contains("html") p 태그 중 html 문자를 포함하고 있는 것 들 p:empty 자식 요소가 없는 요소 p:parent 엄마 있는 애 section:has(article) article 하위 요소로 가지고 있는 section 요소들 이것들은 JQuery 에서만 쓰는 듯. div:has(strong) strong을 자식으로 가지고 있는 div들

인덱스 1번부터 시작. 근데 child는 종류 상관없이 다 인덱스에 들어감. Lorem, ipsum dolor.1 Lorem, ipsum dolor.2 Lorem, ipsum dolor.3 Lorem, ipsum dolor. Lorem, ipsum dolor.5 Lorem, ipsum dolor.6 이거면 h3:nth-child(4){background-color: blue;} 이렇게 해야 가능. p:nth-child(4){background-color: blue;} 이거 해도 lorem 5 안가리킴 같은 타입끼리만 하려면 p:nth-of-type(4){background-color: aqua;} 이렇게 하면 p 태그만 인덱스에 들어감. 이것도 첫번째, 마지막 번째, 마지막에서 몇번째 있음. p:firs..

// 필터 선택자 // - 필터 선택자에는 ":"을 붙여 사용한다. // 종류 // :even -> 짝수 요소 선택(인덱스 번호), 메모리에 저장되는 순서값 // $('div:even').css({ backgroundColor : 'darkorange' }); // console.log($('div')); // 0:div, 1:div, 2:div length : 3 // :odd -> 홀수 요소 선택(인덱스 번호), 메모리에 저장되는 순서값 // :first -> 첫 번째 요소 선택 // :last -> 마지막 요소 선택 // :header -> h1~h6 요소 선택 // :eq() -> index로 요소 선택(인덱스 번호), 메모리에 저장되는 순서값 // :gt() -> :gt(0) -> index가 ..

오늘의 날씨 asdf 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 th : 제목 tr row 행 td 데이터, 열 caption : 표제목

h2[class] {} 요소[속성] h2중 class 속성을 가지고 있는 모든 h2 *[title] 타이틀 속성을 가진 모든것 input[type=text] {} 요소[속성=값] input 태그 중 type이 text 인거 다 찾음. img[alt] {} alt 가지고 있는 img들 모두 선택 span[class=abc]{} 이름이 딱 abc 단독으로 있는거 [class^=box]{} class 명이 box로 시작되는 것 이런 거 span[class!=abc]{} 이거는 abc가 아닌 거 근데 왜 이거는 css에서 에러뜨냐 이건 js에서만 되나? span[class*=abc]{} abc를 포함하는 모든 것 span[class|=abc]{} 이름이 abc로 시작하는 것 span[class$=abc]{} 이..

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