week 4

4주차

06 CSS의 기본

06-1 웹 문서에 디자인 입히기

왜 스타일을 사용할까?

스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴.

  • 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음

  • 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있음

06-2 스타일과 스타일 시트

스타일 형식 알아보기

기본형 선택자 { 속성1: 속성값1; 속성2: 속성값2; } 선택자 : 스타일을 어느 태그에 적용할 것인지 중괄호({}) 사이 : 스타일 정보 스타일 규칙 : 속성과 값이 하나의 쌍으로 이루어짐. 세미콜론(;)으로 구분

스타일 규칙을 작성하는 방법

  • CSS 여러 줄로 표기하기

p {
	text-align: center;
	color: blue;
}

  • CSS 한 줄로 표기하기

p { text-align: center; color: blue; }

스타일의 주석을 표기하는 방법

/* 여러 줄짜리 주석을
쓸 때는 이렇게
작성합니다 */
/* 한 줄짜리는 이렇게 */

스타일 시트 알아보기

스타일 시트? 웹 문서 안의 여러 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기 쉽도록 한 군데에 묶어 놓은 것

  • 브라우저 기본 스타일 : 웹 브라우저에 기본으로 만들어져 있음 ex) <h1>태그는 크게 표시되고, <p>는 제목보다 작게 표시되는 등

  • 사용자 스타일 : 사이트 제작자가 만듦

    • 인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시 해당 태그에 style 속성을 사용해 style="속성: 속성값;"형태로 스타일 변경

    • 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것 <head>태그 안에서 정의하고 <style>, </style> 태그 사이에 작성

    • 외부 스타일 시트 : 여러 웹 문서에 사용할 스타일을 별도 파일(*.css)에 저장해 놓고 필요할 때마다 가져와서 사용 외부 스타일 시트를 연결할 때 기본형 <link rel="stylesheet" href="외부 스타일 시트 파일 경로">

06-3 CSS 기본 선택자 알아보기

전체 요소에 스타일을 적용하는 전체 선택자

전체 선택자(universal selector) : 스타일을 문서의 모든 요소에 적용할 때 사용

  • 다음과 같이 *(별표)를 사용 기본형 * { 속성: 값; ..... }

  • 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용

태그와 요소 태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킴

<p>텍스트 단락 지정하기</p>

이 소스에서 <p> </p> 태그는 태그 자체를 말하는 것이고 태그를 포함해 <p> 태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소라고 함.

특정 요소에 스타일을 적용하는 타입 선택자

타입 선택자(type selector) : 특정 태그를 사용한 모든 요소에 스타일 적용 기본형 태그명 { 스타일 규칙 }

타입 선택자와 태그 선택자의 차이점 타입 선택자는 태그 이름을 선택자로 사용하므로 태그 선택자(tag selector)라고도 하고, 스타일을 적용하는 대상이 요소(element)이므로 요소 선택자(element selector)라고도 함

특정 부분에 스타일 적용하는 클래스 선택자

클래스 선택자(class selector) : 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때

  • 클래스 이름(임의로 지정)을 사용해서 다른 선택자와 구별, 클래스 이름 앞에 마침표(.) 기본형 .클래스명 { 스타일 규칙 }

  • 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 함

  • 태그 안에 class="클래스명"처럼 class 속성을 사용해서 지정

  • 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있음, 공백으로 구분

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

id 선택자(id selcetor) : 웹 문서의 특정 부분을 선택해서 스타일 지정

  • 마침표(.) 대신 # 기호 사용 기본형 #아이디명 { 스타일 규칙 }

  • 웹 요소에 적용할 때는 id="아이디명"

  • 클래스 선택자는 문서에 여러 번 적용, id 선택자는 문서에 한 번만 적용

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의 기본형 선택자1, 선택자2 { 스타일 규칙 }

06-4 캐스케이딩 스타일 시트 알아보기

캐스케이딩의 의미

CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래(계단식)로 적용된다는 의미로 사용 -> CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정 스타일이 충돌하지 않게 하는 방법

  • 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용

  • 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달

스타일 우선순위

우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙.

  • 얼마나 중요한가?

    1. 사용자 스타일 : 컴퓨터 사용자가 설정한 내용

    2. 제작자 스타일

    3. 브라우저 기본 스타일

  • 적용 범위는 어디까지인가?

    1. !important : 어떤 스타일보다 우선 적용

    2. 인라인 스타일 : 태그 안에 style 속성을 사용한 경우

    3. id 스타일 : 지정한 부분에만 적용 (한 문서에 한 번만 적용)

    4. 클래스 스타일 : 지정한 부분에만 적용 (한 문서에 여러 번 적용)

    5. 타입 스타일 : 특정 태그에 스타일을 동일하게 적용

  • 소스 코드의 작성 순서는 어떠한가?

    • 중요도와 범위가 같다면 스타일을 정의한 소스 순서로 우선순위 적용

    • 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀!

스타일 상속

스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달됨

07 텍스트를 표현하는 다양한 스타일

07-1 글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

기본형 font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]

  • 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 브라우저에 표시

  • 사용자 시스템에 설치되어 있지 않는 경우를 고려하여 두 번째, 세 번째 글꼴까지 생각해야 함

  • "맑은 고딕"처럼 두 단어 이상으로 된 한 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶음

글자 크기를 지정하는 font-size 속성

기본형 font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

  • px(픽셀), pt(포인트) 등으로 지정할 수 있고 백분율 사용 가능

  • 절대 크기 : 브라우저에서 지정한 크기

  • 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 크기 지정

  • 크기 : 브라우저와 상관없이 글자 크기 직접 지정

  • 백분율 : 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

키워드를 사용하여 글자 크기 지정하기 미리 약속해 놓은 키워드 중 하나를 사용할 수 있음 xx-small < x-small < small < medium < large < x-large < xx-large

단위를 사용하여 글자 크기 지정하기 음숫값은 사용할 수 없음. 1em은 16px, 12pt와 같음

  • em : 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 비율값 지정

  • rem : 문서 시작 부분(root)에서 지정한 크기를 기준(1em)으로 비율값 지정

  • ex : 해당 글꼴의 소문자 x의 높이르 기준(1ex)으로 비율값 지정

  • px : 모니터의 1픽셀을 기준으로 비율값 지정

  • pt : 포인터, 일반 문서에서 많이 사용

백분율을 사용하여 글자 크기 지정하기 부모 요소의 글자 크기를 기준으로 계산 부모 요소의 글꼴이 font-size: 16px처럼 단위로 표현되어 있어야 함

이탤릭체로 글자를 표시하는 font-style 속성

기본형 font-style: normal | italic | oblique italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면 oblique는 원래 글꼴을 단지 기울어지게 표시

글자 굵기를 지정하는 font-weight 속성

기본형 font-weight: normal | bold | bolder | lighter | 100 | 200 | _ | 800 | 900 미리 만들어진 예약어나 숫자값을 사용해 굵기를 지정할 수 있음 100~900 사이에서 400은 normal, 700은 bold에 해당

07-2 웹 폰트 사용하기

웹 폰트란

  • 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장

  • 즉, 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드

웹 폰트 업로드하고 사용하기

  • 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType), *.ttf : 파일 크기가 커서 웹에서 사용하기 적절하지 않음

  • 웹에 적합한 여러 글꼴 : EOT(embedded open type), WOFF(web open font format), WOFF2

  • 웹 폰트 정의

    @font-face {
  font-family: <글꼴 이름>;
  src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, .....];
}

    font-family 속성을 사용해 글꼴 이름 지정 src 속성에서 사용할 글꼴 파일의 경로 지정 경로 지정 전 local()문을 사용해 사용자 시스템에 해당 글꼴이 있는지 먼저 확인

