본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

CSS 기초 지식

최초 작성일
최종 수정일
이번 시간에는...
CSS 공부에 필요한 기초 지식으로, CSS 내에서 활용되는 길이/크기 단위 px, em, % 등과 RGB, Hex 코드와 같은 색상 단위, 웹 안전 색상과 CSS 스타일을 어떻게 적용시키는 지 알아봅니다.

CSS를 본격적으로 다뤄 보기 전에, CSS에서 스타일을 주기 위해 알아야 할 기초적인 단위를 다루도록 하겠습니다.

크기 단위

요소의 너비나, 글자 크기 등을 지정하기 위해서는 ‘20px’과 같은 수치를 입력해야 합니다. 이런 수치를 입력하는 주요 단위들에 대해서 살펴보겠습니다.

px

대체로 제일 많이 사용하는 단위 입니다. 모니터 해상도의 한 화소인 ‘픽셀'을 기준으로 합니다. 픽셀의 크기는 변하지 않기 때문에 고정적인 단위입니다.

%

퍼센트는 비율을 나타내는 단위이기 때문에 상대적인 단위 입니다. 만약, 상위 요소의 너비가 100px이고, 그 하위 요소의 너비가 80%라면, 실제로 80px로 화면에 보여지게 됩니다. 비율로 가변적인 단위 이기 때문에, 가변적인 레이아웃에서 자주 사용되는 단위입니다.

em

앞서 살펴본, px와 %와는 달리 조금 생소할 수 있는 단위 입니다. em은 %와 같은 상대적인 단위 입니다. 참고로 0.5와 같은 소수점은 '.5'로 표현할 수 있습니다.

하지만, %와는 조금 다른 부분이 있는데요, 이 em은 글자 크기를 기준으로 합니다. 예를 들어서 해당 요소의 글자 크기가 15px이라고 했을 때, 요소의 너비를 ‘2em’을 주게 되면, ‘30px(15px * 2)’이 됩니다. 또한 상위 요소의 글자 크기가 12px이고, 하위 요소에 글자 크기에 1.5em을 준다면 글자크기는 18px(12 * 1.5)가 되게 됩니다.

이 em은 동적인 페이지나, 글자 크기에 따라 다른 크기를 줘야 하는 경우 등에 많이 사용됩니다.

너비를 각각 같은 20em으로 줬지만, 글자 크기가 다른 경우
font 10px
font 14px

그 외에도 cm(센티미터), mm(밀리미터), in(인치), pt(포인트) 등의 단위가 있습니다만, 주로 앞선 세가지 단위를 사용합니다.

색상 단위

색상을 넣을 수 있는 단위는 세가지 방식이 있습니다. 그 중 한 가지는 이름을 통해 넣는 방법이고, 나머지 두 가지는 숫자 코드를 입력하는 방식입니다.

색상 이름

'black'과 'white'와 같은 색상 이름을 적어주는 방식입니다. 일단 17가지 표준 색이 있고, 추가로 123가지가 더 있어서 약 140개 정도의 색상 이름이 존재합니다.

하지만 이런 색상이름을 일일이 다 외울 수는 없습니다. 또한 이름으로 나타내는 색상은 한계가 있기 때문에, 실제로는 자주 사용되지 않습니다. 보통 급히 테스트를 하거나, 디자인이 필요 없는 페이지 같은 경우에 유용하게 쓰임이다.

기본 색상 이름 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
기본 색상 이름

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow

RGB

앞서 본 색상 이름 방식으로는 다양한 색상을 나타내기 힘들기 때문에, 다양한 색상을 코드로 표현할 수 있습니다.

그 중 하나가 rgb 방식입니다. rgb는 각각 빛의 삼원색인 Red, Green, Blue를 나타내며, 다음과 같이 작성합니다.

rgb(255,10,0)

rgb를 먼저 쓰고 괄호를 열고서 각 r,g,b에 해당하는 숫자를 입력해 줍니다. 숫자 값은 0~255까지이며, 숫자가 높을 수록 해당 색의 양이 많아집니다. 또한 전체 색상의 양이 많아질 수록 색은 밝아집니다. (0,0,0)은 검은색이며, (255,255,255)는 흰색입니다. 위의 색상 값 (255,10,0)은 Red가 255이고 다른 Green이 10, Blue가 0 이니, 거의 빨간색일거라 예측 가능할 수 있습니다.

Hex

