0. 복습
인라인 요소 / 블록 요소
-
인라인 요소 : 컨텐츠의 크기만큼 영역을 차지
ex)<span></span>, <a></a>, <img></img> -
블록 요소 : 한줄을 영역으로 차지함
ex)<h1>, <p>, <div>
CSS
: 웹페이지의 스타일(디자인)을 담당
id/class 속성
- id : 특정 태그에 식별 가능한 고유한 값을 부여함
선택자로 사용될 때는 #을 작성 - class : 여러 태그를 하나의 집단으로 묶음
선택자로 사용될 때는 .을 작성
박스 모델
: 요소가 차지하는 일정한 영역
margin, padding, border, contents로 구성
1. display속성
: HTML에서 요소를 어떻게 표시할지 결정한다
HTML의 요소들은 기본적으로 display속성 값이 설정되어 있다
ex) 블럭요소 -> display : block;
인라인 요소 -> display : inline;
+) 우리가 사용할 블록 요소를 인라인으로 변경하고 싶다면
display 속성 값에 inline 으로 변경하면 된다
1) display속성의 기본 4가지 값
(1) none
: 요소를 보이지 않게 설정한다.
단순히 투명해지는 것이 아니라, 아예 공간을 차지하지 않는다
(2) block
: 블록 요소로 설정한다
블록 요소는 기본적으로 가로 영역을 모두 차지한다
(3) inline
: 인라인 요소로 설정한다
기본적으로 컨텐츠의 크기만큼 영역을 차지한다
(너비, 높이를 설정할 수 없다)
(4) inline-block
: 인라인 블록 요소로 설정한다
인라인과 블록의 특징을 섞어 놓은 요소,
인라인처럼 컨텐츠 만큼만 영역을 차지하지만
블럭처럼 너비, 높이 설정할 수 있다
서코딩 127 !