EnJinnier
[CSS] 뉴스레터페이지 만들기-3 (색상, 글꼴, 여백 설정) 본문
2. CSS 코드 작성하기
2.1 색상 정하기
색상을 설정할때는 기본적인 색 이름(잘 사용x)을 작성하기도 하고
(CSS 이름 목록: https://www.w3.org/wiki/CSS/Properties/color/keywords)
구글에서 'Color Picker'라고 검색해 색상 선택 도구를 사용해 색상코드(#000000)를 통해 지정하기도 한다.
2.1.1 배경색 넣기
사전에 나눠놨던 영역 <div>태그에서 속성을 추가해주면 된다.
<div style="Css 속성이름: Css 속성값">
<div style="background-color: purple">
<div style="background-color: #7542e0">
2.1.2 글자색 넣기
색상을 넣고 싶은 글자태그에 속성을 추가해주면 된다.
<h1 style="color: #ffffff">
만약 페이지 전체의 글자색을 한번에 바꾸고 싶으면 페이지 전체를 감싸는 태그에 글자색 속성을 넣으면 됨.
예를 들어, <body>태그 안에 style="color: #737373" 등의 코드를 넣어주면 됨
만약 속성을 추가하려는 태그에 이미 다른 속성 코드가 들어있다면 세미콜론(;)을 넣은 후 속성값을 넣어주면 된다.
예)
<p style="background-color: #f6f1ff; color: #784438">
2.2 글꼴 설정
2.2.1 폰트 설정
<div style="font-family: 글꼴이름 "> 을 설정해주면 된다.
<body style="font-family: sans-serif">
여기서 sans-serif는 기본 글꼴 유형 중 하나로 이걸로 설정하면 웹 브라우저가 내 컴퓨터에 있는 기본
sans-serif(뾰족한 부분이 없는 글꼴 유형, 돋움 등) 중 하나로 폰트를 설정한다.
serif는 뾰족한 글꼴 유형으로 대표적으로 명조나 궁서체가 있다.
원하는 특정 글꼴이름을 적어 설정해도 된다.
여러가지 글꼴을 나열하여 설정하면 가장 앞에 있는 것부터 우선순위로 적용시키고 없으면 그다음 글꼴을 적용한다.
<div style="font-family: Arail, AppleGothic, 돋움, sans-serif">
만약, 꼭 내가 원하는 글꼴파일을 설정하고 싶다면 글꼴파일을 직접 인터넷으로 제공해줄 수 있다.
이를 웹폰트라고 하며, 사이트에 접속하면 글꼴을 자동으로 다운받아서 보여주는 방식이다.
대표적으로 Google Fonts 웹 폰트 사이트로 웹폰트 방식을 적용할 수 있다.
https://fonts.google.com/?subset=korean¬o.script=Kore
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
해당 웹사이트에 들어가 원하는 폰트를 찾아 select한 후, <link>부분을 복사하여 html파일의 <head>태그 안에 넣는다.
(link태그는 head안에 작성하는 것으로 외부데이터를 가져오는 태그이다.)
이제 링크태그를 넣었다면 아까의 방법과 같이
폰트 이름을 속성값으로 넣어주면 된다. (따옴표가 있는 경우 글자사이에 띄어쓰기가 있어서 그런것이므로 크게 신경쓰지 않아도 된다)
2.2.2 글자 크기 설정
코드에서 크기의 단위는 px라고 쓰고 픽셀이라고 읽는다.
글자 크기도 픽셀로 설정하며,
이는 font-size라는 CSS속성을 추가하여 설정해주면 된다.
<h1 style="font-size: 20px">
2.2.3 글자 굵기 설정
글자 굵기는 100단위로 쓰는데 100에서부터 900까지 숫자가 클수록 굵다.
<h1 style="font-weight: 300">
2.3 글 정렬하기
기본적으로 웹페이지를 만들면 좌측 정렬이 되어있으며, 이를 중앙이나 우측 정렬로 바꿀 수 있다.
<h1 style="text-align: left">
<h1 style="text-align: center">
<h1 style="text-align: right">
2.4 크기와 여백 설정
2.4.1 크기 설정
웹페이지가 이미지와 본문이 크기가 안맞으면 웹페이지 사이즈를 잘못 조절하면 이상하게 보일 수 있다.
따라서 이미지와 본문의 크기를 적절히 조절해야 한다.
이미지의 너비와 높이를 조정하자.
특정 크기로 조정하기
<img src="이미지 이름" style="width: 700px; height: 375px">
웹브라우저에 따라 비율로 조정하기
<img src="이미지 이름" style="width: 100%">
이번엔 본문의 너비와 높이를 조정하자.
만약 배경색을 지정하고 있는 div태그에 width를 지정하면 배경색도 같이 줄어들게 되므로
그 안에 새로운 div 태그를 하나 더 추가해 배경색은 그대로 두고 안에 있는 것에만 너비를 적용할 수 있다.
2.4.2 여백 설정
글자 간격이 답답할때 padding이라는 속성값을 사용해 영역 안쪽에 여백을 넣어줄 수 있다.
<div style="padding: 20px">
이때 두가지 픽셀값을 나열할 수 있다.
<div style="padding: 40px 20px">
이는 순서대로 세로여백, 가로여백으로 적용되며 이렇게 따로따로 여백값을 다르게 설정해줄 수 있다.
만약 바깥여백을 바꾸고 싶다면 margin이라는 속성값을 사용하면 된다.
(body태그에는 기본적으로 margin이 설정되어 있어서 없애고 싶으면 body태그에서 margin을 0으로 설정해주면 된다.
추가로, 웹 브라우저가 자동적으로 여백을 조절하게 하고 싶으면 auto로 설정해주면 된다.
<div style-"margin: 0 auto"> (단, 너비 조절 코드를 넣었던 태그에 함께 넣어주어야 한다.)
이제 내가 만든 웹사이트를 최종적으로 확인해보자.
https://jin-studyingweb.netlify.app
https://jin-studyingweb.netlify.app
jin-studyingweb.netlify.app
주소와 미리보기는 도메인 설정 코드를 작성하여 바꿔줄 수 있지만 당장은 필요하지 않으니
다음에 관련 내용을 자세히 공부하는 것으로 하며 뉴스레터 페이지는 여기서 마무리
'웹 개발 > CSS' 카테고리의 다른 글
| [CSS] Flexbox Froggy : Css Flexbox 학습 게임 (0) | 2024.03.27 |
|---|---|
| [CSS] 배경이미지 설정 및 그라디언트(그라데이션) 넣기 (0) | 2024.03.26 |
| [CSS] 크기단위 (0) | 2024.03.25 |
| [CSS] 색상 표현법 4가지 (0) | 2024.03.25 |
| [CSS] CSS 관련 지식 - 1 (기본 개념) (0) | 2024.02.13 |
