[Front End] CSS 기초

CSS의 구성

span{   
color : red;
}

/*
selector{
property : value
}
*/

 

CSS 선언 방식 

- inline : HTML 태그 안에다가 적용한다. 

- internal : HTML style 태그로 적용한다. 

- external : 외부파일(.css)로 지정하는 방식 

 

CSS 적용 우선순위

-  inline > internal = external

-  id > class > 엘리먼트

-  같은 선택자라면, 나중에 선언한 것이 반영된다.

-  선택자의 표현이 구체적인 것이 있다면 먼저 적용된다.

 

   [example] 

    body > span(O)

    span (x)

 

CSS 상속

- 상위에서 적용한 스타일은 하위에도 반영된다.

- 단, box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속 되지 않는다.

 

엘리먼트가 배치되는 방식

- display(block, inline, inline-block)

- position(static, absolute, relative, fixed)

- float(left, right)

 

display

- block : 엘리먼트가 아래로 블록처럼 쌓임

- block-inline : 엘리먼트가 옆으로 블로처럼 쌓임

- inline : 엘리먼트가 옆으로 흐름(높이와 넓이를 지정해도 반영되지 않음)

 

position

- static : position 속성은 기본적으로 static. 그냥 순서대로 배치된다. 

- absolute : top / left  / right / bottom으로 설정, 기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점 이다.

- relative : top / left / right / bottom으로 설정, 원래 자신이 위치해야 할 곳을 기준으로 이동한다.

- fixed : 전체화면 좌측, 맨 위를 기준으로 동작한다. 

 

float 

- float 속성으로 엘리먼트를 둥둥 띄울 수 있다.

- 뒤에 있는 block 엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩되서 배치된다.

- 수평 정렬을 할때 활용할 수 있다. 

 

엘리먼트가 배치되는 방식(box model)

- 블록 엘리먼트의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다. 

- margin, padding, border, outline으로 생성된다. 

 

margin

- margin으로 배치가 달라질 수 있다.

- margin은 위 / 아래 / 좌 / 우 엘리먼트와 본인 간의 간격이다. 따라서 그 간격만큼 내 위치가 달라진다.

 

box-sizing과 padding

- padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있다.

- box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정 하면서 padding 값만 늘릴 수 있다.

 

layout 구현 방법

- 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 밸치를 구현한다.

- 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다. 

- 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다.

- 엘리먼트안의 텍스트의 간격과 다른 엘리먼트 간격은 padding과 margin 속성을 잘 활용해서 위치시킨다.