시멘틱 태그로 패널 구조잡기 & html 색상 입히기 (5)
시멘틱 태그로 패널 구조잡기 & html 색상 입히기 (5) — #시멘틱태그 #html색상 웹사이트 디자인 소개 및 학습목표 디자인소개 패스트 캠퍼스 "최성일"강...
#SVG UI#Naver Blog
#시멘틱태그 #html색상
웹사이트 디자인 소개 및 학습목표
디자인소개
패스트 캠퍼스 "최성일"강사님의 강의를 듣고 내용정리한 글입니다. 디자인은 강의의 템플릿을 아주 살짝 변형하였습니다. 모든 디자인 저작권은 강사님께 있습니다.
처음부터 끝까지 하나 하나 손코딩 하는 모습을 보여드릴 것이며. 이전글을 보고오시면 더욱 이해가 빠릅니다.
학습목표
- 시맨틱태그로 패널 구조를 잡아준다.
- 패널에 배경색을 지정해준다.
사용되는언어
HTML
- 패널의 시멘틱태그 구조를 이해한다.
- main>ul.panel>li>.bg이다.
CSS
- nth-of-type를 활용하여 패널 배경색상을 지정해준다.
HTML
<main>
<ul class="panel">
<li>
<div class="bg"></div>
</li>
<li>
<div class="bg"></div>
</li>
<li>
<div class="bg"></div>
</li>
<li>
<div class="bg"></div>
</li>
</ul>
</main>
시맨틱태그 구조
- main > ul.panel > li\*4 >.bg 이다.
- ul은 전체 틀 li는 각 패널의 틀 .bg는 안의 요소의 전체 틀로 보면된다.
- 이렇게 단계적으로 나눠야 JS를 활용할때 오류가 잘 안난다
CSS
기본틀잡기
| .panel{ width: 100%; height: 100%; position: relative;//프레임 정의 li { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; perspective: 400px; }} | .panelposition:relatvie; // 프레임 지정하기litop:0px; left:0px; //초기설정기억perspective: 400px; //입체감 있게 패널을 회젆 시키기 위해서 적용한 것 |
|---|
.bg설정
| .bg{ width: 100%; height: 100%; position: absolute; transition: 1s; top: 0px; left: 0px; } |
|---|
.nth-of-type활용하여 백그라운드 색상 넣기
| li{ &:nth-of-type(1) .bg{ background: #fddfb9; } &:nth-of-type(2) .bg{ background: #C3E7FA; } &:nth-of-type(3) .bg{ background :#bf7222; } &:nth-of-type(4) .bg{ background: #ff6200d2 } } |
|---|
li &:nth-of-type(n)을 활용하여 각 패널에 배경색을 넣어준다. 음식 컨셉에 어울리는 배경색을 모두 가져왔다. 배경색을 쉽게 추출하는 방법은 여기를 참고하면 된다.
복습
짚어갈 포인트
- 시멘틱 태그 공부!
- css nth-of-type에 대한 이해
태그를 좀 더 가독성 있게 만들기 위해 고안하다가 별 내용은 없지만 제일 시간이 오래걸린 포스팅이다. (하하) 이제는 확실히 알았으니 속도를 높여보자!