비쥬얼 스튜디오 코드
INDEX.HTML) 마켓컬리라는 사이트를 만들어 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마켓컬리</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main>
<section class="all-box">안녕</section>
</main>
</body>
</html>
STYLE.CSS) → 피그마의 스타일 가이드를 참고하여 작성 및 body의 padding과 margin은 여백을 없애는 것
body {
padding: 0;
margin: 0;
}
.h2 {
font-weight: 500;
font-size: 28;
color: #000;
}
.h3 {
font-weight: 400;
font-size: 18;
color: #333;
}
.h4 {
font-weight: 400;
font-size: 16;
color: #333;
}
.ts01 {
font-weight: 500;
font-size: 14;
color: #333;
}
.ts02 {
font-weight: 400;
font-size: 14;
color: #B5B5B5;
}
.ts03 {
font-weight: 400;
font-size: 13;
color: #999;
}
.sets {
font-weight: 500;
font-size: 14;
color: #FA622F;
}
/* 구조 시작 */
.all-box {
height: 950px;
background-color: #F6F6F6;
}
높이가 950인 이유
1. 단축키 F를 눌러서 프레임을 생성한다.
2. 레이어패널에서 이름을 바꾸어 준다.
3. Fill 색상을 채워준다.
4. 너비와 높이를 수정한다.
5. 여백
과제 :
'코딩 > 수업메모' 카테고리의 다른 글
| 250924 코딩 기본 (0) | 2025.09.24 |
|---|---|
| 250923 코딩 기본 (0) | 2025.09.23 |
| 250922 코딩 기본 (0) | 2025.09.22 |
| 250918 코딩 기본(시멘틱구조) (0) | 2025.09.18 |
| 250917 코딩 기본 (1) | 2025.09.17 |