1. 태그가 차지하는 공간
<h1> 태그와 같이 제목으로 지정된 태그는 화면 전체(좌에서 우 끝까지)를 차지합니다. block level element(화면전체)
<a> 태그와 같이 화면 전체를 차지하지 않아 줄바꿈이 되지 않는 태그도 있습니다. inline level element(자기크기)
왜 각 태그가 차지하는 공간이 다를까요?
이를 확인하기 위해 태그가 차지하는 범위를 알아봅시다.
<h1>, <a> 태그에 동일한 CSS <style> 태그를 지정해 {border:5px solid red;}를 설정하면 뚜렷하게 외곽선이 표시되어 태그가 차지하는 '공간'의 크기를 알수있습니다. <h1> 태그는 화면 전체를 차지하고, <a>태그는 본인의 부피만큼만 차지합니다.
이렇게 차지하는 공간이 차이나는 이유는, <h1>태그는 기본값이 style="display:block" 으로, <a>태그는 기본값이 style="display:inline" 으로 적용되었기 때문입니다.
"display:block" 은 화면 전체를 차지하고, "display:inline"은 자신의 부피만큼을 차지합니다.
이 기본값은 CSS를 통해 본인이 마음대로 바꿀수 있습니다. 예시로 <h1>태그에 style="display:inline"을 적용시키면 더이상 화면 전체를 차지하지 않습니다.
2. 태그가 차지하는 공간을 수정
"display:inline, block, none" 등을 통해 차지하는 크기를 조절할수 있습니다.( none : 사라짐)
"padding:--px" 를 통해 태그와 문자 사이 여백을 조절할수 있습니다.(바깥 : 패딩잠바)
"margin:--px" 를 통해 태그와 다른 태그 사이의 간격을 조절할수 있습니다. (테두리와 테두리 : 마진)
"width:--px" 를 통해 너비를 조절할수 있습니다.
"height:--px" 를 통해 높이를 조절할수 있습니다.
이처럼 CSS 속성을 통해 태그가 차지하는 공간을 자유롭게 수정할수 있습니다.[★핵심]
3. ★검사기
html문서에 마우스 우클릭을 통해 검사기, 요소 검사를 실행할수 있습니다.
해당되는 태그가 어떤 요소를 가지고있고, 어떤 CSS스타일이 적용되었는지 일목요연하게 확인할수 있어 굉장히 유용합니다.
4.박스모델 써먹기 -> 디자인 적 측면에서 매우 중요
실제로 사용할때 나누고싶은 선은 테두리를 이용합니다. border: 값을 이용해 원하는 테두리의 위치, 색, 크기, 모양을 지정하고. 내부의 여백이나 마진값 등을 조절해 원하는 형태로 문서를 구분지을수 있습니다.
방금 언급했던 개발자 도구를 적극 활용해 기획한대로 웹페이지를 만들수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block;
width:100px;
}
</style>
</head>
<body>
<h1>CSS</h1>
<h1>CSS</h1>
</body>
</html>
---------------------------------
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
#active {
color:red;
}
.saw {
color:gray;
}
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;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>
'HTML & CSS' 카테고리의 다른 글
| CSS 코드의 재사용 (0) | 2019.07.11 |
|---|---|
| 반응형 디자인 (0) | 2019.07.11 |
| HTML5 (0) | 2019.07.06 |
| 외부문서삽입 - iframe (0) | 2019.07.05 |
| 모바일 지원 (viewport) (0) | 2019.07.05 |
