개발 공부 기록하기

Section 6. CSS 기초(2) 본문

프밍/CSS

Section 6. CSS 기초(2)

태영(泰伶) 2022. 12. 12. 22:50

06. 색상 시스템: RGB와 알려진 색상

색상은 배경 색, 테두리, 그림자 등등 많은 곳에 쓰이는 속성이기 때문에, 굉장히 자주 등장한다.

 

알려진 색상 이름으로 작성하는 방법

시중의 모든 브라우저는 색상 이름 143가지를 인식한다.

https://htmlcolorcodes.com/color-names/

 

Color Names — HTML Color Codes

HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values.

htmlcolorcodes.com

위의 링크에 알려진 색상 이름이 나열되어 있다.

(140가지라고 적혀 있는데, 실제로 세어 보니까 143개더라...)

 

하지만 이것만으론 한계가 있다. 요즘 모니터는 대부분 1,600만 가지 이상의 색상을 표시하기 때문이다.

 

그래서 이 수많은 색을 표현하기 위한

첫 번째 방법으로, RGB. 즉, Red Green Blue 시스템이 있다.

빛의 여러 색을 섞어 표현하는 *가산 혼합 시스템 중 하나이다.

* 가산 혼합(加算 混合, additive color mixture): 빛을 더해 색을 혼합할 때, 혼합한 색이 원래의 색보다 밝아지는 혼합

 

브라우저의 색상이 제각기 달라보이는 것은,

이렇게 빨강, 녹색, 파랑이 0~255의 숫자 범위 내에서 얼마큼 섞여있는지가 다 다르기 때문이다.

(0은 포함되어 있지 않음을, 255는 최대치로 포함되었음을 의미한다.)

 

숫자만으로 의도하는 색을 만들어 내기 어렵기 때문에, 온라인 색 선택기나 컬러 팔레트의 도움을 받아야 하는 단점이 있다.

 

 

 

 

 

07. 색상 시스템: 16진법

RGB와 동일하게 빨강, 녹색, 파랑을 기반으로 하지만, 각각의 색이 섞인 정도를 16진법으로 표시하는 방법이다.

영어로는 hexadecimal color code(=hex color code)라고 부른다.

 

16진법은 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F의 16개 글자로 그 수준을 표현하는 방법이다.

일상적으로 사용하는 십진법이 아닌 더 복잡하게 16진법을 사용하는 데에는

더 짜임새 있는 색상명과 색상 차트를 만들기 위함에 그 이유가 있다.

이를 통해 지구상의 모든 색상은 아니더라도 표기할 수 있는 모든 색상에 숫자를 부여한다.

한 자릿수에 더 많은 정보를 사용하기 위해서이기도 하다.

 

스타일 적용에 16진법으로 표현되는 이 색상 표기 방식을 쓰려면,

#000000;

위와 같이 #(샵 기호)를 앞에 붙여서 써줘야 한다.

여섯 자리의 기호 중 첫 번째 두 글자는 red, 그 다음 두 글자는 green, 마지막 두 글자는 blue를 나타낸다.

 

여기서 red, green, blue를 나타내는 두 글자가 각각 동일하다면 세 글자로 축약해서 적을 수도 있다.

(물론 대부분의 색상이 동일한 숫자로 이루어져있지 않기 때문에 활용도는 좀 떨어진다.)

     ex,    #ffccaa     =    #fca

 

cf, HSL이라는 색상 표기 방식도 있지만, RGB나 16진법만큼 자주 쓰이지는 않으니 설명은 생략^^

 

 

 

 

 

08. Quiz 1: Color Quiz

문제 1. 다음 rgb 코드 중 녹색을 나타내는 코드는 무엇일까? (색상 선택기를 사용하지 않고 답 고르기)

① rgb(255, 0, 255)

② rgb(0, 0, 255)

③ rgb(0, 400, 0)

④ rgb(0, 200, 0)

 

답은 ④

 

 

문제 2. 다음 16진법 색상 코드 중 rgb(255, 255, 255)와 같은 색상을 나타내는 것은?

① #FACEDF

② #000000

③ #FFFFFF

 

