Web/css
css 블록
Devwon99
2024. 1. 2. 18:00
html문서의 태그들은 각자의 크기를 갖는다.
예를들어 h1태그는 줄바꿈이되고 a태그는 줄바꿈이 안되듯이 각자의 크기를 갖고 있다.
위와 같이 border 속성을 주어 해당 크기를 확인해 볼 수 있다.
해당 크기는 diplay 속성을 통해 변경할 수 있다.
선택자는 ,를 통해 여러가지 선택자를 한번에 불러올 수 있다.
위의 코드는 아래와 같이 더 생략하여 작성할 수 있다.
● 박스모델
박스 모델에서는 여러가지 개념이 있다. 먼저 아래의 코드와 결과는 기본 코드와 결과이다.
● padding
padding 개념은 content와 테두리 사이의 간격이다.
● margin
margin은 테두리와 테두리 사이의 간격이다.
● display block, width, height
block level의 특성은 화면 전체를 사용하지만 해당 특징을 변경하고 싶다면
width와 height를 통해서 태그의 크기를 직접 지정할 수 있다.
padding와 margin개념이 헷갈리는데 개발자 도구를 활용한다면 이해하기 쉽다.
크롬 기준으로 f12를 통해 개발자 도구를 열 수 있다.
위의 사진처럼 테두리(border) 기준으로 안쪽 여백은 padding 바깥쪽 여백은 margin이다.