반응형
🌐 웹 기초
지난 시간에는 CSS의 사용 이유와 기본 문법, Selector를 통한 다양한 적용 방법들에 학습하였다. 이번 시간에는 CSS의 Box Model을 학습하여 Margin, Border, Padding 등 영역에 관한 내용에 대하여 학습하도록 하자.
🚂 CSS
이전 시간과 마찬가지로 CSS를 학습하기 전에 앞서, CSS의 정보를 한눈에 볼 수 있도록 정리한 사이트 https://www.w3schools.com/css/default.asp 를 통해 어떻게 사용하는지 확인하고 이를 실습한다.
Box Model
Box 모델은 각각의 컨텐츠들의 영역을 구분하는 역할을 한다. 따라서 보더, 마진, 패딩은 각자의 범위 내애서 컨텐츠들의 크기를 얼만큼 설정하여 보여줄 것을 나타낸다.
또한 2가지의 엘리먼트가 존재하다. 하나는 블록 엘리먼트로 이는 화면 전체를 무조건 기본적으로 사용하려고 하는 엘리먼트이다. 나머지는 일라인 엘리먼트인데 이는 자기 자신만의 고유한 영역을 기본적으로 사용하는 엘리먼트이다. 마지막으로 Box Model의 예를 살펴보도록 하자. 스타일에 border-bottom과 padding-bottom을 설정해주었을 때 어떻게 나타나는지 확인하자.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Title of the document</title>
<style>
h1 {
border-bottom : 1px solid red;
padding-bottom : 5px
}
</style>
</head>
<body>
<h1>컴투스</h1> 공동 창업자 <b>이영일</b> 대표가 설립한 <i>해긴</i>은 <u>‘홈런 클래시’</u>, ‘오버독스’, <strong>‘익스트림 골프’</strong>, ‘플레이투게더’ 등 <br>캐주얼한 매력을 극대화한 다양한 장르의 모바일게임을 개발 및 서비스하는 기업이다.
결과화면
패딩의 바텀으로 5px만큼 떨어진 공간에 빨간색으로 줄이 그어진것을 볼 수 있다. 😎
반응형
'공부 > 인프런 - Rookiss' 카테고리의 다른 글
| Part 6-3-2. 고급 C# 문법 : LINQ #1 (0) | 2024.08.22 |
|---|---|
| Part 6-3-1. 고급 C# 문법 : Async, Await (0) | 2024.08.17 |
| Part 6-2-8. 웹 기초 : CSS #1 (0) | 2024.08.13 |
| Part 6-2-7. 웹 기초 : HTML #5 (0) | 2024.08.12 |
| Part 6-2-6. 웹 기초 : HTML #4 (0) | 2024.08.08 |