사이트 형태
많은 사이트가 다양한 형태로 디자인되어 있으며 사이트는 크게 3가지로 분류됩니다.
1. 웹표준 사이트
2. 페럴렉스 사이트
3. 포폴형 사이트
또한 사이트는 큰 영역으로 구분해서 레이아웃을 형성합니다.
메뉴 영역
배너 영역
컨텐츠 영역
푸터 영역
각 영역에는 여러가지 유형의 컨텐츠가 들어가게 되며 복합적인 유형으로 구성될 수 도 있습니다.
메뉴 유형
배너 유형
이미지 유형
슬라이드 유형
동영상 유형
카드 유형
게시판 유형
푸터유형
이미지/텍스트(탭/슬라이드 등등) 유형
텍스트 유형
따라서 코딩을 시작하기 전에 전반적인 틀을 만들어 놓은 후 시작하는게 좋습니다.
카드 유형 사이트 만들기 01
이번에 만들 간단한 카드 유형의 사이트 형태입니다.
우선 헤더 부분을 만들기 위해 전반적인 리셋을 해준 후 제목과 소제목을 만들어 줍니다.
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); /* import는 css 내부에서 쓰는 폰트 태그 */
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* reset */
* {
padding: 0;
margin: 0;
}
h1, h2 ,h3 ,h4 ,h5, h6 {
font-weight: normal;
}
/* common */
.section {
padding: 120px 0;
}
.section > h2 { /* >는 바로 밑에 있는 자식을 의미 */
font-size: 50px;
line-height: 1; /* 피그마에서 lh가 auto인것은 코딩에서 1임 */
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
</style>
<body>
<section id="cardType" class="card__wrap nexon section">
<h2>크고 작은 리트리버</h2>
<p>크고 작은 그리고 귀엽고 친근한 리트리버 이야기 입니다.</p>
</section>
</body>
코드는 최대한 간결한게 좋습니다. 되도록 하나의 태그에 class를 넣고 '<'를 사용하여 자식요소를 선택한다면
보다 간결하게 만들 수 있습니다.
다음엔 본문에 들어갈 레이아웃 만들기 입니다.
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); /* import는 css 내부에서 쓰는 폰트 태그 */
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* reset */
* {
padding: 0;
margin: 0;
}
h1, h2 ,h3 ,h4 ,h5, h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 { /* >는 바로 밑에 있는 자식을 의미 */
font-size: 50px;
line-height: 1; /* 피그마에서 lh가 auto인것은 코딩에서 1임 */
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
</style>
<body>
<section id="cardType" class="card__wrap nexon section">
<h2>크고 작은 리트리버</h2>
<p>크고 작은 그리고 귀엽고 친근한 리트리버 이야기 입니다.</p>
<div class="card__inner container">
<article class="card">
<div class="card__body"></div>
</article>
<article class="card">
<div class="card__body"></div>
</article>
<article class="card">
<div class="card__body"></div>
</article>
</div>
</section>
</body>
우선 컨텐츠 부분을 잡기 위해 컨테이너 구역을 지정합니다. 그 후 컨텐츠가 들어가 3개의 블록을 만들어줍니다.
마지막으로 컨텐츠 구역에 내용을 넣는 단계입니다.
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); /* import는 css 내부에서 쓰는 폰트 태그 */
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* reset */
* {
padding: 0;
margin: 0;
}
h1, h2 ,h3 ,h4 ,h5, h6 {
font-weight: normal;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 { /* >는 바로 밑에 있는 자식을 의미 */
font-size: 50px;
line-height: 1; /* 피그마에서 lh가 auto인것은 코딩에서 1임 */
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-size: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-around;
}
.card {
width: 32%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .title {
font-size: 24px;
margin-bottom: 10px;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
}
</style>
<body>
<section id="cardType" class="card__wrap nexon section">
<h2>크고 작은 리트리버</h2>
<p>크고 작은 그리고 귀엽고 친근한 리트리버 이야기 입니다.</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header"> <!-- 그림 넣을때 쓰는 웹표준 준수 하기 위한 태그 -->
<img src="img/card_bg01.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">아기 리트리버</h3>
<p class="desc">작은 리트리버는 호기심이 왕성합니다. 그리고 작고 귀엽죠. 어린 리트리버는 털의 색깔이 흰색에 가깝지만 시간이 지날수록 점차 색이 진해집니다.</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg02.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">골든 리트리버</h3>
<p class="desc">성인이 된 리트리버는 매우 온순하며 사람을 좋아하고 잘 따릅니다. 또한 똑똑하기도 해서 전세계적으로 많은 사랑을 받는 견종으로 손꼽히고 있습니다.</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="img/card_bg03.jpg" alt="아기 리트리버에 대해 알아보기">
</figure>
<div class="card__body">
<h3 class="title">레브라도 리트리버</h3>
<p class="desc">레브라도 리트리버는 골든 리트리버보다 털의 색이 연하고 길이가 짧습니다. 골든 트리버 보다 비교적 경계심이 많지만 섬세한 성격으로 안내견 역할을 자주 맡습니다.</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
</div>
</section>
</body>
각각의 블록에 내용과 사진을 넣으면 완성입니다.
사진을 넣을 때 'figure' 태그를 써서 그 안에 이미지를 넣는 것이 웹표준을 준수하는 방법입니다.
댓글