베이스캠프 둘째주 1일차
오늘은 베이스캠프 둘째주 1일차이다.
css에 대한 이론을 자세히 배웠다.
.div {
font-size : 15px;
}
여기서 div는 선택자이고, font-size는 속성이다.
그리고 15px라는 값은 속성값이다.
선택자는 어떤 태그, 클래스, 아이디값을 선택할지 정하는 기능을 한다.
속성은 선택자에게 속성을 부여한다.
속성값은 속성의 속성값을 부여한다.
선택자
태그 선택자: div, h1, p, body, span 같은 html 태그 선택자이다.
id 선택자: html 태그에 아디디를 지정한 태그에 선택한 선택자이다.
class 선택자: html 태그에 class 부여한 태그를 선택한 선택자이다.
자손 선택자: 부모 요소에 자식 요소들을 추가하여 자손 선택이 가능한 선택자이다.
ex) .box .title {}
부모 선택자와 자식 선택자 사이에는 공백이 있어야 한다.
다중 선택자: 여러개의 선택자를 동시에 선택할 수 있는 선택자이다.
ex) .title#headline {}
다중 선택자는 자손 선택자와 달리 공백없이 여러개를 붙여야 한다.
전체 선택자: html 모든 요소들을 선택하는 선택자이다.
ex) * {}
그륩 선택자: 여러개의 선택자를 동시에 선택한뒤 동일한 css를 적용할떄 사용한다.
ex) .class1, .class2 {}
가상 클래스 선택자: 실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있다.
ex) 선택자: 가상 클래스 {} => .class:first-child {}
.box p:first-child {} : 이 선택자는 box클래스 안에 p태그 중에서 첫번째 태그만 선택할때 사용하는 가상 클래스이다.
.box p:last-child {}: first-child 클래스의 반대로 마지막 태그를 선택해준다.
.class p:nth-child(n) {} : 직접 몇번째 선택자를 선택할지 선택할 수 있다.
ex) box1 p: nth-child(3) {}. .box2 p:nth-child(2n)
.class: hover {}: 요소위에 마우스를 올려두면 일어나는 선택자이다.
모든 HTML 요소는 박스 형태로 이루어져 있다.
margin box>border box>padding box>content box
margin: 외부 여백에 있는 border 박스 바깥에 있는 박스이다.
border: 패딩박스 바깥에 있는 외각박스이다.
padding: 컨텐츠 박스를 감싸는 패딩 박스이다.
content: 내용이 들어가는 컨텐츠 박스이다.
box-sizing 속성에는 content-box(기본값), border-box가 있는데 주로 사용하는건 border-box이다.
왜나하면 content-box는 콘텐츠 내용에 따라 border-box의 길이가 달라지기 때문에 정해놓은 레이아웃이 망가질 수 있다
그래서 border-box를 사용한다.
Block 요소: 블록 요소를 여러개 연속해서 쌓을 경우, 자동으로 다음 줄으로 넘어간다.
좌/우 양쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
ex) div태그 p태그 등등..
Inline 요소: 여러개의 요소를 연속해도 입력해도 자동으로 다음 줄으로 넘어가지 않는다.
태그에 할당된 넓이 만큼만 차지합니다.
ex) span태그, img태그 등등
인라인 요소랑 블럭 요소를 바꾸는 법
display: inline | block
레이아웃
레이아웃이란 출판, 광고, 건축 분야 등에서 문자, 그림, 사진 등을 지면 위에 시각적 효과와 사용 목적을 고려하여 구성, 배열하는 일, 또는 그 기술 순화어는 '(지면)배열' '판매김'
css 레이아웃이란?
css를 이용해서 단순한 문서 형태인 HTML을 보기 좋게 배치하고 재배열 하는것, 관련 기능, 완성된 배열 등을 포괄적으로 지칭한다.
