1. 블록 요소
1. DIV, H1, P
2. 사용 가능한 최대 가로 너비를 사용한다.
-->다음과 같이 가로 너비를 설정하지 않아도 왼쪽부터 오른쪽 끝까지 빨간색으로 채워진걸 볼 수 있다.
body{
margin : 0;
padding : 0;
}
div{
background : red;
height : 20px;
}
3. 크기를 지정할 수 있다.
-->크기가 지정해준만큼 커진다.
body{
margin : 0;
padding : 0;
}
div{
background : red;
width : 200px;
height : 150px;
}4. (width : 100%; height : 0; 으로 시작)
5.수직으로 쌓임
6.margin, padding 위,아래, 좌, 우 사용 가능하다.
7.레이아웃
cf. 하지만 CSS에서 display : inline; 을 이용해서 inline 요소처럼 사용할 수 있다.
div{
background : red;
width : 120px;
height : 80px;
display : inline;
}
2. 인라인 요소
1. SPAN, IMG
2. 필요한 만큼의 너비를 사용한다.
-->span의 내용없이 다음과 같이 설정한다면 div와 다르게 화면에 아무것도 나오지 않는다. 그리고 만약에 내용이 "안녕"이 들어갔다면, 안녕글씨만큼 background가 빨간색으로 나온걸 알 수 있다.
body{
margin : 0;
padding : 0;
}
span{
background : red;
height : 20px;
}
3. 크기를 지정할 수 없다.
-->다음과 같이 가로, 높이 크기를 지정을 해도 그 크기만큼 커지지 않는다.
body{
margin : 0;
padding : 0;
}
span{
background : red;
width : 200px;
height : 150px;
}4.(width : 0, height : 0로 시작)
5.수평으로 쌓임
6.margin, padding 위,아래를 사용 할 수 없다.
-->다음과 같이 사용한다면 background 는 빨간색으로 padding이 들어간것처럼 보이지만 출력해서 보면 div가 겹쳐서 나온것을 볼 수 있다. 이로서 span은 margin과 padding을 위아래 사용 할 수 없는걸 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GitHub</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<span>안녕하시오!</span>
<div>동햬물과백두산이</div>
</body>
</html>body{
margin : 0;
padding : 0;
}
span{
background : red;
width : 100px;
height : 30px;
margin : 20px;
padding : 20px;
}7.TEXT
cf. 하지만 CSS에서 display : block; 을 이용해서 block 요소처럼 사용할 수 있다.
span{
background : red;
width : 120px;
height : 80px;
display : block;
}
'HTML > 요소' 카테고리의 다른 글
| BODY 내 구조 개념 --> 콘텐츠 구분 MAIN (0) | 2020.12.24 |
|---|---|
| BODY 내 구조 개념 --> 콘텐츠 구분 FOOTER (0) | 2020.12.24 |
| BODY 내 구조 개념 --> 콘텐츠 구분 HEADER (0) | 2020.12.24 |
| 주요범위 & 메타데이터 - HTML, HEAD, BODY, TITLE (0) | 2020.12.23 |
| 기본 문서작성 다시 리뷰 (0) | 2020.06.06 |