[TIL_04]CSS 사용법

티나·2022년 9월 29일

개발 새싹의 Today I Learned

목록 보기

4/12

Cascading Stylesheet
어떤 것 다음에 다른게 오는 체계
브라우저가 css코드를 읽을 때 위에서부터 순서대로 읽는다.
→같은 대상에 중복해서 태그 되었을 경우, 실제 적용되는건 가장 마지막에 있는 코드이다.

html을 css로 꾸며주는 방법은 두가지가 있다.
아래와 같이 html파일 안 head에 style 태그를 만들어서 디자인한다.
```
<head>
  <style></style>
</head>
```
html파일과 css파일을 따로쓴다.

<head>
  <link href="styles.css"　rel="stylesheet"/>
</head>

옆에 다른 요소가 올 수 없다.
block은 box이고 box의 속성 세가지는 margin, padding, border이다.
ex.div header main footer section article
단, 어떤 요소가 inline이면 그 요소는 높이와 너비를 가질 수 없다. 그래서 inline은 어떤 면이든 padding을 가질 수 없고 margin은 위아래는 가질 수 없다.

→inline에 위, 아래 margin 값을 주고 싶다면 block으로 바꿔줘야 한다.

이런 경우에 필요한게 display:block;과 display:inline;이다.
각각 inline은 block으로, block은 inline으로 바꿔준다.

box의 경계(border)의 바깥에 있는 공간.
body는 디폴트값으로 margin을 갖고있다.
margin값이 한개면 사방에, 2개면 순서대로 상하/좌우, 4개면 위에서부터 시계방향 순으로 할당된다.

collapsing margins 현상

요소(박스) 2개가 겹쳐져서 2개의 위아래 경계가 같다면, 이 두 margin은 하나로 취급되어 같이 움직인다.

프론트엔드 개발자를 목표로 하는 코딩 새싹