고정 헤더 영역
상세 컨텐츠
본문
박스모델
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets <a href="https://ko.wikipedia.org/wiki/CSS">(CSS)</a>
is a style sheet language used for
describing the presentation of a document written in a markup language like HTML.
</body>
</html>위 코드를 실행 했을때,
<h1> 태그가 화면 전체를 쓰고 있음을 알 수 있고, 줄바꿈이 된것을 알 수 있다.
하지만 <a>태그는 줄바꿈이 되지 않아 다른 콘텐츠와 섞였다.
그래서 책에서는 이것을 명확하게 구별하기 위한 style태그를 정의했다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1,a{
border : 5px solid red;
}
</style>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets <a href="https://ko.wikipedia.org/wiki/CSS">(CSS)</a>
is a style sheet language used for
describing the presentation of a document written in a markup language like HTML.
</body>
</html>
저 박스의 너비또한 설정 할 수 있는데 그것은 아래와 같은 그림을 보고 파악할 수 있다.
개발자 도구를 통해서 본 컨텐츠인데, padding, border, margin으로 설정 할 수 있는데, 관련 예시를 작성해보자.
중간에 content(1365*968), border가 있고 border를 기준으로 안쪽은 padding, 바깥쪽은 margin임을 알 수 있다.
padding - 연두색, border - 살구색, margin - 황토색
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1, a{
border : 5px solid red;
padding: 20px;
margin: 0;
display: block;
width: 100px;
}
</style>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets <a href="https://ko.wikipedia.org/wiki/CSS">(CSS)</a>
is a style sheet language used for
describing the presentation of a document written in a markup language like HTML.
</body>
</html>
HTML의 태그들은 화면 전체를 쓰기도 하고 자기 크기만큼 쓰기도 한다.
화면 전체를 쓰는것은 블록 레벨 엘리먼트
자기 자신의 크기만 갖는것은 인라인 엘리먼트라 한다.
콘텐츠의 폭은 width, 높이는 height
콘텐츠와 테두리 사이의 간격은 padding, 테두리 사이와 테두리 사이의 간격을 margin이라 한다.
그리드
목록과 본문이 나란히 위치하는 디자인을 하려고한다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
NAVIGATION ARTICLE
</body>
</html>
각 단어에 테두리를 주고 나란히 배치해보자.
그럴 때 사용하는것이 무색 무취와 같은 태그가 <div>이고, division의 약자이다.
<div> 태그는 블록 레벨 엘리먼트이기 때문에 줄바꿈이 된다.
<div>와 같은 목적이지만 인라인 엘리먼트인게 <span>이다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</body>
</html>
부모 태그의 id 값을 grid로 지정하겠다. 그리고 id값을 바탕으로 분홍색 테두리로 설정하자.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px solid pink;
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다.
그럴때 grid를 id로 사용했다.
이전 수업에 display를 배웠는데 block, inline, none을 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성이다.
저 두 단어를 나란히 배치해보자.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
grid-template-columns 속성을 추가한 다음 첫 번째 칼럼은 150px정도의 부피를 갖고,
두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr로 지정했다.
ARTICLE 영역은 자동으로 커지고 NAVIGATION 영역은 150px을 고정적으로 차지하게 된다.
너무 신기한 grid
'책 리뷰 > 생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| 10일차 - CSS 코드 재사용 (2) | 2024.01.09 |
|---|---|
| 9일차 - 미디어 쿼리 (0) | 2024.01.09 |
| 7일차 - 속성과 선택자 (1) | 2024.01.04 |
| 6일차 - CSS 기초문법 (1) | 2024.01.03 |
| 5일차 - HTML 마무리 (0) | 2024.01.02 |
댓글 영역