답은 ③

 

 

 

 

 

09. 세미콜론과 CSS

모든 속성 선언property declaration의 끝에 붙는 ;세미콜론은 특히 CSS에서는 꼭 필요한 사항이다.

세미콜론을 빠뜨린다고 해서 경고 창이 뜨지는 않지만, 빠뜨린 다음의 속성 선언이 무시될 수 있다.

그러니까, 세미콜론으로 각각 지정하려는 스타일을 구분지어야 한다.

button {
   color: teal
   background-color: greenyellow;
}

↓

 

color 속성의 세미콜론이 빠졌다는 이유로 스타일 적용에 문제가 생겼음을 확인할 수 있다.

 

똑같은 코드에 세미콜론만 더하면

button {
   color: teal;
   background-color: greenyellow;
}

↓

위와 같이 스타일 적용이 제대로 된다는 것을 알 수 있다.

그만큼 세미콜론이 중요한 역할을 한다!  

 

 

 

 

 

10. 일반 텍스트 속성

text-align

텍스트를 가로 정렬하는 속성이다. (왼쪽 정렬, 가운데 정렬, 오른쪽 정렬 등..)

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8" />
         <title></title>
         <style>
            h1 {
               text-align: center;
            }
         </style>
      </head>
      <body>
         <h1>밀가루</h1>
         <h2>1. 개요</h2>
         <p>밀을 빻은 가루로 빵, 과자, 국수 등의 재료가 된다.</p>
         <p>밀 낟알은 벼와 달리 껍질을 벗기기 어려운 구조라 도정기술이 발달하기 전까진 가루로 만들어야만 껍질을 분리할 수 있었다. 제분을 할 줄 몰랐던 고대인들은 낟알째 볶아서 껍질과 알맹이를 분리한 후 먹었을 것으로 추정된다.</p>
         <p>밀가루에 물을 부으면 밀가루 입자 사이의 풀 역할을 하는 단백질인 글루텐에 의해 엉기면서 밀가루 반죽이 된다.</p>
         <h2>2. 종류</h2>
         <p>밀가루는 그 안에 포함된 단백질[1]의 함량에 따라 강력분, 중력분, 박력분[2]으로 종류가 나뉜다.</p>
         <p>대략 구분을 하자면 다음과 같다.</p>
         <ul>
         <li>강력분(強力粉 / Strong flour, Bread flour): 글루텐 함량 13% 이상. 반죽이 쫄깃쫄깃한 느낌이 강한 밀가루이며, 주로 피자 도우, 제빵에 이용되며, 라면, 스파게티의 주재료로 쓰이기도 한다.</li>
         <li>중력분(中力粉 / Plain flour, All-purpose flour): 글루텐 함량 10~13% 사이. 라면, 국수(칼국수), 만두피, 수제비, 부침개의 주재료.</li>
         <li>박력분(薄力粉 / Weak flour, Cake flour): 글루텐 함량 10% 이하. 반죽이 툭툭 끊어지는 느낌이 다소 있는 밀가루로, 케이크나 제과(과자), 또는 튀김 및 부침개에 주로 이용된다.</li>
         </ul>
         <p>저 글루텐 함량 때문에 반죽을 할 때도 물의 온도와 반죽하는 시간을 지켜야 한다. 대표적으로 일본의 튀김요리에서 밀가루 반죽을 할 때는 찬 얼음물에 젓가락으로 긁듯이 섞어야 하며 휘젓는 횟수가 많아지면 튀김의 바삭함이 없어진다. 이러한 차이는 똑같은 밀가루를 가공해서 글루텐의 양을 조절하는 것은 아니고 처음부터 강력분, 중력분, 박력분용 밀 품종이 따로 있다. 밀은 낟알이 단단한 정도에 따라 굳은밀(경질밀)과 무른밀(연질밀)로 나뉘는데 무른밀은 글루텐의 양이 적어서 박력분이 나오고 굳은밀은 글루텐이 많기 때문에 강력분이 나온다. 그 중간 성질의 품종은 중력분이다.</p>
         <h2>3. 원산지</h2>
         <p>대한민국, 중국, 인도, 일본, 미얀마, 베트남 등에서 수입하는 밀은 미국, 영국, 프랑스, 독일, 캐나다, 호주 등에서 수출하는 경우가 대다수이다.</p>
         <p>세계 1위의 밀 수출국은 러시아지만, 한국에서는 러시아산 밀은 거의 수입되지 않고 미국산, 호주산, 캐나다산 밀 등이 주로 수입된다. 러시아산 밀은 대체로 유럽과 아프리카, 중동에 많이 수출한다.</p>
         <p>한국의 밀의 자급률이 5퍼센트가 채 안 되기 때문에 우리밀 밀가루는 소규모 소매점에서는 흔히 보기 힘들다. 생활협동조합(특히 곡물류 자급에 목숨거는 한살림)에서는 우리밀 밀가루를 쉽게 살 수 있다. 이런 경우는 국산 + 유기농치고는 가격이 그래도 싼 편. 대신 생협이 아닌 초록마을 등에서는 엄청 비싸다. 대형 마트에서도 우리밀로 만든 밀가루는 어렵지 않게 한두 가지 정도는 구할 수 있다.</p>
      </body>
   </html>

