일렉치는 취준생

Float 속성 지정한 요소가 Normal flow를 벗어나도록 만드는 속성 box를 왼쪽이나 오른쪽으로 이동시켜 inline 요소들이 주변을 가리게함 float : none - 기본 값 float : left - 요소를 왼쪽으로 띄운다 float - right - 요소를 오른쪽으로 띄운다 float 전후 비교 1. float 하지 않았을 때 코드 box1 box2 2. float 추가 했을 때 코드 box1 box2 -> float : left를 추가한 것 만으로 box를 왼쪽에 띄울 수 있다 !

+ : 형제 요소 결합자 / 인접 형제 선택자 p + p : p 다음 p일 때 속성을 적용 시켜라 ~ : 후손 선택자 / 일반 형제 선택자 특정 태그 뒤에 나오는 모든 요소들을 선택 p ~ p : p 다음에 나오는 모든 p태그를 선택 0 1 2 3 4 5 기사 6 7 8 9 p + p{ color: red; } p 다음 p 가 오면 red로 바꿔라 1 2 에서 2가 빨간색이 된걸 확인 p ~ span{ color: green; } p 다음에 나오는 모든 span을 green으로 바꿔라 span인 3과 9가 모두 초록색이 된걸 확인

CSS 원칙1 모든 요소는 네모(box)이고, 위에서 아래로 왼쪽에서 오른쪽으로 쌓인다. Box model 모든 HTMl 요소는 box 형태 하나의 box는 content, padding, border, margin 4가지 영역으로 이루어짐 Box-sizing 기본적으로 모든 요소의 box-sizing은 content-box이다. padding을 제외한 순수 contents 영역만을 box로 지정한다. 우리가 일반적으로 box 영역을 볼 때 -> border 까지의 너비라고 생각함 box = border 사이즈로 맞추고 싶다면, box-sizing을 border-box로 설정해야한다. CSS 원칙2 display에 따라 크기와 배치가 달라진다. display 1. block : div / ui / ol ..

CSS 선택자 P:nth-child(K) : K 번째 자식이 P 타입 이라면 선택 P:nth-of-type(K) : P 타입의 K 번째 자식에게 적용 어떻게 선택 될까? 첫번째 단락 두번째 단락 세번째 단락 네번째 단락 #hphk > p:nth-child(2) { color: blue;} #hphk의 2번째 자식이 p라면 선택 -> 파랑색으로 #hphk > p:nth-of-type(2) { color: red;} #hphk의 p타입의 2번째 자식을 선택 -> 빨강색으로 nth-child를 nth-of-type으로 바꾼다면? 어떻게 선택 될까? 첫번째 단락 두번째 단락 세번째 단락 네번째 단락 #hphk > p:nth-child(2) { color: blue; } #hphk > p:nth-of-type(2..

CSS : 스타일을 지정하기 위한 언어 CSS 구분은 선택자를 통해 스타일을 지정할 HTML 요소를 선택한 후, 중괄호 안에서 속성과 값, 하나의 쌍으로 이루어진 선언을 진행한다. 각 쌍은 선택한 요소의 속성과 속성에 부여할 값을 의미한다. 속성(Property) : 어떤 스타일을 변경할지 결정한다. ( ex 폰트 ) 값(Value) : 어떻게 스타일 기능을 변경할지 결정한다. ( ex 폰트크기 ) CSS 선택자(Selector) 유형 1. 기본 선택자 : * 전체 선택자, 요소 선택자, class 선택자, id 선택자, 속성 선택자 요소 선택자 : HTML 태그를 직접 선택 class 선택자 : 마침표(.)로 시작, 해당 클래스가 적용된 항목을 선택 id 선택자 : # 문자로 시작, 해당 아이디가 적용..