728x90
사이트 제작하기 : 카드 유형01
웹 개발자에게 사이트 제작하기는 기본입니다.
따라서 웹 개발자가 되기 위해서는 사이트의 유형과 사이트 만드는 방법을 기초부터 탄탄하게 배워야 합니다.
오늘은 코딩과 피그마를 활용하여 아래와 같은 사이트를 만들어 보겠습니다!
오늘 만들 사이트 형식
사이트 제작 방법
1. Figma 사용해서 레이아웃 설정
사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다.
밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다.
※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다.
2. vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
<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="기린">
<!--웹표준 준수하기 위함으로 alt적어주는 것 접근성을 향상 시키기 위함-->
</figure>
<div class="card__body">
<h3 class="tit">기린</h3>
<p class="desc">
기린은 후각과 청각이 뛰어난 동물로 울음소리는 잘 내지 않는 것으로 알려져 있습니다.
혀가 긴 기린은 무려 50센티 정도 되는 길이로 물건을 집을 수 있습니다. 대단하죠?......................
</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="tit">코끼리</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="tit">돌고래</h3>
<p class="desc">
돌고래는 고래목 이빨고래아목에 속하는 종류로 고래목에서는 가장 인간과 친숙하게 잘 알려진
동물입니다. 고래류 중에서 주둥이가 튀어나온 특징이 있습니다. 귀엽죠?....................
</p>
<a class="btn" href="/">더 자세히 보기</a>
</div>
</article>
</div>
</section>
</body>
3. vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 CSS로 하나하나 디자인해 나가는 것이 중요합니다!
<style>
/* fonts */
@import url('https://webfontworld.github.io/NexonLv2Gothic/NexonLv2Gothic.css');
.nexon {
font-family: 'NexonLv2Gothic';
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6{
font-weight : normal;
}
a{
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
/* +는 형제 > 바로 밑에 있는 자식(그래서 다른 자식들한테는 해당 안됨) */
.section > h2 {
font-size: 50px;
line-height: 1;/*figma auto랑 같음*/
text-align: center;
margin-bottom: 20px;
}
.section > p {
font-style: 22px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 70px;
}
/* cardType */
.card__inner {
display: flex;
justify-content: space-between; /*양쪽 정렬 맞춰주는 것*/
}
.card {
width: 32%;
background: #f5f5f5;
}
.card__body {
padding: 24px;
}
.card__body .tit {
font-size: 24px;
margin-bottom: 10px;
}
.card__body .desc {
font-size: 18px;
line-height: 1.4;
color: #666;
margin-bottom: 20px;
font-weight: 300;
}
.card__body .btn {}
</style>
▶완성본
'사이트 제작하기 > Card Type 카드 유형' 카테고리의 다른 글
| [사이트 제작] 세번째 : 카드유형 TYPE.03 (11) | 2022.08.10 |
|---|---|
| [사이트 제작] 두번째 : 카드 유형 TYPE.02 (7) | 2022.08.09 |
댓글