↓

내용 출처: 나무위키, '밀가루' 검색.

<h1>으로 작성된 맨 위 제목을 text-align: center;로 지정함으로써 제목이 가운데 정렬이 되었고,

<p>로 작성된 내용들을 text-align: right;으로 지정함으로써 모두 오른쪽 정렬이 되었다.

(하필 밀가루란 소재를 고른 이유는 음... 마침 이 포스팅을 작성하던 타이밍에 TV에서 방영하던 생로병사 프로그램의 소재가 밀가루였어서...??ㅎㅎ)

 

 

 

font-weight

폰트 굵기를 지정하는 속성이다.

normal, bold, lighter, bolder와 같은 속성값으로 적을 수도 있고,

100, 200, 300, 400... 과 같이 숫자로 그 값을 적을 수도 있다.

일반적으로 가장 흔하게 쓰이는 굵기는 400(=normal)이고, 700(=bold)정도가 되면 굵은 편이다.

(중요한 점은 모든 폰트에서 굵기 조절이 가능한 건 아니라는 점!

특정 굵기를 적용할 수 없는 폰트의 경우, 브라우저는 가장 비슷한 굵기를 대신 표현한다.)

 

위와 똑같은 내용으로

font-weight 속성만 조금 추가하게 되면

h1 {
   text-align: center;
   font-weight: normal;
}
p {
   text-align: right;
   font-weight: 100;
}

↓

<h1> 부분과 <p> 부분의 굵기가 기존보다 많이 얇아졌음을 확인할 수 있다.

 

 

 

text-decoration

텍스트에 줄을 그을 일이 있을 경우 사용하는 속성이다.

줄의 위치(underline, overline, line-through),

줄의 모양(solid, wavy, dotted, dashed .... ),

줄의 색상

줄의 굵기(2px,....)

을 모두 지정할 수 있고,

 

하이퍼링크에 자동으로 그어지는 밑줄을 지울 때에도 아래와 같은 방법으로 사용한다.

text-decoration: none;

 

 

 

line-height

줄 간격 조절하는 데 쓰이는 속성이다.

폰트 크기에 비해서 윗줄과 아랫줄의 텍스트 간격을 조정할 수 있다.

여기서 쓰이는 속성값은 normal도 있고, rem이나 em, px와 같은 절대적 숫자 단위도 있다.

(절대적 단위를 사용할 때 음수값도 가능하다)

p {
   line-height: 2;
}

↓

내용 중 일부만 캡처했다.

 

 

 

 

letter-spacing

글자 사이 간격을 조절하는 속성이다.

h1 {
   text-align: center;
   font-weight: normal;
   text-decoration: slateblue underline wavy;
   letter-spacing: 15px;
}

↓

글자 사이 간격이 넓어졌다.

 

 

 

 

 

 

11. 픽셀로 글꼴 크기 지정하기

font-size

상대적인 값
 절대적인 값
