안녕하세요!
2025년 6월 14일, UI·UX 반응형 웹퍼블리셔 국비 지원 수업 14 일차 내용을 정리해보았습니다.
오늘은 HTML 구조 중 flex 문제 풀이, 웹 폰트 적용 방법(`Google Fonts`, `눈누`)에 대해 배웠습니다.
---
14차 학습내용
31강
## flex 문제 풀이
: flex 레이아웃 만들기 문제
<!-- HTML -->
<div class="container">
<header>
<h1>레이아웃 배우기</h1>
</header>
<section class="content">
<nav>
<!-- ul>li*4>a[href="#"]{메뉴 아이템 $} -->
<ul>
<li><a href="#">메뉴 아이템 1</a></li>
<li><a href="#">메뉴 아이템 2</a></li>
<li><a href="#">메뉴 아이템 3</a></li>
<li><a href="#">메뉴 아이템 4</a></li>
</ul>
</nav>
<main>
<!-- lorem*1 -->
Lorem, ipsum dolor sit amet consectetur
</main>
<aside>
추가적인 내용
</aside>
</section>
<footer>
<a href="https://se.art.com/">아트 아카데미</a>
</footer>
</div>/* CSS */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
html {
font-family: "Noto Sans KR", sans-serif;
}
body, h1 {
margin:0;
}
.container {
display:flex;
flex-direction:column;
min-height:100dvh;
background-color:darkcyan; /* 임시 */
}
.container > header {
background-color:red; /* 임시 */
flex-grow:0; /* 이 부분을 지워보세요.(기본값 0) */
}
/* 콘텐트 시작 */
.container > .content {
display:flex;
flex-direction:row;
flex-grow:1;
}
.container > .content > nav {
background-color:gold; /* 임시 */
flex-basis:150px;
flex-shrink:0; /* 이 부분을 지워보세요.(기본값 1) */
}
.container > .content > main {
background-color:pink; /* 임시 */
flex-grow:1;
flex-shrink:1; /* 이 부분을 지워보세요.(기본값 1) */
}
.container > .content > aside {
flex-basis:120px;
flex-shrink:0; /* 이 부분을 지워보세요.(기본값 1) */
background-color:purple; /* 임시 */
}
/* 콘텐트 끝 */
.container > footer {
flex-grow:0; /* 이 부분을 지워보세요.(기본값 0) */
background-color:green; /* 임시 */
display:flex;
justify-content:center;
}
32강
## 웹 폰트 적용 방법
# 폰트 위치 중요
: 폰트 관련 코드는 CSS에서 가장 먼저 선언해야 합니다.
: 반드시 normalize.css 위에 위치시켜야 정상 적용
/* CSS 예시 */
---
# 폰트 가져오는 방법
# Google Fonts 사용법
- https://fonts.google.com 접속
- 원하는 폰트 선택
- <link> 또는 @import 코드 복사
<!-- 방법 1: HTML <head>에 link 추가 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- 방법 2: CSS에 import 추가 -->
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
> link는 HTML용 / import는 CSS용 둘 중 하나만 사용하면 된다.
---
# 눈누 폰트 사용법
- https://noonnu.cc 접속
- 원하는 폰트 선택 후 코드 복사
- @font-face 방식으로 직접 불러온다.
/* CSS 방법 */
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/webfontworld/pretendard/Pretendard-Regular.woff2') format('woff2');
}
> 눈누는 한글 폰트가 다양하고, 별도 다운로드 없이 CDN으로 바로 연결 가능하다.
---
# 국문 + 영문 폰트 적용 예시
/* CSS 방법 */
body {
font-family: 'Noto Sans KR', 'Roboto', sans-serif;
}- 국문 → 'Noto Sans KR'
- 영문 → 'Roboto'
- 그 외 → 'sans-serif' (예비용)
> 여러 폰트를 지정하면 브라우저가 차례대로 적용 가능한 폰트를 찾는다.
---
마무리
오늘은 flex를 활용한 문제풀이와 웹 폰트를 사이트에 적용하는 다양한 방법까지 배웠습니다.
그리고 문제풀이를 하며, flex는 종류가 다양힌만큼 활용도 높은 것 같다고 느꼈슴다.
복습완료! 끝-
728x90
'(국비)UX º UI 및 웹퍼블리셔 수업 > HTML | CSS' 카테고리의 다른 글
| [웹 국비 교육 15일차] @media 개념, flex 반응형 메뉴 정리 (2025. 6. 16.) (0) | 2025.06.16 |
|---|---|
| [웹 국비 교육 13일차] Flex 레이아웃 개념과 속성 정리 (2025. 6. 12.) + Flex 실습 사이트 추천 (0) | 2025.06.12 |
| [웹 국비 교육 12일차] 사이드바 만들기와 box-sizing 개념 정리 (2025. 6. 11.) (0) | 2025.06.11 |
| [웹 국비 교육 11일차] table, ::before/after, transition, opacity 개념 정리 (2025. 6. 10.) (0) | 2025.06.10 |
| [웹 국비 교육 10일차] 2, 3차 풀다운 메뉴 만들기 문제 풀이 (2025. 6. 9.) (0) | 2025.06.09 |