Hex 방식은 색상을 16진수로 표현한 방식으로 다음과 같이 작성합니다.

#ffcc00

보통 웹 작업을 할 때에 많이 쓰는 표현방식이라 낯익은 분들도 많을 겁니다. 사실 이 Hex 방식은 앞서 살펴본 rgb 방식과 동일한 원리의 방식입니다. 255가지의 숫자를 16진수 두 자리로 나타낸 것입니다. (16진수는 0부터 F까지의 16개의 숫자를 한자리로 표현합니다. 두 자리 숫자면 16 * 16 = 255이므로, 255개의 숫자를 표현할 수 있습니다.)

각 두 자리마다 r, g, b를 나타냅니다. 만약 #ffcc00이라면, Red는 'ff', Green은 'cc', Blue는 '00'이 되는 것입니다. 이를 rgb방식으로 풀어 쓰면, rgb(255,144,0)이 됩니다. 반대로 만약 rgb(255,10,0)이라면 #ff0a00이 되는 것입니다.

이 Hex 방식은 만약 각 두 자리가 동일 하다면, 줄여 쓸 수도 있습니다. 예를 들어 #ffcc00은 #fc0으로 표현할 수 있습니다.

이런 Hex 방식은 rgb방식보다 글자 수를 더 줄여서 사용할 수 있어서, 보다 보편적으로 사용됩니다. 색상 코드를 직접 보면서 확인 하고 싶다면, 이미지 에디터의 색상 선택창이나 웹 브라우저의 부가 기능을 통해서 확인 할 수 있습니다.

김프에서 색상선택 창의 모습
김프 색상 선택 창에 나타난 색상 코드

웹 안전 색상 (Web Safe Colors)

종종 이미지 에디터에서 색상을 선택할 때, 다음과 같이 '웹 색상(Web Colors)'이라는 용어가 나옵니다. 이 용어의 탄생 배경을 보자면, 초반에 웹이 보급되던 시절에는 모니터가 나타낼 수 있는 색상에 한계가 있었습니다. 보통 256개의 색상을 나타낼 수 있었습니다. (gif, png 8bit를 떠올려 보세요.) 때문에, 40여개의 시스템 색을 제외한 216개의 '웹 안전 색상' 목록을 표준으로 잡게 됩니다.

하지만, 지금은 모니터뿐 아니라 모바일 등 어디서도 수만 가지 색상을 표현해 냅니다. 때문에 이 '웹 안전 색상'은 참고만 하시고, 특수한 경우가 아니라면 굳이 이 '안전 색상'만을 사용할 필요는 전혀 없습니다.

포토샵 색상선택창에서 웹 안전 색상을 선택한 모습
포토샵에서 웹 안전 색상 선택모습

스타일을 적용하는 몇 가지 방법

일단 전에도 CSS 맛보는 강의에서도 알아봐서 여러분들도 이미 익히 알고 있는 내용이지만, CSS 강좌를 시작하는 의미에서 다시 한번 더 정리하고 넘어가도록 하겠습니다.

Link 요소로 연결

여러분이 잘 알고 있는 방법이고, 가장 권장되는 방법입니다. HTML 문서의 head 요소 안에 link 요소를 통해서 css파일을 연결하는 방법입니다. 참고로 이 link 요소를 여러 개 넣음으로써, 여러 css 파일을 연결할 수 있습니다.

style 요소로 적용

HTML 문서와 CSS 문서를 분리하지 않고 넣는 방법입니다. 권장하는 방법은 아니지만 해당 스타일을 오로지 해당 페이지만 쓴다거나, 임시적으로 테스트를 위한 페이지를 만들 때 주로 사용합니다.

보통 다음과 같이 head 요소 안에 style 요소를 넣고, style 요소 안에서 CSS 문서와 동일하게 작성합니다.

style 속성을 통해 적용

해당 요소만 스타일을 줄 때 사용됩니다. 이 역시 권장하는 방법은 아니며 보통 게시판이나 블로그에서 글을 쓸 때와 같이, 페이지 내에 link나 style 요소를 사용할 수 없을 때 사용합니다. 또한 임시 테스트 페이지 말고도, 스크립트를 통해서 요소의 모양을 제어할 때에도 보통 style 속성을 이용합니다.

다음과 같이 해당 요소에 style 속성을 주고 따옴표 안에 스타일을 작성합니다.

이 글이 유용하셨다면 친구들에게 공유 해주세요.