em 현재의 font-size를 의미. 일반적으로 해당 폰트의 대문자 M너비를 기준으로 함. px 디스플레이 크기나 다른 요소에 따라서 다른 크기를 지칭할 수는 있으나
그 차이는 아주 미미함.
rem 최상위 요소의 font-size를 의미. pt  
vh viewport height의 약자.
viewport 화면에 보이는 영역 높이의 1/100 		 cm  
vw viewport width의 약자.
viewport 화면에 보이는 영역 너비의 1/100 		 in  
% 부모 요소 글자 크기의 ___% mm  
등등
 등등

 

 

 

 

 

12. 글꼴 집합

font-family

브라우저에 기본적으로 탑재된 폰트에 따라서 달라지기 때문에,

font-family 속성으로 내 입맛에 맞는 폰트를 지정하는 것은 생각보다 간단치 않을 수도 있다.

(별도의 방법은 나중에 따로 학습할 예정이다.)

 

아래의 페이지에서

웹 페이지 제작자가 의도한 대로 '안전하게' 사용할 수 있는 폰트의 목록 및

Windows OS/Mac OS에서 얼마나 그 폰트를 지원하는지 확인할 수 있다.

https://www.cssfontstack.com/

 

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Join to access discussion forums and premium features of the site.

www.cssfontstack.com

아무래도 영어 강의다보니 영문 폰트 기준으로 가장 흔히 쓰이는 폰트만 나열된 것 같다..ㅎㅎ

 

font-family: futura;

와 같이 한 가지의 폰트만 지정할 수도 있지만,

만약 지정한 그 한 가지 폰트를 지원하지 않거나 웹 사이트 사용자가 그 폰트를 가지고 있지 않을 경우에

백업(또는 대체)할 수 있는 다른 폰트를 여러 개 지정할 수도 있다.

font-family: monospaced, fantasy;

위처럼 쉼표(,)로 구분하면 된다. 먼저 작성한 폰트일수록 더 우선적으로 고려한다는 의미이다.

(1순위가 없으면 2순위, 2순위가 없으면 3순위....)

 

백업 폰트로는 보통 어떤 특정 폰트를 콕! 지정하는 것보다는, 폰트 그룹의 이름으로 뭉뚱그려서 작성하는 것을 권장한다. 

monospaced, fantasy도 그러한 뭉뚱그린 그룹 이름인데 (CSS font stack 사이트 참조),

브라우저가 해당 그룹의 폰트를 표시할 때는 적당히 그 그룹 중 아무거나 골라서 보여주게 된다.

 

 

 

 

 

13. 코딩 연습 8: Hipster Logo Exercise

<!DOCTYPE html>
<html>
<head>
    <title>Hipster Logo</title>
    <link href="app.css">
</head>
<body>
    <h1>Purple Grain</h1>
</body>
</html>

위의 html 코드를 건드리지 않고,

 

① <h1>의 모든 글자 대문자화

② 글씨체는 monospace로

③ 가운데 정렬

④ 글자 굵기는 100

⑤ 글자 크기는 40px

⑥ 글자 사이 간격 20px

⑦ 물결모양 줄무늬, 색은 plum

을 만들어내는 것이 미션이다.

 

CSS 파일을 별도로 만들어서

h1 {
    text-transform: uppercase;
    font-family: monospace;
    text-align: center;
    font-weight: 100;
    font-size: 40px;
    letter-spacing: 20px;
    text-decoration: plum underline wavy;
}

로 지정했고,

 

결과는

완성^^

 

 

 

 

 

 

 

이제껏 공부하면서 제일 오래 걸렸던 단원이 아닐까 싶다.

망할 코로나...

 

잔기침은 남았지만 그래도 거의 회복했으니 이제 또 매일 와야지!

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

Section 7. CSS 선택자의 세계(1)  (0) 2022.12.21
DAY 26. 변형(transform)  (1) 2022.12.14
Section 6. CSS 기초(1)  (0) 2022.12.04
DAY 25. 단원 마무리 문제 풀기  (0) 2022.12.03
DAY 25. 가상 요소  (0) 2022.12.03
'프밍/CSS' Related Articles more
Comments