목표 : 웹페이지의 목록과 글이 나란히 위치하도록 디자인 구성
태그 - div, span
오로지 디자인을 위해서 아무의미 없는 태그를 사용할 필요가 있다. ( ex. h1 태그는 '제목' 이라는 의미를 가진다. )
- div 태그 : division. default - block level element
- span 태그 : default - inline level element
그리드를 이용하기 위해서는 각각의 태그가 가지는 부피감을 확실히 알아봐야한다.
div 태그는 기본적으로 margin 과 padding 값이 0으로 설정되어있다.
'NAVIGATION'과 'ARTICLE' 요소를 나란히 위치시키기 위해서 최신방법인 그리드를 사용한다.
그러기 위해서는 두 개의 div 태그를 감싸는 부모 태그가 필요하다.
부모 태그에 id 값을 설정
두 요소를 나란히 위치시키기 위한 디자인의 목적만으로 div id='grid'라는 태그를 생성했다.
display 속성 : 태그가 표시되는 방법이 완전히 바뀌는 속성
display: grid; 로 설정 후, (여기까지는 아무 변화없음)
grid-template-columns: [1열 속성값] [2열 속성값] .... ;
- px : 고정된 픽셀값으로 설정
- fr : 화면 전체를 기준으로 상대적인 값으로 표현됨
그리드는 CSS의 최신 기술이다.
이러한 최신기술을 사용해도 되는지 여부를 데이터에 근거하여 확인할 수 있다.
CSS, html, javascript 의 기술들 중 현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가 통계를 보여주는 사이트
caniuse.com
> chrom 58~72 버전에서 초록색이면 쓸 수 있다는 뜻
opera mini 는 기술을 지원하지 않기 때문에 사용할 수 없다.
IE11 는 부분적으로 지원
그리드 적용하기
목표 : 목록과 내용을 나란히 배치
현재 내용 전체를 하나로 묶어줄 필요가 있다. 묶어주기 위해서 h1 , li , a 태그를 쓸 수 없다.
why ? 의미와 기능이 있기 때문
따라서 의미과 기능이 없는 div 태그를 이용해서 묶어준다.
ul 태그와 div 태그를 하나의 그룹으로 묶어서 그리드에 포함되는 하나의 요소로서 사용하려면 두 개를 감싸는 공통의 부모 태그가 필요하다. -> div 태그를 이용
- 바깥쪽 부모 div 태그를 그리드로 지정하기 위해서 id 값으로 grid 설정
- id=grid 인 태그에 대해서 display 속성 값을 grid로 설정
- grid-template-columns 에 각 열에 대한 속성값 설정
디자인 다듬기
목록 부분에서 우클릭>검사 ul 태그 속성값 확인
margin 값을 바꿔가면서 확인할 수 있음 ( 실제로 적용되는 것 아님 )
코드에서 해당 디자인 코드 추가
본문에 ul 태그가 사용될 수 있기 때문에,
목록에 사용된 ul 태그에만 디자인을 적용하기 위해서 "grid라는 id 값의 태그 밑에 있는 ul" 에 값을 설정하는 것이 의미가 훨씬 분명해진다.
<!doctype html>
<html>
<head>
<title>TEA</title>
<meta charset="utf-8">
<style>
a{
color:black;
text-decoration: none;
}
h1 {
font-size: 50px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
ul{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ul{ /* 모든 ul 태그 중 부모가 #grid인 태그를 선택하는 선택자 */
padding-left: 35px;
}
#grid #article{
padding-left: 25px;
}
</style>
</head>
<body>
<h1><a href="index.html">Javakong Cafe</a></h1>
<div id="grid">
<ul>
<li><h3><a href="1.html">커피</a></h3></li>
<li><h3><a href="2.html">차</a></h3></li>
<li><h3><a href="3.html">빵</a></h3></li>
</ul>
<div id="article">
<h2>TEA</h2>
<p style="margin-top:45px;">
<h3>한국의 차 역사</h3>
한국의 차의 역사는 문헌에 기록된 것으로 하면 금관가야의 김수로 왕이 처음으로 차를 먹은 것으로부터 시작된다. 합천 청량사 석조여래좌상의 기단석에 보면 부처님께 차공양을 올리는 보살상이 조각되어 있어 신라시대에도 차문화가 발달한 것으로 추정되는 등 불교에서는 차의 제품이 처음으로 만들어 지게 되었고, 조선시대에는 차를 널리 마시게 되었다. 차는 새월이 지날수록 점점 서민층으로 내려오게 되었으며, 개화기에는 한국식 차를 포함하여, 커피, 홍차가 조선 왕족에 퍼지기 시작한다.
개화기 이후
일제강점기를 지나면서 한국에는 다방이라는 독특한, 차를 전용으로 하는 커피숍이 생기게 된다. 그로 커피, 쌍화차, 홍차 등을 대접하다가, 스타벅스, 던킨도너츠 등의 스낵 사업과 함께 전통과 현대의 만남이 되어 녹차, 인삼차, 유자차 등을 커피숍에서 라테나 브런치 형태로 판매하게 된다.</p>
</div>
</div>
</body>
</html>
'코딩공부 > WEB2 - CSS' 카테고리의 다른 글
| [6] 코드의 재사용 (0) | 2019.09.04 |
|---|---|
| [5] 반응형 디자인과 미디어 쿼리 (0) | 2019.09.04 |
| [3] CSS - 박스 모델 (0) | 2019.08.15 |
| [2] CSS 선택자의 기본 (0) | 2019.08.14 |
| [1] CSS 를 이용한 HTML 디자인 (0) | 2019.08.13 |
