▶생활코딩 WEB2 CSS - 8. 박스 모델
진작 제대로 봤으면 테이블 태그 예시나 기념일 만들기를 할 때,
쓸데없이 많은 시간을 보내진 않았을 것 같다...^^...
그 때 웹의 elements에서 바로바로 확인했던 게 아니라서
수정→리로드→수정→리로드...를 반복하며 정말 덧없이 시간을 흘려보냈음.
영역 사용 범위
| Block level element | 화면(display)의 전체 영역을 사용. |
| Inline element | 화면(display)의 특정 영역(한정된 영역)만을 사용. |
화면(display) 영역을 얼마만큼 사용하는가, 하는 특성.
얘네는 태그는 아니고 일종의 특성이다.
속성...같은 걸로 봐도 되나?
예를 들어 h1태그는 특성상 기본적으로 Block level element에 해당한다.
화면의 전체 영역 → 이 말은 화면 가로 최대치를 쫙 차지한다고 보면 됨.
▶예시1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box01</title>
<style>
/*block level element ->
화면의 전체 영역을 사용.*/
h1 {
border-width: 5px;
border-color: green;
border-style: solid;
}
/*inline element ->
화면의 특정 영역만을 사용.*/
a {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
}
</style>
</head>
<body>
<h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</body>
</html>
영역 사용 범위를 바꾸고 싶을 때
뭔 소린고 하면...
· Block level element를 → Inline element처럼 사용하고 싶다면,
css에서 Block level element특성에 해당되는 곳에 → Inline element요소를 넣으면 됨. 혹은,
· Inline element를 → Block level element처럼 사용하고 싶다면,
css에서 Inline element특성에 해당되는 곳에 → Block level element요소를 넣으면 됨.
▶예시2
위 예시1을 바탕으로,
· h1에 display:inline;을 삽입해, Block level element를 → Inline element로.
· a에 display:block;을 삽입해, Inline element를 → Block level element로.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box02</title>
<style>
/*block level element ->
화면의 전체 영역을 사용.
inline처럼 화면의 일부분만을 사용하고 싶다면,
inline요소를 넣어주면 됨.*/
h1 {
border-width: 5px;
border-color: green;
border-style: solid;
display:inline;
}
/*inline element ->
화면의 특정 영역만을 사용.
block처럼 화면 전체를 사용하고 싶다면,
block요소를 넣어주면 됨.*/
a {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
display:block;
}
</style>
</head>
<body>
<h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</body>
</html>
'1-2 css' 카테고리의 다른 글
| [css] 폰트 (0) | 2021.07.11 |
|---|---|
| [css] <div>, <span>태그_레이아웃 설정하기 (0) | 2021.07.09 |
| [css] id, class속성 (0) | 2021.07.07 |
| [css] 속성 간략하게 쓰기 (0) | 2021.07.05 |
| [css] 선택자(Selector), css의 속성(Property) (0) | 2021.06.25 |