기본적인 텍스트 및 글꼴 스타일링
글꼴 스타일링
색상
- color : 요소의 내용 색상 설정
- 텍스트, text-decoration의 밑줄&오버라인
- 모든 CSS 색상 단위 사용 가능
p {
color: red;
}
글꼴 종류
- font-family : 글꼴 지정
- 브라우저는 액세스하는 컴퓨터가 그 글꼴을 사용할 수 있을 경우에만 적용
- 그렇지 않을 경우 default font 사용
p {
font-family: arial;
}
웹 안전 글꼴
- 가장 많이 사용하는 운영체제의 대부분에서 사용 가능
| 이름 | 유형 | 참고 |
| Arial | sans-serif | Helvetica로 대체 |
| Courier New | monospace | 고정폭 로마자, Courier의 대체버전 |
| Georgia | serif | MS |
| Times New Roman | serif | 타임스 보도용 서체, 일부 OS 타임스 등과 같은 글꼴로 대체 가능 |
| Trebuchet MS | sans-serif | 모바일 OS 사용 불가 |
| Verdana | sans-serif |
기본 글꼴
- 일반적인 5가지 글꼴 : serif, sans-serif, monospace, cursive, fantasy
- 브라우저나 운영체제 별로 다를 수 있음
- cursive, fantasy 는 예측하기 어렵기 때문에 신중한 사용 필요
| 용어 | 정의 |
| serif | 문자 끝을 장식하는 짧은 선(=serif) 이 있는 글꼴 |
| sans-serif | serif가 없는 글꼴 |
| monospace | 모든 문자의 너비가 같은 글꼴, code 글꼴로 사용 |
| cursive | handwriting 같은 흘림체 |
| fantasy | 장식용 글꼴 |
글꼴 스택
- 글꼴 사용가능 여부를 보장할 수 없기 때문에 사용
- 여러 글꼴 이름으로 구성된 font-family
- 목록 시작부분부터 사용가능한지 확인하고 적용, 그렇지 않으면 다음 글꼴 적용
- 띄어쓰기 있는 글꼴은 따옴표로 묶어줘야 함
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
글꼴 크기
- 루트인 html의 표준 글꼴 크기는 16px
- 가능한 rem을 사용하여 단순한게 유지하고, container 요소의 글꼴 크기 설정하지 않는게 좋음
- 기본 글꼴 크기를 10px로 설정하여 사용하는 게 간편함
| 단위 | |
| px | 절대적인 높이 지정 |
| em | 부모 요소의 글꼴(M) 크기 = 1em, 까다로울 수 있지만 유지보수가 수월 |
| rem | html에 설정된 글꼴 크기 = 1rem, IE8 이하 지원X |
글꼴 스타일
- font-style : 주로 이탤릭체 적용에 사용
- normal: 기존의 이탤릭체 해제
- italic: 이탤릭체 적용, 불가능하면 기울임으로 시뮬레이션
- oblique: 기울임으로 이탤릭체 시뮬레이션 사용
글꼴 굵기
- font-weight : 굵기 설정
- normal, bold: 일반, 두껍게 설정
- lighter, bolder: 부모 요소의 굵기에서 얇게/두껍게 설정
- 100-900: 숫자로 세밀한 굵기 설정
텍스트 스타일링
대소문자 변경
- text-transform
- none: 변환X
- uppercase: 모든 문자 대문자로 변환
- lowercase: 모든 문자 소문자로 변환
- capitalize: 모든 단어의 첫문자를 대문자로 변환
- full-width: 정사각형 안에 문자를 넣어 동아시아 문자 강제로 정렬
텍스트 꾸미기
- text-decoration
- none: unset
- underline: 텍스트 하단에 밑줄
- overline: 텍스트 상단에 줄
- line-through: 텍스트의 중앙에 줄
- 동시에 설정 : 띄어쓰기로 구분
- text-decoration-line, text-decoration-style, text-decoration-color
p {
text-decoration: line-through red wavy
}
텍스트 그림자
- text-shadow : 단위는 주로 px 사용
- 수평 그림자 : 좌우 그림자, 반드시 포함
- 수직 그림자 : 상하 그림자, 반드시 포함
- 블러 반경 : 높을수록 넓게 번짐, 생략=0
- 그림자 색상 : CSS 색상 모두 가능, 생략=black
p {
text-shadow: 4px 4px 5px red;
}- 다중 그림자 : 하나의 텍스트의 여러개의 그림자 적용, 쉼표로 구분
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
텍스트 레이아웃
텍스트 정렬
- text-align : 포함된 박스 내에 어떻게 텍스트를 정렬시킬 것인지
- left / right / center
- justify: 단어 사이의 간격 변경하여 줄 채움
텍스트 높이
- line-height : 텍스트의 줄의 높이 설정
- 주로 배수 사용, 단위로 설정도 가능함
- 1.5 - 2 정도가 가독성이 좋음
문자와 단어의 여백
- letter-spacing : 문자 사이에 여백 설정
- word-spacing : 단어 사이에 여백 설정
- 가독성을 위해 추가할 수 있으며 모든 단위 사용가능
p::first-line {
letter-spacing: 2px;
word-spacing: 4px;
}
그외 속성
글꼴 스타일:
- font-variant : 작은 문자를 읽기 쉽도록 대체
- font-kerning : 문자 고정
- font-feature-settings : 다양한 문자 모양 ON/OFF
텍스트 스타일:
- text-indent : 들여쓰기
- text-overflow : 오버플로우된 콘텐츠를 사용자에게 보여줌
- white-space : 내부 공백 및 줄바꿈 처리 방법 정의
- word-break : 단어 내 줄바꿈여부 지정
- direction : 텍스트 방향 지정
- line-break : 동아시아어 줄바꿈 완화/강화
글꼴 약식 (shorthand)
- 단축속성
- font : font-style, font-variant, font-weight, font-stretch, font-size, line-height, font-family 한번에 지정
- font-size와 font-family만 반드시 필요
- 글꼴 크기와 선 높이 사이에 슬래시로 구분
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
목록 스타일링
목록 여백 다루기
- defaults
- <p> : 상하 margin 1em
- <ul>, <ol> : 상하 margin 1em, 왼쪽 padding 2.5em
- <li> : 여백 없음
- <dl> : 상하 margin 1em
- <dd> : 왼쪽 margin 2.5em
/* General styles */
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 10px;
}
h2 {
font-size: 2rem;
}
ul,ol,dl,p {
font-size: 1.5rem;
}
li, p {
line-height: 1.5;
}
/* Description list styles */
dd, dt {
line-height: 1.5;
}
dt {
font-weight: bold;
}
dd {
margin-bottom: 1.5rem;
}
리스트별 스타일
- list-style-type : bullet의 타입을 지정
- list-style-position : bullet을 목록 내부/외부에 표시할지 설정
- list-style-image : bullet을 이미지로 설정
Bullet 스타일
- list-style-type
- 어떤 타입의 bullet 을 사용할 건지 지정
- <ul>
- none : 없음
- disc : 기본, 채운 원
- circle : 빈 원
- square : 채운 네모
- <ol>
- decimal : 숫자
- trad-chinese-informal : 한자
- lower/upper-roman : 로마자 대/소문자
- lower/upper-alpha/latin : 영어 대/소문자
- korean-hangul-formal : 가나다
- [문자열] : "-"로 지정 가능
- [@costom-style] : @costom-style 과 매칭되면 사용 가능
ol {
list-style-type: upper-roman;
}
Bullet 위치
- list-style-position : bullet을 목록 내부/외부에 표시할지 설정
- default = outside
ol {
list-style-position: inside;
}
Bullet 이미지
- list-style-image : bullet을 이미지로 설정
- 위치와 사이즈 등을 조정하는데에 제한적
- background 속성을 사용하는 것이 나음.
ul {
list-style-image: url(star.svg);
}ul {
padding-left: 2rem;
list-style-type: none;
}
ul li {
padding-left: 2rem;
background-image: url(star.svg);
background-position: 0 0;
background-size: 1.6rem 1.6rem;
background-repeat: no-repeat;
}
list-style 축약형
- 속성을 어느 하나만 가져도 사용 가능
ul {
list-style-type: square;
list-style-image: url(example.png);
list-style-position: inside;
}ul {
list-style: square url(example.png) inside;
}
목록 카운팅 제어
- start in HTML : 1보다 큰 숫자에서 카운팅 가능
<ol start="4">
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>- reserved in HTML : 내림차순으로 카운팅 가능
<ol start="4" reversed>
<li>Toast pita, leave to cool, then slice down the edge.</li>
<li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li>Wash and chop the salad.</li>
<li>Fill pita with salad, hummus, and fried halloumi.</li>
</ol>- value in HTML : <li>에 특정 숫자 지정 가능
<ol>
<li value="2">Toast pita, leave to cool, then slice down the edge.</li>
<li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
@counter-style
- 직접 카운팅 스타일 정의
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style: thumbs;
}
링크 스타일링
링크 상태
- Link : 정의된 상태, 의사 클래스 :link
- Visited : 방문된 상태, 의사 클래스 :visited
- Hover : 마우스 포인터로 가리킨 상태, 의사클래스 :hover
- Focus : 키보드 등으로 선택(focus)된 상태, 의사클래스 :focus
- Active : 클릭 등으로 활성화된 상태, 의사클래스 :active
디폴트 스타일
- 밑줄, color = blue
- visited : color = purple
- hover : 마우스 포인터 손모양으로 바꿈
- focus : 링크 주위에 윤곽선
- active : color = red
- 링크에는 밑줄을 사용, 적어도 강조 표시
- hover/focuse 됐을 때 반응하도록 만들 것
- active 됐을 때 살짝 다르게 반응하도록 만들 것
- color : 텍스트 색상
- cursor : 마우스 포인터 스타일, 끄지 말 것
- outline : 텍스트의 윤곽 (배경, 공간차지X)
링크 스타일링
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}- 순서 : 첫번째 규칙이 후속되기 때문에 중요
- 기본 스타일과 너무 다르지 않아야 함
- 혹은 링크에 아이콘 사용하기
링크를 버튼으로 스타일 지정
<nav class="container">
<a href="#">Home</a>
<a href="#">Pizza</a>
<a href="#">Music</a>
<a href="#">Wombats</a>
<a href="#">Finland</a>
</nav>body,
html {
margin: 0;
font-family: sans-serif;
}
.container {
display: flex;
gap: 0.625%;
}
a {
flex: 1;
text-decoration: none;
outline: none;
text-align: center;
line-height: 3;
color: black;
}
a:link,
a:visited,
a:focus {
background: palegoldenrod;
color: black;
}
a:hover {
background: orange;
}
a:active {
background: darkred;
color: white;
}- display: flex : 수직 중앙, 같은 너비와 높이
- gap : flex 항목 사이의 간격
- flex: 1 : 부모 박스의 모든 공간 사용
웹 글꼴
링크 상태
- CSS 사용하여 액세스할 때 웹사이트와 함께 다운로드할 글꼴 지정 가능
- 모든 브라우저가 특정 글꼴 표시 가능
- woff, woff2 형식 파일 지원
@font-face {
font-family: "myFont";
src: url("myFont.woff2");
}
'코딩 > HTML\CSS\JS' 카테고리의 다른 글
| [CSS] MDN 과제: 학교 커뮤니티 홈페이지 만들기 ("Assessment wanted for Typesetting a community school homepage") (0) | 2023.03.04 |
|---|---|
| [CSS] MDN 과제: 멋진 박스 만들기 (Assessment wanted for A cool-looking box) (0) | 2023.02.03 |
| [CSS] MDN 과제: 이쁜 레터 모양 종이 만들기 (Assessment wanted for Creating fancy letterheaded paper) (0) | 2023.02.03 |
| [CSS] MDN 과제: 기본적인 CSS이해 (0) | 2023.02.03 |
| [CSS] MDN 정리2 (0) | 2023.01.04 |