07-3 텍스트 관련 스타일

글자색을 지정하는 color 속성

기본형 color: <색상>

16진수로 표현하는 방법 6자리의 16진수, #RRGGBB로 표시

hsl과 hsla로 표현하는 방법 hsl(a) : hue(색상), saturation(채도), lightness(명도) + alpha(불투명도) ex) 빨간색 : hsl(0, 100%, 50%);

색상을 영문명으로 표현하는 방법 red, yellow, black 처럼 잘 알려진 색상 이름 그대로 사용

rgb와 rgba로 표현하는 방법 앞에서붙터 차례대로 빨간색(Red), 초록색(Green), 파란색(Blue) 하나도 섞이지 않았을 때는 0으로 표시, 가득 섞였을 때는 255로 표시 ex) 파란색 : rgb(0, 0, 255);

텍스트를 정렬하는 text-align 속성

문단의 텍스트 정렬 방법을 지정 기본형 text-align: start | end | left | right | center | justify | match-parent 현재 줄의 시작 위치에 맞추어 - 끝 위치에 맞추어 - 왼쪽 정렬 - 오른쪽 정렬 - 가운데 정렬 - 양쪽 정렬 - 부모 요소를 따라 문단 정렬 정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본

줄 간격을 조절하는 line-height 속성

한 문단이 두 줄을 넘었을 때 생기는 줄 간격을 조절하는 속성 정확한 단위로 값을 지정하거나 문단의 글자 크기를 기준으로 백분율로 지정할 수 있음

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

텍스트에 밑줄을 긋거나 취소선을 표시 하이퍼링크 적용 시의 기본 밑줄 삭제 가능 none : none underline : underline overline : overline line-through : line-through

텍스트에 그림자 효과를 추가하는 text-shadow 속성

기본형 text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상> 가로 거리와 세로 거리만 지정하면 나머지 값은 기본값을 사용

텍스트의 대소 문자를 변환하는 text-transform 속성

  • capitalize : 첫 번째 글자를 대문자로

  • uppercase : 모든 글자를 대문자로

  • lowercase : 모든 글자를 소문자로

  • full-width : 가능한 한 모든 문자를 전각 문자로 전각 문자란, 가로 세로 길이 비율이 같은 글자

글자 간격을 조절하는 letter-spacing, word-spacing 속성

글자와 글자 사이 간격 조절 / 단어와 단어 사이 간격 조절 주로 letter-spacing 속성을 사용해 자간 조절 px, em과 같은 단위나 퍼센트(%)로 크기 조절

07-4 목록 스타일

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

불릿 대신 이미지를 사용하는 list-style-image 속성

기본형 list-style-image: <url(이미지 파일 경로)> | none

목록을 들여 쓰는 list-style-position 속성

기본형 list-style-postion: inside | outside 기본값은 outside. inside 설정 시 들여쓰기됨

목록 속성을 한꺼번에 표시하는 list-style 속성

list-style-type, list-style-image, list-style-postion 속성을 한꺼번에 표시

07-5 표 스타일

표 제목의 위치를 정해 주는 caption-side 속성

기본형 caption-side: top | bottom

표에 테두리를 그려 주는 border 속성

표 바깥 테두리와 셀 테두리를 각각 지정할 수 있음

셀 사이의 여백을 지정하는 border-spacing 속성

기본형 border-spacing: 수평거리 수직거리 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 됨

표와 셀 테두리를 합쳐 주는 border-collapse 속성

border 속성 사용 시 셀과 셀 사이에 여백이 생기며 두 줄로 표시됨 두 줄로 그대로 둘 것인지, 합쳐서 하나로 표시할 것인지 결정하는 속성 <table> 태그에 적용되는 스타일에만 지정

  • collapse : 표와 셀의 테두리를 합쳐 하나로 표시

  • separate : 기본값. 따로 표시

Previousweek 3Nextweek 5

Last updated