3. CSS 시작하기
- 색상
→ https://www.w3.org/wiki/CSS/Properties/color/keywords
→ 색 이름은 하나하나 붙이기도 힘들고 섬세하게 표현하기 어려우므로 색상 코드를 사용
→ 구글에서 Color Picker라고 검색하면 위와 같은 색상 선택 도구가 나타남
→ 여기서 HEX(16진수)가 색상 코드를 의미하며, 샵(#)을 붙이고 숫자 여섯글자로 된 코드
→ 색상 코드는 대소문자를 구분하지 않으므로 #FFFFFF와 #ffffff는 같은 색상
- 배경색
→ style 속성은 태그에다가 CSS를 적용할 때 사용하는 속성
→ background-color는 CSS 속성을 부르는 문법
→ CSS 속성 이름 : CSS 속성 값 이런 형태로 작성
<div style="background-color: #7542E0;">
<h1>Weekly <span>Codeit</span></h1>
<p>금요일에 만나는 코딩 한 스푼</p>
</div>
- 구독 페이지 : 배경색 넣기
→ 구독 페이지에 배경색을 넣으려고 미리 div 태그로 영역을 나누었다.
들어갈 색상과 예시 이미지를 참고해서 div 태그와 p 태그에 배경색을 지정
들어갈 색상
(1) 첫 번째 div 영역 : #703fda
(2) 두 번째 div 영역 : 배경색 넣지 않음
(3) 세 번째 div 영역 : #f6f6fb
안에 있는 p 태그 : #ffffff
(4) 네 번째 div 영역 : #7844e8
(5) 다섯 번째 div 영역 : #5b2eb0
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<div style="background-color: #703fda">
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
</div>
<div>
<h2>
코드잇이 엄선한<br>
프로그래밍 꿀팁
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog">
수업 살펴보기
</a>
</p>
</div>
<div style="background-color: #f6f6fb">
<h2>
배움의 기쁨을 세상 모두에게.<br>
많은 코둥이들이 구독하고 있어요!
</h2>
<img src="banner-students.png">
<div style="background-color: #ffffff">
<p>
iloveprincess 님<br>
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p>
코드냠냠 님<br>
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p>
냐리 님<br>
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/reviews">
후기 더 보기
</a>
</p>
</div>
</div>
<div style="background-color: #7844e8">
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
</div>
<div style="background-color: #5b2eb0">
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</div>
</body>
</html>
- 글자색
→ 글자색은 color라는 속성을 사용하여 변경할 수 있다.
<div style="background-color: #7542E0;">
<h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
→ 그런데 이렇게 많은 글이 들어 있는 페이지에서는 글자 색을 일일이 바꿔주는 것이 번거롭다
→ 페이지 전체에 있는 글자에 색을 바꾸고 싶을 때에는 페이지 전체를 감싸는 태그에
글자 색을 넣어주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weekly Codeit</title>
</head>
<body style="color: #737373;">
<div style="background-color: #7542E0;">
<h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
<div>
<img src="thumbnail-unix.png" alt="">
<h2 style="color: 2e2e2e;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
</div>
<div style="background-color: #fbfbff;">
<img src="thumbnail-machine-learning.png" alt="">
<h2 style="color: 2e2e2e;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
</div>
<div>
<img src="thumbnail-emmet.png" alt="">
<h2 style="color: 2e2e2e;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
</div>
<div style="background-color: #fbfbff;">
<h2 style="color: 2e2e2e;">코둥이 퀴즈</h2>
<p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
</div>
<div style="background-color: #46415a; color: #ffffff;">
<p>Weekly Codeit</p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>
- 구독 페이지 : 링크에 색상 넣기
→ 링크 태그 a에 글자 색을 넣어보자
→ 사용할 색상 : 글자 색 #7844e8
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
</head>
<body>
<div style="background-color: #703fda">
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
</div>
<div>
<h2>
코드잇이 엄선한<br>
프로그래밍 꿀팁
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog" style="color : #7844e8">
수업 살펴보기
</a>
</p>
</div>
<div style="background-color: #f6f6fb">
<h2>
배움의 기쁨을 세상 모두에게.<br>
많은 코둥이들이 구독하고 있어요!
</h2>
<img src="banner-students.png">
<p style="background-color: #ffffff">
iloveprincess 님<br>
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p style="background-color: #ffffff">
코드냠냠 님<br>
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p style="background-color: #ffffff">
냐리 님<br>
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/reviews" style="color : #7844e8">
후기 더 보기
</a>
</p>
</div>
<div style="background-color: #7844e8">
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
</div>
<div style="background-color: #5b2eb0">
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</div>
</body>
</html>
- 글꼴
→ 글꼴은 font-family라는 CSS 속성을 사용하여 변경할 수 있다.
<body style="color: #737373; font-family: sans-serif;">
<div style="background-color: #7542E0;">
<h1 style="color: #ffffff;">Weekly <span>Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
→ sans-serif는 serif가 없다는 뜻으로 즉, 뾰족한 부리가 없다는 뜻
한글 글꼴 중에서는 대표적으로 고딕체나 돋움체가 있다.
→ serif는 대표적으로 명조나 궁서체가 있다.
→ 원하는 글꼴을 정하고 싶은 경우에는 원하는 글꼴을 적어주면 된다.
font-family: Arial, Helvetica, sans-serif;
여기서 Arial 글꼴이 없다면 Helvetica, 또 없다면 sans-serif를 적용하라는 뜻
- 구글 폰트
→ font-family라는 CSS 속성에서 글꼴을 여러 개 지정할 수 있다.
그러나 상대방의 컴퓨터에 해당 글꼴이 없다면 원하는 글꼴을 보여줄 수 없다.
→ 글꼴 파일을 인터넷으로 직접 제공해주는 방식을 사용하면 상대방의 컴퓨터에 해당 글꼴이
없더라도 내가 지정한 글꼴 파일을 보여줄 수 있다.
이러한 방식을 [웹 폰트]라고 한다.
→ 사이트에 접속하면 글꼴을 자동으로 다운받아서 보여주는 방식
→ 100, 200, 300 등의 숫자는 글꼴의 굵기를 의미
→ 글꼴을 굵기 별로 상황에 맞춰 다르게 보여준다면 좀 더 섬세한 디자인을 보여줄 수 있다.
→ link 태그로 되어있는 코드를 복사해서 head 태그 안에 넣어주면 웹 폰트를 사용하여
웹사이트 글꼴을 지정할 수 있다.
→ body 태그 안의 a 태그도 링크 태그이지만 a 태그는 페이지를 이동하는 경우에 사용
link 태그는 head 태그 안에 작성하고 외부 데이터를 가져오는 태그로 사용
→ 코드를 보면 글꼴의 이름이 나와있고, font-family로 시작되는 코드가 있으므로
해당 코드를 css에 작성해준다.
- 구독 페이지 : 글꼴 넣기
→ 구글 폰트를 사용하여 사이트 전체에 글꼴을 적용해보자.
→ body 태그 안에 poppins와 noto sans korean을 적용
이 때, poppins를 우선적으로 사용하고 없는 글자는 noto sans korean을 사용
적용할 글꼴
- Poppins: https://fonts.google.com/specimen/Poppins
Regular 400
Semi-bold 600
- Noto Sans KR: https://fonts.google.com/noto/specimen/Noto+Sans+KR
Regular 400
Bold 700
<head>
<title>Weekly Codeit</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&
family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
→ font-family라는 CSS 속성을 사용하면 글꼴을 적용할 수 있다.
→ Poppins라는 글꼴을 우선적으로 사용하고 해당 글꼴이 없는 경우 Noto sans KR을 사용하도록
하려면 다음과 같은 코드를 작성한다.
<body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
![업로드중..]()
- 픽셀
→ CSS에서는 크기를 설정할 때 픽셀이라는 단위를 사용한다.
→ 위의 이미지에서 일부를 확대하니 작은 정사각형들로 이루어져 있는 것을 볼 수 있는데
각 정사각형을 픽셀(Pixel)이라고 부른다.
→ pixel은 Picture Element의 약자로 그림의 기본 요소라는 뜻이다.
작은 정사각형들은 화면에서 크기의 단위로 사용하는데
코드에서 크기의 단위로 쓸 때에는 px라고 쓰고 픽셀이라고 읽는다.
→ 글자의 크기가 24px이라고 한다면 글자의 세로 크기가 24px이라는 뜻
- 글자 크기와 굵기
→ 글자 크기는 font-size 속성을 사용하여 크기를 조절할 수 있다.
→ 글자의 굵기는 font-weight라는 속성을 사용하여 100, 200, 300 이런 식으로 두께를 조절
- 구독 페이지 : 폰트 크기와 굵기
→ 작은 제목에 폰트 크기와 굵기를 설정해보자.
아래 사용할 크기, 굵기 값과 예시 이미지를 참고해서 h2 태그와 span 태그에 CSS를 추가
사용할 크기와 굵기
- 코드잇이 엄선한
크기 24px, 굵기 300
- 프로그래밍 꿀팁
크기 32px, 굵기 700
- 배움의 기쁨을 세상 모두에게
크기 24px, 굵기 300
- 많은 코둥이들이 구독하고 있어요!
크기 32px, 굵기 700
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
<div style="background-color: #703fda; color: #ffffff">
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
</div>
<div>
<h2 style="font-size:24px; font-weight:300;">
코드잇이 엄선한<br>
<span style="font-size:32px; font-weight:700">프로그래밍 꿀팁</span>
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog" style="color: #7844e8">
수업 살펴보기
</a>
</p>
</div>
<div style="background-color: #f6f6fb">
<h2 style="font-size:24px; font-weight:300;">
배움의 기쁨을 세상 모두에게.<br>
<spa style="font-size:32px; font-weight:700;">많은 코둥이들이 구독하고 있어요!</span>
</h2>
<img src="banner-students.png">
<p style="background-color: #ffffff">
<span style="color: #b8b7ba">iloveprincess 님</span><br>
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p style="background-color: #ffffff">
<span style="color: #b8b7ba">코드냠냠 님</span><br>
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p style="background-color: #ffffff">
<span style="color: #b8b7ba">냐리 님</span><br>
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/reviews" style="color: #7844e8">
후기 더 보기
</a>
</p>
</div>
<div style="background-color: #7844e8; color: #ffffff">
<h2>
코딩이 즐거워지는 뉴스레터,<br>
<span>Weekly Codeit</span>
</h2>
</div>
<div style="background-color: #5b2eb0; color: #ffffff">
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</div>
</body>
</html>
- 글 정렬하기
→ 기본적으로 웹 페이지는 좌측 정렬이 되어 있는데 중앙정렬로 바꾸기 위해서는
text-align이라는 CSS 속성을 사용
→ 정렬에는 좌측 정렬, 우측 정렬, 가운데 정렬이 있으며, text-align : left, right, center
이렇게 작성하여 정렬할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Weekly Codeit</title>
</head>
<body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif">
<div style="background-color: #7542E0; text-align: center;">
<h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
<div>
<img src="thumbnail-unix.png" alt="">
<h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
</div>
<div style="background-color: #fbfbff;">
<img src="thumbnail-machine-learning.png" alt="">
<h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
</div>
<div>
<img src="thumbnail-emmet.png" alt="">
<h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
</div>
<div style="background-color: #fbfbff; text-align: center;">
<h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
<p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
</div>
<div style="background-color: #46415a; color: #ffffff; text-align: center;">
<p>Weekly <span style="font-weight: 700;">Codeit</span></p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>
- 구독 페이지 : 정렬
→ "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 부분에 정렬을 추가
→ 전체를 감싸는 영역인 <div> 태그에는 중앙 정렬을 적용하고, 후기가 들어가 있는 <p> 태그들에는
좌측 정렬을 적용
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">
</head>
<body style="font-family: Poppins, 'Noto Sans KR', sans-serif">
<div style="background-color: #703fda; color: #ffffff">
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
</div>
<div>
<h2 style="font-size: 24px; font-weight: 300">
코드잇이 엄선한<br>
<span style="font-size: 32px; font-weight: 700">프로그래밍 꿀팁</span>
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog" style="color: #7844e8">
수업 살펴보기
</a>
</p>
</div>
<div style="background-color: #f6f6fb; text-align:center;">
<h2 style="font-size: 24px; font-weight: 300">
배움의 기쁨을 세상 모두에게.<br>
<span style="font-size: 32px; font-weight: 700">
많은 코둥이들이 구독하고 있어요!
</span>
</h2>
<img src="banner-students.png">
<p style="background-color: #ffffff; text-align:left;">
<span style="color: #b8b7ba">iloveprincess 님</span><br>
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p style="background-color: #ffffff; text-align:left;">
<span style="color: #b8b7ba">코드냠냠 님</span><br>
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p style="background-color: #ffffff; text-align:left;">
<span style="color: #b8b7ba">냐리 님</span><br>
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/reviews" style="color: #7844e8">
후기 더 보기
</a>
</p>
</div>
<div style="background-color: #7844e8; color: #ffffff">
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
</div>
<div style="background-color: #5b2eb0; color: #ffffff">
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</div>
</body>
</html>
![업로드중..]()
- 크기
→ 이미지의 너비와 높이를 지정하는 CSS는 너비는 width, 높이는 height라는 속성을 사용
→ px을 사용하면 크기가 정해진 값에 맞춰 고정되어서 웹 브라우저의 크기가 바뀔 때마다
화면에 맞춰 변하지 못한다.
→ px 대신에 %를 사용하면 웹 브라우저 영역 안에서 퍼센트만큼 채워준다.
→ width를 100%로 정해주고, height 값을 지우면 width 값에 맞추어 height를 자동으로 지정
→ 배경색이 정해져 있는 div 태그에 너비를 지정하게 되면 배경색이 있는 범위가 줄어듬
배경색은 그대로 두고, 안에 있는 content에만 너비를 적용하려면 div 태그를 추가
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Weekly Codeit</title>
</head>
<body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif">
<div style="background-color: #7542E0; text-align: center;">
<h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
<div>
<div style="width: 560px;">
<img src="thumbnail-unix.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
</div>
</div>
<div style="background-color: #fbfbff;">
<div style="width: 560px;">
<img src="thumbnail-machine-learning.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
</div>
</div>
<div>
<div style="width: 560px;">
<img src="thumbnail-emmet.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
</div>
</div>
<div style="background-color: #fbfbff; text-align: center;">
<div style="width: 560px;">
<h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
<p style="background-color: #f6f1ff; color: #7844e8;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.
빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
</div>
</div>
<div style="background-color: #46415a; color: #ffffff; text-align: center;">
<p>Weekly <span style="font-weight: 700;">Codeit</span></p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>
![업로드중..]()
- 여백
→ padding 이라는 CSS 속성을 사용하여 태그 안쪽에 여백을 줄 수 있다.
→ 태그의 바깥쪽에 여백을 주고 싶다면 margin이라는 속성을 사용하면 여백을 줄 수 있다.
→ margin의 특별한 기능은 바깥 여백 중에서 가로 여백을 자동으로 채울 수 있다.
웹 브라우저의 크기가 커지면 오른쪽에 빈 공간이 생겨 아쉽다.
margin: 0 auto; 라고 작성하면 세로는 0 가로는 자동으로 채우라는 의미
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>Weekly Codeit</title>
</head>
<body style="color: #737373; font-family: poppins, Noto Sans KR, sans-serif; margin: 0;">
<div style="background-color: #7542E0; text-align: center; padding: 20px;">
<h1 style="color: #ffffff; font-weight: 300;">Weekly <span style="font-weight: 700">Codeit</span></h1>
<p style="color: #ffffff;">금요일에 만나는 코딩 한 스푼</p>
</div>
<div style="padding: 40px 20px;">
<div style="width: 560px; margin: 0 auto;">
<img src="thumbnail-unix.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">생산성을 높여줄 유닉스 커맨드 꿀팁</h2>
<p>생각만하면 모든게 이루어진다! 꿈 같은 이야기죠? 하지만 유닉스 커맨드를 사용하면 더 이상 꿈이 아니랍니다. 마우스 대신에 유닉스 명령어들을 사용하면 복잡한 일도 한 번에 뚝딱하거든요.
유닉스 커맨드를 사용할 때 알아두면 좋은, 작업 효율성을 UP! UP! 시켜주는 꿀팁 몇 가지를 준비해봤으니까, 한 번 살펴보세요!</p>
<a href="https://blog.codeit.kr/post/6052b25f701df852a9157516">자세히 보기</a>
</div>
</div>
<div style="background-color: #fbfbff; padding: 40px 20px;">
<div style="width: 560px; margin: 0 auto;">
<img src="thumbnail-machine-learning.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">머신 러닝을 통한 추천 시스템 (내용 기반, 협업 필터링)</h2>
<p>넷플릭스나 애플 뮤직은 어떻게 영화나 음악을 추천해주는 걸까요? 일단 추천 시스템이란 유저에게 유저가 좋아하거나 구매할 만한 상품을 추천해 주는 프로그램을 의미합니다.
내가 평소에 쓰는 서비스들은 이미 추천 서비스를 사용하고 있을지도 모릅니다. (놀랍죠?) 유저 별로 아마존이나 쿠팡에서 물건들을, 넷플릭스에서 영화들을, 애플 뮤직에서 노래를 보여주는 것. 모두 추천 시스템을 사용해서 첫 화면에 보여주기 때문이죠.
</p>
<a href="https://blog.codeit.kr/post/6054359298b173400407da01">자세히 보기</a>
</div>
</div>
<div style="padding: 40px 20px;">
<div style="width: 560px; margin: 0 auto;">
<img src="thumbnail-emmet.png" alt="" style="width: 100%;">
<h2 style="color: 2e2e2e; font-size:20px;">Tips & Tricks: HTML 코드 편하게 입력하는 법</h2>
<p>HTML 파일을 작성하려면 DOCTYPE, html, head, body ... 적어야 할 것이 참 많습니다. 이럴때 유용하게 쓸 수 있는 기능이 있는데요. VS Code에서는 !(느낌표)를 입력하고 Tab 키나 Enter 키를 누르면 HTML 코드를 한번에 입력할 수 있답니다!
이건 Emmet 이라고 부르는 문법의 일부인데요. Emmet은 개미라는 뜻이랍니다. 개미는 자기 몸집의 50배나 넘는 물건을 옮길 수 있다는데요. 개미처럼 Emmet의 문법도 짧은 단어만 입력하면 긴 HTML 코드를 뚝딱 만들어 낼 수 있으니까, 한 번 살펴보시는 것도 좋을 거 같네요.
</p>
</div>
</div>
<div style="background-color: #fbfbff; text-align: center; padding: 40px 20px;">
<div style="width: 560px; margin: 0 auto;">
<h2 style="color: 2e2e2e; font-size:20px;">코둥이 퀴즈</h2>
<p style="background-color: #f6f1ff; color: #7844e8; padding: 16px; margin: 32px;">머신 러닝에서 유저에게 유저가 좋아하거나<br>구매할만할 상품을 추천해 주는 프로그램을<br>□□ □□□ (이)라고 부른다.</p>
<p>빈 칸에 들어갈 다섯 글자를 답장으로 보내주세요.<br>선착순 200분께 코드잇 시그니쳐 굿즈를 보내드려요.</p>
</div>
</div>
<div style="background-color: #46415a; color: #ffffff; text-align: center; padding: 40px 20px;">
<p>Weekly <span style="font-weight: 700;">Codeit</span></p>
<p>(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층</p>
<p>Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청하기</p>
<p>뉴스레터가 보이지 않는다면, weekly@codeit.kr을 메일 주소록에 추가해주세요.</p>
<p>수신 거부 Unsubscribe</p>
</div>
</body>
</html>
- 구독 페이지 : 크기와 여백
→ "배움의 기쁨을 세상 모두에게. / 많은 코둥이들이 구독하고 있어요!" 부분에
적용할 너비와 여백 값과 예시 이미지를 참고해서, "후기가 있는 <p> 태그"와
"너비를 넣을 <div> 태그"에 CSS 코드를 추가
<div style="background-color: #f6f6fb">
<div>
<h2 style="font-size: 24px; font-weight: 300">
배움의 기쁨을 세상 모두에게.<br>
<span style="font-size: 32px; font-weight: 700">
많은 코둥이들이 구독하고 있어요!
</span>
</h2>
...
</div>
</div>
적용할 크기와 여백
- 후기가 있는 p 태그
안쪽 여백: 24px
바깥 여백: 세로 32px, 가로 0
- 너비를 넣을 <div> 태그
너비: 640px
안쪽 여백: 세로 120px, 가로 30px
바깥 여백: 세로 0, 가로 자동 (알아서 여백 만들어 주기)
<!DOCTYPE html>
<html>
<head>
<title>Weekly Codeit 구독하기</title>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Poppins&display=swap" rel="stylesheet">
</head>
<body style="font-family: Poppins, 'Noto Sans Korean', sans-serif; text-align: center">
<div style="background-color: #703fda; color: #ffffff">
<h1>Weekly Codeit</h1>
<p>
금요일에 만나는<br>
코딩 한 스푼
</p>
</div>
<div>
<h2 style="font-size: 24px; font-weight: 300">
코드잇이 엄선한<br>
<span style="font-size: 32px; font-weight: 700">프로그래밍 꿀팁</span>
</h2>
<img src="banner-programming.png">
<p>
컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ...<br>
인기 코드잇 강의를 뉴스레터로 만나보세요.
</p>
<p>
유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
</p>
<p>
<a href="https://codeit.kr/catalog" style="color: #7844e8">
수업 살펴보기
</a>
</p>
</div>
<div style="background-color: #f6f6fb">
<div style="width: 640px; padding: 120px 30px; margin: 0 auto;">
<h2 style="font-size: 24px; font-weight: 300">
배움의 기쁨을 세상 모두에게.<br>
<span style="font-size: 32px; font-weight: 700">
많은 코둥이들이 구독하고 있어요!
</span>
</h2>
<img src="banner-students.png">
<p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
<span style="color: #b8b7ba">iloveprincess 님</span><br>
안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
매주 금요일이 기다려지네요 :)
</p>
<p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
<span style="color: #b8b7ba">코드냠냠 님</span><br>
뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요!
항상 감사드립니다.
</p>
<p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0;">
<span style="color: #b8b7ba">냐리 님</span><br>
덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯.
초보 코둥이들에게 추천해요.
</p>
<p>
<a href="https://codeit.kr/community" style="color: #7844e8">
후기 더 보기
</a>
</p>
</div>
</div>
<div style="background-color: #7844e8; color: #ffffff">
<h2>
코딩이 즐거워지는 뉴스레터,<br>
Weekly Codeit
</h2>
</div>
<div style="background-color: #5b2eb0; color: #ffffff">
<div style="text-align: left">
<p>
Weekly Codeit
</p>
<p>
Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe<br>
최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요
</p>
<p>
(주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
</p>
</div>
</div>
</body>
</html>
![업로드중..]()
- Codechella Music Festival
→ 코드잇 마케팅팀 박유림 씨는 2025년 3월 1일 갑작스러운 이메일을 하나 받았습니다.
→ 코드잇에서는 2025년 5월 헌대카드 울트라콘서트와 함께 Codechella Music Festival을
개최하기로 했는데요.
→ 2개월밖에 남지 않은 시점에 미완성인 포스터 HTML 파일을 전달 받았습니다.
→ 파일을 열어보니 글꼴이랑 글꼴 크기 같은 건 적용되어 있는데요.
디자인 시안과 약간씩 다른 부분이 있네요.
→ 지금까지 배운 CSS 속성들을 활용해서 유림씨를 도와줍시다.
→ 아래의 디자인 시안, 수정할 페이지, 그리고 수정할 부분을 참고해서 CSS 코드를 추가해주세요!
이번 실습은 여태까지 배운 CSS를 모두 활용하기 때문에 어떤 건 잘 기억나지 않을 수 있는데요,
자주 쓰다 보면 자연스럽게 외워질 테니까 너무 걱정하지 않아도 됩니다.
힌트를 활용하거나 앞에서 들었던 레슨을 다시 확인하면서 하나씩 적용해 보세요.
![업로드중..]()
수정할 부분
- 배경색이 안 맞음
<body> 태그에 배경색으로 #fcf1fe 넣기
- 본문 <div> 영역(header.png 아랫부분)의 너비랑 바깥 여백이 안 맞음
너비 560px
세로 바깥 여백 24px
가로 바깥 여백 자동(알아서 채워 넣기)
- 두 번째 본문(Saturday May 17 ... 부분) 정렬이 안 맞음
<div> 태그에 오른쪽 정렬 추가하기
- “Returning to the Desert / Swedish House Mafia” 부분에 글자 크기, 굵기 안 맞음
“Returning to the Desert” 크기 16px, 굵기 300
“Swedish House Mafia” 크기 24px
- 푸터(맨 아랫부분)에 글자색이 안 맞음
<div> 태그에 글자색으로 #ffffff 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Codechella Festival</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
</head>
<body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700; margin: 0; background-color: #fcf1fe;">
<div style="padding: 56px;">
<div style="width: 640px; margin: 56px auto">
<img src="header.png">
</div>
<div>
<div style="width: 560px; margin: 24px auto">
<h2 style="font-size: 20px; margin: 8px 0">FRIDAY MAY 16 & 23</h2>
<p style="margin: 8px 0">
<span style="font-size: 40px; margin: 8px 0">Harry Styles</span><br>
<span>
Lil Baby • Daniel Caesar • Phoebe • Bridgers • Big Sean • Grupo •
Firme • Louis the Child • Baby Keem • Still Woozy. • King Gizzard •
Snoh Aalegra • City Girls • Madeon • NIKI • Lane 8 • Pink Sweat$ •
Omar Apollo • Black Coffee • IDLES • Peggy Gou • EPIK HIGH •
the Marias • Carly Rae Jepsen • Spiritualized • Daphni • the Martinez Brothers •
Bishop Briggs • MIKA • slowthai Cordae • BADBADNOTGOOD •
</span>
<span style="font-size: 12px">
the Avalanches • Role Model • ARTBAT • Damian Lazarus • TOKiMONSTA •
Princess Nokia • PUP • the Regrettes • Raveena • Purple Disco Machine •
Arooj Aftab • Amyl and the Sniffers • Dom Dolla • Logic1000 • the Chats •
the Hu • John Summit • Jean Dawson • Code Orange • Ela Minus • Jayda G •
Lost Kings • Lawrence • GG Magree • Giselle Woo & the Night • Owls •
SOHMI MEUTE • DJ Lord • Dear Humans
</span>
</p>
</div>
<div style="margin: 24px 0; text-align:right;">
<h2 style="font-size: 20px; margin: 8px 0">SATURDAY MAY 17 & 24</h2>
<p style="margin: 8px 0">
<span style="font-size: 40px; margin: 8px 0">Billie Eilish</span><br>
<span>
Flume • Megan Thee Stallion • Disclosure • 21 Savage • Danny Elfman •
Stromae Giveon • Anitta • BROCKHAMPTON • Rich Brian • girl in red •
Wallows • Isaiah Rashad • Caribou • Cuco • Conan Gray •
</span>
<span style="font-size: 12px">
Koffee • Tchami • Dixon Caroline Polachek • Turnstile • 100 gecs •
Freddie Gibbs & Madlib Pabllo Vittar • Hot Chip • DJ Koze •
Floating Points • Steve Lacy • Arlo Parks •
Rina Sawayama • Japanese Breakfast • Masego • Chelsea Cutler •
Nicki Nicole • Richie Hawtin • Beach Bunny • Amber Mark • Ed Maverick •
Current Joys • black midi • Chris Liebing • Kyary Pamyu Pamyu •
Inner Wave • ANNA • Holly Humberstone • Niliifer Yanya • L'Imperatrice •
Emo Nite • Alaina Castillo • Paco Osuna • Beach Goons • VINSSA • Mannequin
Pussy • Sama' Abdulhadi • Whipped Cream • DJ Holographic • Yard
Act • ayla Benitez • Miane
</span>
</p>
</div>
<div style="margin: 24px 0">
<h2 style="font-size: 20px; margin: 8px 0">SUNDAY MAY 18</h2>
<p style="margin: 8px 0">
<span style="font-size: 40px; margin: 8px 0">Ye</span><br>
<span>
X24 • Doja Cat • Joji • Jamie XX • Run the Jewels • Karol G •
Maggie Rogers • FAri Lennox • Banda MS • Fatboy Slim • Maneskin •
J.I.D • SLANDER • Solomun • Jessie Reyez • Denzel Curry • FINNEAS •
Vince Staples •
</span>
<span style="font-size: 12px">
Dave • Fred again.. • Duck Sauce • Chicano Batman • Duke Dumont •
Kim Petras • Orville Peck • Natanael Cano • beabadoobee • Belly •
the Bleised Madonna + Honey Dijon • Alec Benjamin • Ali Gatie •
Surf Curse • Griselda • Michael Bibi • Nathy Peluso • Maxo Kream •
Bedouin • Emotional Oranges • Channel Tres • Yola • Hayden James •
Molchat Doma • Crumb • Olivia O'Brien • Eyedress • Sampa the Great •
Satori • Viagra Boys • Adam Port • Altin Gun • Skegss • Luttrell •
Mariah the Scientist • AMEME • Carino • Cole Knight
</span>
</p>
</div>
<div style="text-align: center; margin: 24px 0">
<h2 style="margin: 8px 0; font-size: 16px; font-weight: 300;">Returning to the Desert</h2>
<p style="margin: 0; font-size: 24px;">Swedish House Mafia</p>
</div>
</div>
</div>
<img src="palm_tree_background.png" style="display: block; width: 100%">
<div style="background-color: #272928; padding: 32px; color: #ffffff;">
<div style="text-align: center; width: 560px; margin: 0 auto">
<div style="margin: 24px 0">
<h2 style="font-size: 16px; font-weight: 300; margin: 8px 0">Featuring</h2>
<p style="font-size: 24px; margin: 8px 0">88rising's HEAD IN THE CLOUDS FOREVER</p>
</div>
<div style="margin: 24px 0;">
<h2 style="font-size: 16px; font-weight: 300; margin: 0">Large-scale art installations by</h2>
<p style="font-size: 14px; margin: 0">
Architensions • Cristopher Cichocki • Kiki Van Eijk • Los Dos •
Estudio Normal • Oana Stanescu • NEWSUBSTANCE • Do LaB • Robert Bose
</p>
</div>
</div>
</div>
</body>
</html>
→ 배경색이 안 맞음
background-color라는 CSS 속성으로 적용
<body> 태그의 style 속성에 background-color: #fcf1fe를 추가
<body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700;
margin: 0; background-color: #fcf1fe">
...
</body>
→ 본문 영역 <div>의 너비랑 여백이 안 맞음
header.png 이미지 아래에 있는 <div> 태그에 width: 560px; margin: 24px auto를 추가
<body style="font-family: Poppins, sans-serif; font-size: 16px; font-weight: 700; margin: 0; background-color: #fcf1fe">
<div style="padding: 56px">
<div style="width: 640px; margin: 56px auto">
<img src="header.png">
</div>
<div style="width: 560px; margin: 24px auto">
...
</div>
</body>
→ 두 번째 본문(Saturday May 17 ... 부분) 정렬이 안 맞음
<div style="margin: 24px 0; text-align: right">
<h2 style="font-size: 20px; margin: 8px 0">SATURDAY MAY 17 & 24</h2>
<p style="margin: 8px 0">
...
</p>
</div>
→ “Returning to the Desert / Swedish House Mafia” 부분에 글자 크기, 굵기 안 맞음
<div style="text-align: center; margin: 24px 0">
<h2 style="margin: 8px 0; font-size: 16px; font-weight: 300">Returning to the Desert</h2>
<p style="margin: 0; font-size: 24px">Swedish House Mafia</p>
</div>
→ 푸터(맨 아랫부분)에 글자색이 안 맞음
<div style="background-color: #272928; padding: 32px; color: #ffffff">
<div style="text-align: center; width: 560px; margin: 0 auto">
<div style="margin: 24px 0">
<h2 style="font-size: 16px; font-weight: 300; margin: 8px 0">Featuring</h2>
<p style="font-size: 24px; margin: 8px 0">88rising's HEAD IN THE CLOUDS FOREVER</p>
</div>
<div style="margin: 24px 0">
<h2 style="font-size: 16px; font-weight: 300; margin: 0">Large-scale art installations by</h2>
<p style="font-size: 14px; margin: 0">
Architensions • Cristopher Cichocki • Kiki Van Eijk • Los Dos •
Estudio Normal • Oana Stanescu • NEWSUBSTANCE • Do LaB • Robert Bose
</p>
</div>
</div>
</div>
- CSS 문법 정리
style 속성
→ 태그에 CSS를 적용하려면 style 속성을 사용
<div style="...">
...
</div>
CSS 속성과 CSS 속성 값
→ CSS 코드를 추가할 때는 CSS 속성: CSS 속성값 형태로 적습니다.
<div style="color: #272928">
...
</div>
여러 개의 CSS 속성 사용하기
→ 여러 개의 CSS 속성을 사용할 때는 세미콜론(;)으로 구분합니다.
<div style="color: #272928; background-color: #eeeeee">
...
</div>
CSS 기본 단위
(1) 색 이름
→ red, green, yellow처럼 색상을 이름으로 사용하는 방식
→ 다양한 색을 표현하는데 한계가 있기 때문에 거의 사용하지 않습니다.
(2) 색상 코드
→ 색상을 HEX(16진수)로 표현한 값
→ 구글 검색에서 'Color Picker' 같은 걸 검색해서 색상 코드를 확인해 볼 수 있다.
→ 주로 이미지 편집 프로그램 같은 데서 디자인을 하면서 색상 코드를 정하게 됩니다.
(3) 픽셀(px)
→ 화면에서 그려지는 가장 작은 정사각형
CSS 속성
(1) 배경색
background-color: #272928
(2) 글자색
color: #ffffff
(3) 글꼴
→ 글꼴 이름이 띄어쓰기가 있는 경우엔 따옴표로 감싸 줍니다.
→ sans-serif나 serif를 사용하면 산 세리프나 세리프 타입의 글꼴은 웹 브라우저가 알아서 적용
font-family: Poppins, 'Noto Sans KR', sans-serif
(4) 글자 크기
font-size: 16px
(5) 글자 굵기
font-weight: 400
(6) 너비
width: 560px
(7) 높이
height: 380px
(8) 안쪽 여백
세로, 가로 10px 예시
padding: 10px
세로 10px, 가로 20px 예시
padding: 10px 20px
(9) 바깥 여백
세로, 가로 10px 예시
margin: 10px
세로 10px, 가로 20px 예시
margin: 10px 20px
세로 10px, 가로 자동(알아서 채워 넣기) 예시
margin: 10px auto
※ auto는 바깥 여백(margin)의 가로에서만 동작
