영국 척척석사 유학생 일기장👩🏻‍🎓

(CSS코딩일기) 이미지와 본문 크기, 여백 조절하기 본문

코딩공부/HTML&CSS

(CSS코딩일기) 이미지와 본문 크기, 여백 조절하기

life-of-nomad 2023. 2. 20. 06:40
728x90
반응형
저번 시간에는 글 정렬하는 방법을 알아보았습니다.
이번 시간에는 이미지와 본문의 크기, 여백을조절하는 방법을 알아보겠습니다.

1. 이미지와 본문 크기 조절하기

이미지의 너비를 조절하는 CSS 속성은 width, 높이를 조절하는 속성은 height 입니다. 따라서 이미지의 크기를 너비 700px, 높이 375px 조절하는 코드는 <img src="thumbnail-unix.png" style="width: 700px; height: 375px"> 입니다. 하지만 이미지의 크기를 정해버리면 화면의 크기에 따라 이미지가 꽉 차지 않을 수 있습니다. 따라서 화면의 크기에 따라 이미지가 꽉 차게 하려면 너비에 700px 대신 100%, 높이 값을 지워주면 비율을 유지하면서 이미지가 화면에 따라 커지고 작아지는 것을 볼 수 있습니다. 본문 크기를 조절하는 방법도 영역 태그인 <div> 태그에 픽셀 값을 넣어주면 됩니다.

 

2. 여백 조절하기

글자끼리 서로 붙어있어서 답답한 경우가 있습니다. 이럴 때는 여백을 조절해주면 됩니다. 여백을 조절하는 CSS 속성은 padding 입니다. 따라서 <div style="padding: 20px">로 입력하면 글자 사이의 여백이 20px이 됩니다. 또한 가로, 세로 영역의 크기를 따로 조절하고 싶으면 <div style="padding: 40px 20px> 로 입력하면 차례로 세로는 40px, 가로는 20px로 조절할 수 있습니다. 또한, 상자가 있는 영역에서 상자 바깥의 여백을 조절하는 속성은 margin 입니다. 따라서 <div style="padding: 16px; margin: 32px"> 이라고 입력하면 상자 바깥으로 32px로 늘어난 것을 알 수 있습니다. body태그에도 마찬가지로 적용할 수 있습니다. 만약, 가로의 여백을 자동으로 조절하고 싶으면 <div style="margin: 0 auto">라고 입력하면 세로의 바깥여백은 0, 가로는 자동으로 채워집니다. 

 

예를 들어, 후기가 있는 <p> 태그 (안쪽여백:24px, 바깥여백:세로32px, 가로0), 너비를 넣을 <dib>태그 (너비:640px, 안쪽여백: 세로120px, 가로30px, 바깥여백:세로0, 가로 자동) 으로 넣는 코드는 아래와 같습니다.

1  <!DOCTYPE html>
2  <html>
3    <head> 
4      <title>Weekly Codeit</title>
5      <meta charset="utf-8">
6    </head>
7    <body>
8    <div style="background-color: #703fda">
9        <h1>Weekly Codeit</h1>
10         금요일에 만나는 코딩 한 스푼
11   </div>
12   <div>
13        <h2 style="font-size: 24px; font-weight: 300">코드잇이 엄선한 <br>
14          <span style="font-size: 32px; font-weight: 700"> 프로그래밍 꿀팁</span>
15        </h2>
16         <img src="banner-programming.png">
17        <p>
18         컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
19        </p>          
20        <p>
21         유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
22       </p>
23       <a href="https://codeit.kr/catalog" style="color: #7844e8">
24         수업 살펴보기
25       </a>
26  <div style="background-color: #f6f6fb; text-align: center">
27    <div style="width: 640px; padding: 120px 30px; margin: 0 auto">
28       <h2 style="font-size: 24px; font-weight: 300">배움의 기쁨을 세상 모두에게.<br>
29      <span style="font-size: 32px; font-weight: 700">많은 코둥이들이 구독하고 있어요!</span>
30      </h2>
31       <img src="banner-students.png">
32       <p style="background-color: #ffffff; text-align: left; padding: 24px; margin: 32px 0">
33         iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
 매주 금요일이 기다려지네요 :)
34       </p>
35      <p style="background-color: #ffffff; text-align: left;  padding: 24px; margin: 32px 0">
36        코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
37      </p>
38      <p style="background-color: #ffffff; text-align: left;  padding: 24px; margin: 32px 0">      
39        냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
40       </p>
41       <a href="https://codeit.kr/reviews" style="color: #7844e8">
42     후기 더 보기
43       </a>
44    </div>
45     <h2>코딩이 즐거워지는 뉴스레터, <br>Weekly Codeit</h2>
46  </div>
47  <div style="background-color: #5b2eb0">
48     <p>          
49        Weekly Codeit
50     </p>
51     <p> 
52          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요.
53     </p>
54     <p>       
55        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
56     </p>   
57   </div>
58   </body>
59  </html>

 

위의 코드를 작성하면 나오는 화면은 아래와 같습니다.

이상으로 여백을 조절하는 방법에 대해 알아보았습니다.

728x90
반응형
저작자표시

'코딩공부 > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) CSS 기본 개념 정리  (0) 2023.02.27
(CSS코딩일기) 글자색 한번에 바꾸기, 클래스로 글자크기 조절하기, 파일 따로 저장하기  (0) 2023.02.24
(CSS코딩일기) 글 정렬하기  (0) 2023.02.20
(CSS코딩일기) 글자 크기와 굵기 변경하기  (0) 2023.02.18
(CSS코딩일기) 글꼴 변경하기, 구글 폰트  (1) 2023.02.18
'코딩공부/HTML&CSS' Related Articles more