<HTML와 CSS를 이용해 블로그 만들기> 2. div 태그를 이용한 박스 만들기

조은·2021년 7월 22일
0

HTML & CSS

목록 보기
2/5

1. div를 이용한 박스 만들기

많은 웹페이지는 박스 레이아웃으로 구성되어 있다.
저번에 우리가 만든 간단한 프로필을 다시 보자.

이 화면에서 아래쪽에 자세한 설명을 추가해보자.
그냥 글만 넣으면 밋밋하니까 박스를 추가해서 박스 안에 글을 작성해보자.

박스형태로 글을 작성할 때는 보통 div 태그를 많이 사용한다.


이런 식으로 추가해주었다.

그렇다면 보기 좋도록 박스를 가운데로 정렬하고,
HTML파일을 간결하게 하기 위해 스타일링을 CSS로 해보자.

박스를 중앙에 정렬하기 위해선 3가지 속성 추가가 필요하다.


이렇게 3가지 요소를 추가하면 된다. 그렇다면 전체 class의 속성을 보자.

padding은 바깥쪽 여백, border는 박스 안쪽 여백이다.

각각의 속성 뒤에 -top, -right 등을 줘서 상하좌우에만 따로 여백을 줄 수도 있다.
또는 margin : 5px 6px 7px 8px; 이렇게 띄어쓰기를 이용해 작성하면
차례로 상 우 하 좌 마진을 5,6,7,8px 줄 수 있다.


2. display : block

모든 태그들은 default로 display값이 block이다.(한 행을 온전히 차지한다는 의미)
다른 속성을 원한다면
inline, flex 등의 속성을 주면 된다.

기타 다른 속성은 외우는 것보다 필요할 때마다 검색해서 사용하자!

profile
끄적끄적....

0개의 댓글