Css 02
posted on 09 Jan 2024 under category css
웹 문서에 사용할 글꼴은 font-family 속성으로 지정. 이 속성은 <body> 태그를 비롯해 <p>, <hn> 태그처럼 텍스트를 사용하는 요소에서 주로 사용함.
기본형: font-family:<글꼴 이름=""> | [<글꼴 이름="">, <글꼴 이름="">]
body { font-family: "맑은 고딕", 돋움, 굴림} /* "맑은 고딕"과 같이 두 단어 이상으로 된 글꼴은 큰따옴표로 묶음 */
웹 문서 전체에 ‘맑은 고딕’이라는 글꼴 적용 -> 없으면 ‘돋움’ 적용 -> 없으면 ‘굴림’ 적용
글자 크기는 font-size 속성으로 조절. 크기 단위는 px(픽셀)이나 pt(포인트) 등으로 지정가능. 백분율도 Ok.
기본형: font-size: <절대 크기=""> | <상대 크기=""> | <크기> | <백분율>
xx-small < x-small < small < medium < large < x-large < xx-large
CSS에선 키워드보다 단위를 사용해서 글자 크기를 직접 지정함.
예전에는 절대 크기 단위인 px(픽셀), pt(포인트)를 많이 사용했지만 모바일 기기까지 고려해야하는 요즘에는
상대크기 단위인 em이나 rem을 많이 사용함. 1em == 16px == 12pt
| 종류 | 설명 |
|---|---|
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정 |
| rem | 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정 |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율값을 지정 |
| pt | 포인트라고 하며, 일반 문서에서 많이 사용 |
백분율은 부모 요소의 글자 크기를 기준으로 지정하는 방법.
백분율로 계산하려면 부모 요소의 글꼴 크기가 font-size: 16px처럼 단위로 표현되어 있어야함.
글자를 이탤릭체로 표시할 때 font-style 속성 사용.
이탤릭체로 바꾸는 속성값은 italic과 oblique가 있는데 웹에서는 주로 italic 사용
| 기본형: font-style: normal | italic | olbique |
글자 굵기를 지정하는 속성은 font-weight으로 웹 문서를 작성할 때 자주 사용함.
미리 만들어진 예약어(normal, bold, bolder)나 숫잣값을 사용해 굵기를 지정 가능함
100~900 사이에서 400은 normal, 700은 bold에 해당함. 숫잣값을 사용하면 글꼴 굵기 미세 조절 가능.
| 기본형: font-weight: normal | bold | bolder | lighter | 100 | 200 | … | 800 | 900 |
사용자 시스템에 없는 글꼴을 다른 글꼴로 대체하는 것이 아니라 그대로 보여주려면 웹 폰트를 사용하면 됨.
웹 폰트를 사용하려면 웹 문서를 작성할 때 글꼴 정보를 함께 저장해야 함 -> 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트 표현 가능.
글꼴은 폰트와 관련됨 / 텍스트 스타일은 글자와 단어, 그리고 글자로 이루어진 문단에 사용함
웹 문서에서 문단이나 제목 등의 텍스트에서 글자색을 바꿀 때 color 속성 사용함
color를 사용할 수 있는 속성값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) 또는 색상 이름임.
웹 문서의 CSS에서 색상을 표현하는 첫 번째 방법은 #ffff00처럼 # 기호 다음에 6자리의 16진수로 표시하는 것.
16진수의 색상값은 #000000(검은색)부터 #ffffff(흰색)까지 표현 가능. 만약 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기 가능함.
CSS3에서는 hsl을 사용해 색상 표기 가능. hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말임.
hsla는 hsl에 alpha(불투명도)를 추가한 것.
예를 들어 빨간색은 hsl(0, 100%, 50%)로 표현 가능. 여기에 알파값을 더해 hsla(0, 100%, 50%, 0.5)라 하면 같은 색을 절반 정도 투명하게 만듦.
red, blue, yellow, black처럼 잘 알려진 영문 색상 이름을 사용하는 것.
rgb는 red, gree, blue의 줄임말.
rgba 또한 hsla처럼 rgb에 alpha(불투명도)를 추가한 것.
rgb 표기법으로 파란색 지정하기 : h1 { color: rgb(0, 0, 255); }
rgba 표기법으로 불투명도 지정하기: h1 { color: rgb(0, 0, 255, 0.5); } 불투명도 0.5 대신 .5 표기 가능
text-align 속성은 문단의 텍스트 정렬 방법을 지정함.
| 기본형: text-align: start | end | left | right | center | justify | match-parent |
| 종류 | 설명 |
|---|---|
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 |
| left | 왼쪽 정렬 |
| right | 오른쪽 정렬 |
| center | 가운데 정렬 |
| justify | 양쪽 정렬 |
| match-parent | 부모 요소를 따라 문단 정렬 |
한 문단이 두 줄을 넘으면 줄 간격이 생성됨. 가독성을 위해 line-height 속성을 이용해 줄 간격 조정 가능.
보통 줄 간격은 글자 크기의 1.5~2배면 적당.
p { font=size: 12px; line-height: 24px; }
p { font=size: 12px; line-height: 2.0; }
p { font=size: 12px; line-height: 200%; } /* 모두 줄 간격이 24px인 경우 */
text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시함.
텍스트에 하이퍼링크를 적용하면 기본적으로 밑줄이 생성되는데 text-decoration 속성을 통해 없앨 수 있음.
···(생략)···
<body>
<h1>text-decoration 속성</h1>
<p style="text-decoration:none">none</p> /* 텍스트에 줄 표시X */
<p style="text-decoration:underline">underline</p> /* 밑줄 표시 */
<p style="text-decoration:overline">overline</p> /* 윗줄 표시 */
<p style="text-decoration:line-through">line through</p> /* 취소선 표시 */
</body>
···(생략)···
CSS를 사용하여 텍스트에 그림자 효과도 추가 가능.
| 기본형: text-shadow: none | <가로 거리=""> <세로 거리=""> <번짐 정도=""> <색상> |
| 종류 | 설명 |
|---|---|
| <가로 거리=""> | 텍스트부터 그림자까지의 가로 거리로 필수 속성. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자 생성 |
| <세로 거리=""> | 텍스트부터 그림자까지의 세로 거리로 필수 속성. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자 생성 |
| <번짐 정도=""> | 그림자가 번지는 정도. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져감(그림자 크게 표시) 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보임. 기본값 0. |
| <색상> | 그림자 색상 지정. 한 가지만 지정 가능. 공백으로 구분해 여러 색상 지정 가능. 기본값은 현재 글자색. |
영문자를 표기할 때 텍스트의 대소 문자를 원하는 대로 변경 가능. text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환.(한글은 X)
| 종류 | 설명 |
|---|---|
| capitalize | 첫 번째 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
| full-width | 가능한 한 모든 문자를 전각 문자로 변환 |
letter-spacing 속성은 글자와 글자 간의 간격 조절 / word-spacing은 단어와 단어 간의 간격 조절
CSS에서는 주로 letter-spacing 속성을 사용해 자간을 조절 함. px, em, 퍼센트(%)로 크깃값 조절함.
순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양 삽입 가능 / 순서 목록에서는 번호 스타일 지정 가능
이때 list-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일 지정 가능
| 종류 | 설명 | 예시 |
|---|---|---|
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, ··· |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01, 02, 03, ··· |
| lower-roman | 로마 숫자 소문자 | ⅰ, ⅱ, ⅲ, ··· |
| upper-roman | 로마 숫자 대문자 | Ⅰ, Ⅱ, Ⅲ, ··· |
| lower-alpha 또는 lower-latin | 알파벳 소문자 | a, b, c, ··· |
| upper-alpha 또는 upper-latin | 알파벳 대문자 | A, B, C, ··· |
| none | 불릿이나 숫자를 없앰 |
list-style-image 속성을 사용해 불릿을 원하는 이미지로 변경 가능함.
| 기본형: list-style-image: <url(이미지 파일 경로)> | none |
list-style-position 속성을 사용하면 불릿이나 번호의 위치를 들여쓰기 가능함. 텍스트 문단 사이에 있는 목록을 더 쉽게 구분 가능.
| 기본형: list-style-position: inside | outside; |
| 종류 | 설명 |
|---|---|
| inside | 불릿이나 번호를 기본 위치보다 안으로 들여씀 |
| outside | 기본값 |
list-style 속성을 사용하면 지금까지 설명한 list-style-type, list-style-image, list-style-position 속성 한꺼번에 표시 가능.
ul {list-style-type: none;} /* 불릿 없애기 */
ul {list-style: none;} /* 속성 줄여서 표시하기 */
ol { list-style-type: lower-alpha;
list-style-position: inside;
} /* 소문자 목록 만들고 들여쓰기 */
ol {list-style: lower-alpha inside;} /*속성 줄여서 표시하기 */
표 제목은 <caption> 태그를 이용해 캡션으로 표시. 캡션은 기본적으로 표 위쪽에 표시되나, caption-side 속성을 통해 표 아래쪽도 가능.
| 기본형: caption-side: top | bottom |
| 종류 | 설명 |
|---|---|
| top | 캡션을 표 윗부분에 표시. 기본값 |
| bottom | 캡션을 표 아랫부분에 표시 |
표 테두리는 border 속성을 사용하는데 표 바깥 테두리, 셀 테두리를 각각 지정함.
표와 셀에 따로 테두리를 지정하면 셀과 셀 사이에 여백이 조금 생성됨. border-spacing 속성을 사용해 여백 조절 가능.
border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같으면 1개만 지정해도 OK
<table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시됨.
이떄 두 줄로 그냥 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성임. <table> 태그에 적용되는 스타일에만 지정하면 됨.
| 종류 | 설명 |
|---|---|
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시 |
| separate | 표와 셀의 테두리를 따로 표시. 기본값. |