스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킴.
- 웹 문서의 내용과 상관없이 디자인만 바꿀 수 있음
- 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있음
기본형 선택자 { 속성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="외부 스타일 시트 파일 경로">
- 인라인 스타일 : 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
해당 태그에 style 속성을 사용해
전체 선택자(universal selector) : 스타일을 문서의 모든 요소에 적용할 때 사용
- 다음과 같이 *(별표)를 사용
기본형* { 속성: 값; ..... } - 웹 브라우저의 기본 스타일을 초기화할 때 자주 사용
태그와 요소
태그는 말 그대로 태그 자체를 가리키는 반면, 요소는 태그를 적용한 것을 가리킴<p>텍스트 단락 지정하기</p>이 소스에서
<p></p>태그는 태그 자체를 말하는 것이고 태그를 포함해<p>태그를 적용한 '텍스트 단락 지정하기' 부분을 p 요소라고 함.
타입 선택자(type selector) : 특정 태그를 사용한 모든 요소에 스타일 적용
기본형 태그명 { 스타일 규칙 }
타입 선택자와 태그 선택자의 차이점
타입 선택자는 태그 이름을 선택자로 사용하므로 태그 선택자(tag selector)라고도 하고, 스타일을 적용하는 대상이 요소(element)이므로 요소 선택자(element selector)라고도 함
클래스 선택자(class selector) : 같은 태그라도 일부는 다른 스타일을 사용하고 싶을 때
- 클래스 이름(임의로 지정)을 사용해서 다른 선택자와 구별, 클래스 이름 앞에 마침표(.)
기본형.클래스명 { 스타일 규칙 } - 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 함
- 태그 안에
class="클래스명"처럼 class 속성을 사용해서 지정 - 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있음, 공백으로 구분
id 선택자(id selcetor) : 웹 문서의 특정 부분을 선택해서 스타일 지정
- 마침표(.) 대신 # 기호 사용
기본형#아이디명 { 스타일 규칙 } - 웹 요소에 적용할 때는
id="아이디명" - 클래스 선택자는 문서에 여러 번 적용, id 선택자는 문서에 한 번만 적용
여러 선택자에서 같은 스타일 규칙을 사용하는 경우 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의
기본형 선택자1, 선택자2 { 스타일 규칙 }
CSS에서 'C'는 캐스케이딩(cascading)의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래(계단식)로 적용된다는 의미로 사용
-> CSS에서는 웹 요소에 둘 이상의 스타일을 적용할 때 우선순위에 따라 적용할 스타일을 결정
스타일이 충돌하지 않게 하는 방법
- 스타일 우선순위 : 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일 적용
- 스타일 상속 : 태그의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달
우선순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙.
- 얼마나 중요한가?
- 사용자 스타일 : 컴퓨터 사용자가 설정한 내용
- 제작자 스타일
- 브라우저 기본 스타일
- 적용 범위는 어디까지인가?
- !important : 어떤 스타일보다 우선 적용
- 인라인 스타일 : 태그 안에 style 속성을 사용한 경우
- id 스타일 : 지정한 부분에만 적용 (한 문서에 한 번만 적용)
- 클래스 스타일 : 지정한 부분에만 적용 (한 문서에 여러 번 적용)
- 타입 스타일 : 특정 태그에 스타일을 동일하게 적용
- 소스 코드의 작성 순서는 어떠한가?
- 중요도와 범위가 같다면 스타일을 정의한 소스 순서로 우선순위 적용
- 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씀!
스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달됨
기본형 font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]
- 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 브라우저에 표시
- 사용자 시스템에 설치되어 있지 않는 경우를 고려하여 두 번째, 세 번째 글꼴까지 생각해야 함
- "맑은 고딕"처럼 두 단어 이상으로 된 한 글꼴 이름은 한 덩어리라는 것을 알 수 있도록 큰따옴표로 묶음
기본형 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: normal | italic | oblique
italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면
oblique는 원래 글꼴을 단지 기울어지게 표시
기본형 font-weight: normal | bold | bolder | lighter | 100 | 200 | _ | 800 | 900
미리 만들어진 예약어나 숫자값을 사용해 굵기를 지정할 수 있음
100~900 사이에서 400은 normal, 700은 bold에 해당
- 웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장
- 즉, 웹 문서를 서버에 올릴 때 웹 폰트 파일도 함께 업로드
- 컴퓨터에서 사용하는 글꼴은 트루타입(TrueType), *.ttf : 파일 크기가 커서 웹에서 사용하기 적절하지 않음
- 웹에 적합한 여러 글꼴 : EOT(embedded open type), WOFF(web open font format), WOFF2
- 웹 폰트 정의
@font-face { font-family: <글꼴 이름>; src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, .....]; }
font-family속성을 사용해 글꼴 이름 지정
src속성에서 사용할 글꼴 파일의 경로 지정
경로 지정 전local()문을 사용해 사용자 시스템에 해당 글꼴이 있는지 먼저 확인
기본형 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: start | end | left | right | center | justify | match-parent
현재 줄의 시작 위치에 맞추어 - 끝 위치에 맞추어 - 왼쪽 정렬 - 오른쪽 정렬 - 가운데 정렬 - 양쪽 정렬 - 부모 요소를 따라 문단 정렬
정렬 방법을 지정하지 않을 경우 왼쪽 정렬이 기본
한 문단이 두 줄을 넘었을 때 생기는 줄 간격을 조절하는 속성
정확한 단위로 값을 지정하거나 문단의 글자 크기를 기준으로 백분율로 지정할 수 있음
텍스트에 밑줄을 긋거나 취소선을 표시
하이퍼링크 적용 시의 기본 밑줄 삭제 가능
none : none
underline : underline
overline : overline
line-through : line-through
기본형 text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>
가로 거리와 세로 거리만 지정하면 나머지 값은 기본값을 사용
- capitalize : 첫 번째 글자를 대문자로
- uppercase : 모든 글자를 대문자로
- lowercase : 모든 글자를 소문자로
- full-width : 가능한 한 모든 문자를 전각 문자로
전각 문자란, 가로 세로 길이 비율이 같은 글자
글자와 글자 사이 간격 조절 / 단어와 단어 사이 간격 조절
주로 letter-spacing 속성을 사용해 자간 조절
px, em과 같은 단위나 퍼센트(%)로 크기 조절
기본형 list-style-image: <url(이미지 파일 경로)> | none
기본형 list-style-postion: inside | outside
기본값은 outside. inside 설정 시 들여쓰기됨
list-style-type, list-style-image, list-style-postion 속성을 한꺼번에 표시
기본형 caption-side: top | bottom
표 바깥 테두리와 셀 테두리를 각각 지정할 수 있음
기본형 border-spacing: 수평거리 수직거리
공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 됨
border 속성 사용 시 셀과 셀 사이에 여백이 생기며 두 줄로 표시됨
두 줄로 그대로 둘 것인지, 합쳐서 하나로 표시할 것인지 결정하는 속성
<table> 태그에 적용되는 스타일에만 지정
- collapse : 표와 셀의 테두리를 합쳐 하나로 표시
- separate : 기본값. 따로 표시