[HTML/CSS] 1. Box Model / Block Element, Inline Element

각각 갖고 있는 Box Model이 다르다.

Block Element / Inline Element

Block Element는 독자적인 영역을 차지하고 있다.

그렇기 때문에 위에서 아래로 배열된다.

ex) h1, h2, h3, ... , div, p, ul, li, form

Inline Element는 content area의 영역만 차지하고 있다.

그래서 웹 페이지의 영역이 되는데로 좌에서 우로 배열된다.

ex) a, img, span, em, input

위 두 가지 속성은 style의 display를 통해서 변환시킬 수 있다.

추가적으로 inline-block이라는 속성이 있다.

inline 요소는 Box Model 을 통해 제어할 수 있는 margin 값이 적용이 안될 때가 있는데,

이 부분을 보완하기 위해서 등장한 속성이다.

inline 요소처럼 content area만을 영역으로 갖으면서, block 요소처럼 box model 속성을 적용시킬 수 있다.

하지만 편리한 만큼 브라우저에게 부담이 된다.

Box Model

Content Area

Padding Area

Border Area

Margin Area

네 가지 영역으로 나뉘게 된다.

실제 웹 페이지를 구성하다가 알게 된 것들

1. 리스트에 inline 요소를 적용하기 위해서는 ul 따로, li 따로 둘 다 display 속성을 inline으로 바꿔줘야 한다.

2. border-radius

= 테두리를 둥글게. px와 %로 설정가능

3. <a href=“#”></a>

#은 링크를 걸곳에 아무것도 연결하지 않은 상태를 의미한다.

4. <input type=“text” placeholder=“aaa">

text를 입력받을 수 있는(input) 텍스트 상자(type=text)를 생성하고,

희미하게 무엇을 입력해야하는지 나타내준다.(placeholder=“aaa”)

5. checkbox or radio 버튼에서 default로 선택되어있는 값을 지정하려면

지정하려는 것의 코드 끝에 (>안에) checked 입력

6. margin과 padding은 clock의 방향으로 one line에 작성할 수 있다.

top right bottom left 순서

상위 디렉토리? 의 성분(color)를 상속받을 수 있다. inherit 을 통해서

그리고 오버라이딩도 할 수 있다. (like 상속 in JAVA)

맨 아래에 있는, 최신의 적용사항을 반영한다.

이를 통해 브라우저는 CSS 파일을 위에서 아래로 읽어내려간다는 것을 알 수 있다.

이보다더 우선순위가 높은 방법은  inline방법이다.

즉, inline 방법으로 CSS를 적용했을 때, 다른 모든 CSS 적용을 오버라이딩 한다.

여기서!

우선순위를 역전시킬 수 있는 방법이 존재한다.

!important를 써주면 된다.

ex) color: pink !important;

이런 방식으로 말이다.

이렇게 해주면  !important 이 적용된 CSS가 최종적으로 오버라이딩된다. 

1. box model 끝