CSS 박스 모델
- block level element : 화면 전체를 사용하는 태그
- Inline element : 자신이 가진 컨텐츠 만큼의 공간만 사용하는 태그
- display 속성으로 사용할 공간(block, inline) 선택 가능
\<h1>태그와 <a>태그를 사용했을 때 웹브라우저에 확인해보면 <h1>은 자동 줄바꿈이 되어있고, <a>는 줄바꿈이 되지 않는다.
<h1>은 화면 전체를 쓰는 block level element 이고, <a>는 콘텐츠만큼의 공간만 사용하는 inline element 이다.
display 속성으로 기본값을 바꿀 수 있다.
<style>
/* block level element */
h1{
border-width:5px;
border-color:red;
border-style: solid;
display: inline;
}
/* inline element */
a{
border-width:5px;
border-color:red;
border-style: solid;
display: block;
}
</style>
>> 중복을 제거한 코드
<style>
h1, a{
border: 5px solid red;
}
</style>
Margin 과 Padding
<style>
h1{
border: 5px solid red; /* 경계선 - 엘리먼트의 아웃라인 */
padding: 20px; /* border 내부의 여백을 조절 */
margin: 20px; /* border 외부의 여백을 조절 */
display: block;
width: 200px;
}
</style>
크롬 브라우저의 개발자 도구 활용
각 요소에 적용된 디자인 설정을 확인할 수 있다.
-
웹 페이지 우클릭 > 검사
-
도구 더보기 > 개발자 도구
Elements 의 Styles 에서 해당 엘리먼트에 적용된 css 설정값 확인
박스 모델 활용하기
>> 목적 : 다음과 같은 형태의 웹페이지로 만들기
1. <h1> 태그의 아래쪽 border에 경계선 그리기
border-bottom:1px solid gray;
2. 크롬 브라우저의 개발자 도구로 <h1>태그 디자인 확인
Elemets 에서 확인하려는 태그를 클릭하면 해당 태그에 적용된 디자인 확인이 가능
박스 모델에서 margin 부분에 커서를 위치시키면 <h1>태그의 margin 영역을 알 수 있다.
3. <h1>의 margin을 없애고 padding 값을 설정
4. <ul> 태그의 박스 수정
<style>
ul{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
</style>
5. <body> 의 margin 편집
현재 <body> 태그에 margin 값을 0으로 설정
크롭 개발자 도구를 이용해 웹브라우저에서 CSS 편집할 수 있다. (소스코드에 적용되는 것은 아님!!!)
<style> 태그에서 우클릭 하여 Edit as HTML 클릭
<body> 태그에 margin 값을 0으로 설정
margin 이 없어진 것을 확인할 수 있다.
'코딩공부 > WEB2 - CSS' 카테고리의 다른 글
| [6] 코드의 재사용 (0) | 2019.09.04 |
|---|---|
| [5] 반응형 디자인과 미디어 쿼리 (0) | 2019.09.04 |
| [4] 그리드 (0) | 2019.09.03 |
| [2] CSS 선택자의 기본 (0) | 2019.08.14 |
| [1] CSS 를 이용한 HTML 디자인 (0) | 2019.08.13 |
