<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
NAVIGATION ARTICLE
</body>
</html>
NAVIGATION 과 ARTICLE이라는 두 개의 단어에 테두리를 주고 나란히 배치해 보겠다.
그러기 위해선 각 단어를 태그로 묶어야 한다.
이때 디자인이란 목적을 위해 어떤 의미도 없는 <div>태그를 사용한다. (division)
...생략...
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</body>
...생략...
<div>태그는 기본적으로 블록 레벨 엘리먼트이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다.
<div>와 똑같은 목적으로 고안된 태그가 있는데, 바로 <span>태그다.
<span>태그는 인라인 엘리먼트이다. 따라서 목적에 따라 <div>와 <span>태그를 사용하면 되겠다.
...생략...
<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>
...생략...
그리드를 적용한 예시이다.
1. 부피감을 확인하기 위해 <div>태그에 테두리를 지정했다.
2. 두 개의 <div>태그를 감싸는 부모 <div>태그를 추가했다.
3. 부모 태그의 id값을 설정하고, 테두리를 분홍색으로 변경했다.
(두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다.
즉, 디자인 목적 만으로 <div id="grid">가 필요한 것이다.)
4. display는 속성값으로 block, inline, none을 지정해 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성이다.
display 속성에 'grid'라는 속성을 쓰면 아무 변화가 없다.
하지만, grid-template-columns 속성을 추가한 다음 첫 번째 칼럼은 150px 정도의 부피를 갖고,
두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr을 지정했다.
위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.
'WEB > CSS' 카테고리의 다른 글
| CSS 코드의 재사용 (0) | 2020.11.04 |
|---|---|
| 미디어 쿼리 (0) | 2020.11.04 |
| 박스 모델 (0) | 2020.11.04 |
| CSS 속성, 선택자 (0) | 2020.11.04 |
| CSS의 기본 문법 (0) | 2020.11.04 |