CSS:너비(width, height), 인라인과블록요소

너비

너비는 모두 기본값은 auto(브라우저가 넓이 계산)으로 지정

width: 가로넓이

height: 세로넓이

 

인라인,블록요소

• 인라인요소: 포함한 컨텐츠 크기만큼 자동으로 크기조절가능 ex)span태그 -> 자동조절이기때문에 가로,세로사이즈를 조정할수 없다.
• 블록요소: 대부분 아무것도 나타내지않으며 auto설정(가로사이즈를 최고의 넓이로 늘어남) ex)div 태그

<div style="display: inline;">This is an inline element.</div>

<div style="display: block;">This is a block element.</div>

-> display를 inline과 block으로 바꾸기

 

div {
  border: 1px solid red;
}

-> css에서 border값을주면서 각 요소가 차지하는 넓이 확인

 

inline요소는 가로길이가 최소인반면 block요소는 가로길이가 최대임을 알 수 있음

 

1. 인라인요소: margin(외부여백),padding(내부여백)의 top,bottom의 여백은 지정할 수없지만, left,right의 여백은 가능하다

2. 인라인요소안에 블록요소는 불가하다

ex) <span><div><div/><span/> 불가

 

3. 블록요소안에 블록요소는 가능

ex) <div><span></span></div>가능

 

min,max-width, min,max-height

 

CSS에서 max-height와 max-width 속성은 요소의 최대(최소) 높이와 너비를 지정

이 속성을 사용하면 요소가 너무 커지거나 작아져서 화면을 벗어나지 않도록 할 수 있다.

 

 

- margin 내용

2023.07.18 - [분류 전체보기] - CSS- margin

CSS- margin