1. 박스 모델
박스 모델(box model)
- HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.
- 내용(content)
텍스트, 이미지
- 패딩(padding)
내용과 테두리 사이의 간격
- 테두리(border)
내용과 패딩을 감싸는 테두리
- 마진(margin)
테두리와 이웃하는 요소 사이의 간격
예)
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
- block level element
화면 전체 이용
※ display:inline;을 쓰면 inline element처럼 됨.
- inline element
태그만큼 이용
2. CSS 그리드(grid)
- 웹사이트의 레이아웃
예)
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
'프론트엔드 > CSS' 카테고리의 다른 글
[CSS] 미디어 쿼리(media query) (0) | 2022.07.21 |
---|---|
[CSS] CSS란? (0) | 2022.07.14 |