CSS - 선택자, 서체, 문단, 배경

재이·2022년 1월 7일

CSS3

목록 보기

1/4

본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.

CSS 기본 문법(Basic CSS Grammar)

CSS는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등의 세 가지 종류가 있다. 실제로 외부 css를 사용하는 편이지만, 간단한 스타일은 내부 스타일시트로도 많이 사용하고 있으며 인라인 스타일시트는 가장 우선순위가 높아 꼭 필요할 때 편리하게 사용할 수 있다.

내부 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 HTML 문서 안에 스타일 태그로 기재하여 스타일이 HTML 안에 함께 저장되는 형대이다.

<html>
  <head>
    <style type="text/css">	/* 스타일 시작 */
      p { color : red; }
    </style>			<!-- 스타일 끝 -->
  </head>
  <body>
    <p>우리를 기쁘게 하는 것들.</p>
  </body>
</html>

-외부 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 따로 CSS파일로 저장하여 HTML문서에 파일명으로 연결해주는 형태이다.

html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />	/* 스타일 파일을 연결 */
  </head>
  <body>
    <p>우리를 기쁘게 하는 것들.</p>
  </body>
</html>

style.css

p { color : red; }

외부 스타일시트 형식이 또 하나 있는데 @import이다. 이것은 스타일 태그나 스타일 파일 안에 써주어야 한다. 주로 기본 CSS를 따로 작성하여 각각의 프로젝트마다 꽂아주는 데 사용한다. CSS 가장 윗줄에 넣어야 한다.

html

<html>
  <head>
    <style type="text/css">
      @import url("reset.css");	/* 스타일 파일을 연결 */
      p {color : red; }
    </style>
  </head>
  <body>
    <p>우리를 기쁘게 하는 것들.</p>
  </body>
</html>

reset.css

body, p, h1 { margin:0; padding:0; }

인라인 스타일시트는 문서의 표현(디자인 꾸미기)을 위한 명령들을 HTML 마크업의 속성으로 직접 입력해주는 형태이다.

<body>
  <p style="color : red;">우리를 기쁘게 하는 것들.</p>
</body>

이후에 선택자의 속성에 대해 좀 더 배우고 나서 스타일시트를 본격적으로 만드는 예제들을 만나 보자.

선택자(Selector)

CSS에 대한 아무런 지식 없이 선택자를 이야기한다는 것은 어렵다. 그런데 선택자를 모르고는 css속성을 알아볼 수 없기 때문에 선택자의 의미를 먼저 알아야만 좀 더 쉽게 다가갈 수 있따. 선택자란 CSS로 UI 디자인을 할 때 '어디를 꾸며 줄까?'하는 고민의 대상이 되는 부분을 말한다. 선택자에는 여러 종류가 있는데 그중에서 타입 선택자, id 선택자, class 선택자가 가장 중요하다. 그럼 하나씩 좀 더 자세히 살펴보자.

타입 선택자

태그 이름을 그대로 가져다 쓰는 선택자이다.

p { color : blue; } /* p태그 안의 글자들을 파란색으로 처리함 */

id 선택자

id를 붙인 이름을 가져다 쓰는 선택자이다. --- "#"을 붙여 표기함

#ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함 */

class 선택자

class로 붙인 이름을 가져다 쓰는 선택자이다. --- "."을 붙여 표기함

.ctxt { color : blue; } /* id명이 ctxt인 요소의 글자들을 파란색으로 처리함 */

전체 선택자

페이지의 모든 요소를 가리키는 선택자이다. --- "*"을 붙여 표기함

* { color : blue; } /* 페이지 내의 모든 요소들의 글자들을 파란색으로 처리함 */

자식 선택자

현재 요소 내의 바로 아래 나오는 요소만을 가리키는 선택자이다. IE6에서는 표현되지 않는다.

li > p { color : blue; } /* li 속 바로 아래 p 태그의 글자들을 파란색으로 처리함 */

인접 선택자

현재 요소 밖의 바로 뒤에 나오는 요소만을 가리키는 선택자이다. IE6에서는 표현되지 않는다.

