[CSS] MDN CSS 정리3

코딩/HTML\CSS\JS

[CSS] MDN CSS 정리3

낫띵온미 2023. 2. 8. 21:05

기본적인 텍스트 및 글꼴 스타일링

글꼴 스타일링

색상

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");
}