h1 + p { color : blue; } /* h1 속 바로 다음 p 태그의 글자들을 파란색으로 처리함 */

속성 선택자

마크업의 속성을 선택자로 사용할 수 있다. IE6에서는 표현되지 않는다.

h1[class] - class 속성이 있는 모든 h1
img[alt] - alt 속성이 있는 모든 이미지
*[title] - title 속성을 갖는 모든 요소

가상 클래스 선택자

링크 걸린 글자에 스타일을 부여하는 것이다.

a:link - 링크된 글자를 보고만 있을 때의 스타일을 주는 선택자.
a:visited - 링크된 글자를 눌러 해당 페이지에 갔다가 돌아온 경우의 스타일을 주는 선택자.
a:hover - 링크 걸린 글자에 마우스가 닿았을 경우의 스타일을 주는 선택자.
a:active - 링크 걸린 글자가 활성화 되었을 경우의 스타일을 주는 선택자. (클릭했다가 돌아왔거나 클릭하려다 만 경우)
a:focus - 링크 걸린 글자에 포커스가 생길 경우의 스타일을 주는 선택자. (탭키 등으로 포커스가 나타날 경우)

모두 사용할 경우 위 표의 순서대로 기재해야 하며 무졸 다음 예처럼 사용한다.

<style type="tsxt/css">
  a { color : #000; } 	/* 링크 걸린 글자는 모두 검은색 */
  a:hover { color : #f00; }	/* 마우스 닿으면 빨간색 */
</style>

수도 클래스 선택자

요소의 세부 조건까지도 나타낼 수 있는 선택자이다. IE6에서는 표현되지 않는다.

:first-letter - 요소의 첫글자
:first-line - 요소의 첫 줄
:first-child - 같은 요소 중 첫 번째 요소
:last-child - 같은 요소 중 첫 번째 요소
:before - 요소의 맨 앞에 배치하는 마크업에는 없는 가상 요소
:after - 요소의 맨 뒤에 배치하는 마크업에는 없는 가상 요소

<style type="text/css">
  .box:after { content : "항목을 선택해주세요"; color : green; }		/* box의 마지막에 문장을 삽입한다 */
  p:first-letter { font-size : 300%; }		/* p 태그 안의 첫 글자는 글자크기 세배로 */
  p { border-bottom : 1px dashed #000; }		/* p 태그에 모두 밑줄 치고 */
  p:last-child { border : none; }		/* 마지막 p 태그에만 밑줄 빼기 */
  </style>

※ 결합 형태에 따라서 종속 선택자, 하위 선택자, 그룹 선택자가 있는데 간단히 알아보도록 하자

종속 선택자

타입 선택자와 아이디(#)/틀래스(.) 선택자가 결합된 형태이다.

p.more a { color : red; }		/* 클래스명이 more인 p태그의 링크 (a)샋상을 변경함 */

하위 선택자

한 선택자 내부에 존재하는 또 다른 선택자이다.

.box li { padding :  5px 0; }		/* 클래스명이 box인 요소 내부의 li에 세로 여백을 준다 */

그룹 선택자

선택자들을 쉼표로 구분하여 여럿을 함께 기술하는 것이다.


h1, p { border : 1px solid #000; }		/* h1과 p요소에 1px짜리 검은 테두리를 준다 */

서체(Font)

글자에 관련된 속성은 글꼴, 글자 크기, 글자 굵기, 기울임 여부, 줄 간격, 대소문자 여부, 글자 색상 등 일곱 가지로 정리해 보겠다. 그것들을 CSS로 따로 표현하는 법을 알아보고, 특히 그 중 색상을 제외한 여섯 가지 속성은 한꺼번에 표현하는 경우가 더 많으므로 그 방법도 알아보도록 하자. 그럼 좀 더 자세히 들어가보자.

font-family - 글꼴을 인용 부호로 감싸 지정한다.
font-size - 수치에 px 등의 단위를 붙여 지정한다.(px, %, em)
font-weight - 두께를 bold 또는 수치로 지정한다.(bold, normal0
font-style - 기울이거나, 바로 세운다.(italic, normal)
font-variant - small-caps로 작은 대문자를 표현할 수 있다.(small-caps, normal)
line-height - 줄 간격을 수치로 지정한다.(%, em, px)
font - 위의 속성들을 한 줄로 기술하는 선택자.

*1em은 100%와 같은 뜻으로 부모 박스에서 설정한 크기와 같은 크기를 의미한다.

이렇게 여섯가지 속성을 많은 사람들은 모두 한꺼번에 쓰기를 즐겨하는데 그럴 경우 반드시 다음 세가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없다.

sont:[font-weighyt, font-style, font-variamt] → [font-size/line-height] → [font-famliy]

font : 12px Times ; --- O

font : bold 12px/1.5 ; --- X (글꼴을 쓰지 않았음)

font : 12px/1.5 bold Times ; --- X (bold를 맨 앞에 써야 함)

그리고 전체나 기타의 레이아웃을 정할 때 크기를 편하게 가늠하기 위해 전체 문서에서 가장 많은 양을 차지하는 본문의 서식대로 다음과 같이 기본 폰트를 body 태그에 넣어주는 것도 좋다.

body {font:12px "굴림",Gilim;}

다음은 색상 속성으로 넘어가도록 하자. 색상은 주로 16진수 6자리로 표기하며 맨 앞 두 자리는 빨간색(R), 다음 두 자리는 초록색(G), 맨 뒤 두 자리는 파란색(B)이다. 혹은, 브라우저에 등록되어 있는 색상 고유명사로 지정할 수 도 있다. 값이 높아질수록 밝아지는 결과가 나오며, 참고로 그 두 자릿값이 셋다 같으면 한자리로 줄여 쓸 수 있다.

color

color : #ff0000; --- 글자 색을 빨간색으로

color : orange; --- 글자 색을 주황색으로

대표 색상값

color : #000000; --- 검은색 (= #000)

color : #ffffff; --- 흰색 (= #fff)

color : #ff0000; --- 빨간색 (= #f00)

color : #00ff00; --- 형광 밝은 초록색 (= #0f0)

color : #0000ff; --- 파란색 (= #00f)

color : #ffff00; --- 노란색 (= #ff0)

color : #00ffff; --- 형광 밝은 파란색 (= #0ff)

color : #ff00ff; --- 형광 밝은 보라색(= #f0f)

예시

color : pink; --- O

color : #orange; --- X (고유명사에 #을 붙이지 않음)

color : #abcdef; --- O

color : #qwerty; --- X (16진수는 f까지만 사용)

color : #123456; --- O

color : #1234567; --- X (자릿수는 6자리만)

문단(Paragraph)

문단 관련 속성은 주로 글자나 단어보다는 문장들에 적용하면 좋은 속성들로 분류했는데, 대표적으로 가로 정렬, 세로 정렬, 들여쓰기, 대소문자, 줄치기, 자간 조절 등이 있다. 어떻게 사용하는지 알아보자.

text-align

문단을 블록의 왼쪽, 가운데, 오른쪽, 양쪽 등으로 정렬시켜 준다.
쓸 수 있는 값들 : left(왼쪽 정렬), center(중앙 정렬), right(오른쪽 정렬), justify(양쪽 정렬)
블록 요소에만 사용할 수 있다.

vertical-align

이미지나 폼 요소를 위, 가운데, 아래 등으로 세로 정렬시켜 준다.
쓸 수 있는 값들 : top(위쪽 정렬), middle(중앙 정렬), bottom(아래쪽 정렬)
img, input, select, 테이블의 th, td 등에 사용한다.

text-indent

문단의 첫머리를 들여쓰기한다.
쓸 수 있는 값들 : px, % 등의 단위로 수치를 적용한다.
블록 요소에만 사용할 수 있다.

text-transform

대소문자 변경을 실행한다.
쓸 수 있는 값 : uppercase(대문자), lowercase(소문자), capitalize(첫 글자만 대문자)

text-decoration

글자에 및줄, 윗줄, 가운데 줄을 치거나, 원래 있던 밑줄을 없애 준다.
쓸 수 있는 값 : underline(밑줄), overline(윗줄), line-through(가운데 줄), none(밑줄 제거)

letter-spacing

글자와 글자간의 간격을 부여한다.
쓸 수 있는 값 : px, % 등의 단위로 수치를 적용한다.

배경(Background)

배경에 관한 속성은 배경색, 배경 이미지, 배경 반복 여부, 배경 위치, 배경 고정 여부 등이 있으며 이 모든 속성을 한 줄로 표기할 수도 있어야 하겠다. 그럼 들어가 보자.

background-color

배경의 색상을 지정한다.

transparent --- 투명 (생략하면 기본값으로 취급됨)

#ff0000 --- 배경을 빨간색으로

background-image

배경으로 쓸 이미지를 지정한다.
ex) url("image/bg.png")

background-repeat

배경 이미지를 어떻게 반복시킬지 정한다.

repeat --- 가로 세로로 반복(생략하면 기본값으로 취급됨)

no-repeat --- 한번만 나옴

repeat-x --- 가로로 반복함

repeat-y --- 세로로 반복함

background-position

배경 이미지의 위치를 정한다.
가로위치 --- left, right, center, px값, %값, em값
세로위치 --- top, bottom, center, px값, %값, em값
생략하면 --- 각각 left, top이 기본값으로 취급됨

background-attachment

베경 이미지를 고정시킬지 스크롤되게 할지 정한다.
scroll --- 화면이 스크롤되면 따라감(생략하면 기본값으로 취급됨)
fixed --- 배경의 위치가 화면 기준으로 고정됨

background

위의 다섯 가지 속성을 한 줄로 표기한다.

배경 관련 속성을 한 줄로 표기할 때의 주의점은 다음과 같다.

각 속성들 간의 순서는 상관없이 기술함.
단, 반드시 속성 간에 띄어쓰기를 해주어야 함.(url과 괄호는 붙임)
no-repeat 앞을 띄어 쓰지 않으면 브라우저 IE에서 배경 이미지가 나오지 않는다.
배경 이미지의 위치를 수치값으로 기술할 때에는 가로 위치 → 세로 위치 순서로 반드시 두 개의 값을 넣어주어야 한다.

background : #fdd yrl("images/bg.png") no-repeat 50px 100px scroll;

또한 background 속성을 쓰면서 속성을 생략할 경우 위의 표에서 기술한 대로 각 속성은 기본값을 가지므로 다음 두 문장은 같은 결과를 갖게 된다.

background : url("images/bg.png");
background : transparent url("images/bg.png") repeat left top scroll;

예시

맞는 예와 풀이

background : pink url("images/bg.png") no-repeat 10px 30px;

배경 이미지는 bg.png 하나만 찍음

그 나머지 영역 핑크색 칠

배경 이미지 위치는 좌측에서 10px, 위에서 30px 떨어진 곳
background : url("imged/bg.png") repeat-x bottom;

배경 이미지로 bg.png를 영역 아래쪽에 가로로 반복하여 쭉 찍음

그 나머지 영역 투명

틀린 예와 풀이

background : #ffdddd url ("images/bg.png")no-repeat 50px;

url 뒤에 띄어쓰기 하지 말 것

no-repeat 앞에 붙여 쓰지 말 것

위치값을 하나만 써서 가로 위치인지 세로 위치인지 알 수 없음

재이

그림쟁이 개발자

다음 포스트

CSS - 선택자, 서체, 문단, 배경

CSS3

CSS 기본 문법(Basic CSS Grammar)

선택자(Selector)

타입 선택자

id 선택자

class 선택자

전체 선택자

자식 선택자

인접 선택자

속성 선택자

가상 클래스 선택자

수도 클래스 선택자

종속 선택자

하위 선택자

그룹 선택자

서체(Font)

color

대표 색상값

예시

문단(Paragraph)

text-align

vertical-align

text-indent

text-transform

text-decoration

letter-spacing

배경(Background)

background-color

background-image

background-repeat

background-position

background-attachment

background

예시

맞는 예와 풀이

틀린 예와 풀이

CSS - 상자, 레이아웃

0개의 댓글