2023-10-28
텍스트 꾸미기
기본적인 텍스트 및 글꼴 스타일링
글꼴스택
font-family 를 사용하여 여러글꼴을 나열할 수 있다. 이경우 브라우저는 목록 시작부분에서 시작하여 해당 글꼴이 시스템에서 사용가능한지 확인후 해당글꼴이 있으면 선택한 요소에 적용되지만 그렇지 않으면 다음글꼴로 이동합니다.
글꼴크기
텍스트 크기를 조정하는데 사용하는 일반적인 단위
•
px (픽셀) : 원하는 텍스트 높이의 픽셀수이다. 이것은 절대단위이며 거의 모든 상황에서 페이지의 글꼴에 대해 동일한 최종계산값을 생성한다.
•
em : 1em 은 우리가 스타일링 하고 있는 현재 요소의 부모요소에 설정된 글꼴 크기와 같다. 사용에 익숙해지면 매우 자연스럽고 em 을 사용하여 텍스트뿐 아니라 모든 크기를 조정할수있다. 전체 웹사이트 크기를 조정할 수 있으므로 유지관리가 쉽다.
•
rem : 1rem 은 부모요소가 아닌 문서의 루트요소(html) 에 설정된 글꼴 크기와 같다는 점을 제외하면 em 과 동일하게 작동한다. 수학계산을 통해 쉽게 계산할 수 있지만 internet Explorer8 이하 에서는 rem 이 지원되지않으므로 이전 브라우저를 사용해야한다면 em 또는 px 를 사용해야한다.
찾아보기
❗️font-size 는 상위요소에서 상속된다. 표준은 16px 사이즈이며 다른요소는 기본크기가 다를수있다 예를들어 <h1> 요소는 2em 으로 최종크기가 32px 이다.
글꼴스타일, 글꼴두께, 텍스트변형 및 텍스트 장식
font-style (이탤릭체를 끄고 켜는데 사용한다.)
•
nomal : 텍스트를 일반글꼴로 설정함 (이탤릭체를끈다.)
•
italic : 사용 가능한경우 글꼴의 기울임 버전을 사용하도록 텍스트를 설정한다. 사용할수 없는 경우 기울임꼴 대신 기울임꼴 시뮬레이트 한다.
•
oblique : 일반버전을 기울여 만든 이탤릭체 글꼴의 시뮬레이션 버전을 사용하여 텍스트를 설정한다.
font-weight (텍스트의 굵기를 설정한다.)
•
nomal/bold : 일반 및 굵은 글꼴 두께
•
lighter/bolder : 현재요소의 굵기를 부모요소의 굵기보다 한단계 더 가볍거나 무겁게 설정한다.
•
100~900 : 위의 키워드들 보다 더 세분화된 제어를 제공하는 숫자굵기 값이다.
text-transform(글꼴을 변환하도록 설정할 수 있다.)
•
none : 변형을 방지한다.
•
uppercase : 모든 텍스트를 대문자로 변환한다.
•
lowercase : 모든 텍스트를 소문자로 변환한다.
•
capitalize : 첫 글자를 대문자로 모든 단어를 변환한다.
•
full-width : 모노스페이스 글꼴과 유사함 고정너비 사각형 안에 작성되도록 모든 글리프를 변환하여 정렬할 수 있다.
text-decoration(글꼴에 대한 텍스트 장식을 설정/해제 한다.)
•
none : 이미존재하는 모든 텍스트 장식을 해제한다.
•
underline : 텍스트의 밑줄을 긋는다.
•
overline : 텍스트에 오버라인을 제공한다.
•
line-through : 텍스트 위에 취소선을 그린다.
text-decoration 은 한번에 여러값을 허용할수 있다. (text-decoration-line, text-decoration-style, text-decoration-color 의 속기속성이다.) ex) text-decoration: line-through red wavytext-shadow
일반적으로 px값을 적용시켜 사용된다. 값이 높을수록 그림자가 더 넓게 분산된다. 0을 할당시 흐림이 없음을 의미하고 기본적으로 black색상이 적용된다. 양수값을 적용시 오른쪽과 아래로 이동하지만 음수값 적용시 왼쪽과 오른쪽으로 이동할수있다.
텍스트 레이아웃
텍스트정렬
text-align 속성은 포함하는 컨텐츠 상자 내에서 텍스트 방법을 제어하는데 사용한다.
•
justify : 모든 텍스트 줄이 동일한 너비가 되도록 단어 사이에 간격을 다양하게 조정하여 텍스트를 펼친다. 긴 단어가 많은 단락에 사용시 부작용이 있을수 있다. 그 경우 hyphens과 같은 다른것을 함께 사용하여 긴 단어중 일부를 여러줄로 나누는것도 고려해야한다.
문자 및 단어 간격
letter-spacing 및 word-spacing 속성을 사용하면 텍스트에서 문자와 단어 사이의 간격을 설정할 수있다. 특정 모양을 얻거나 특히 조밀한 글꼴의 가독성을 향상시키는 용도를 찾을수있다. px단위를 사용한다.
목록 스타일링
목록별 스타일
<ul> 또는 <ol> 요소에 설정할수 있는 3가지 속성
•
list-style-type : 목록에 사용할 글머리 기호 유형을 설정한다. 정렬되지 않은 목록의 경우 사각형 또는 원형 글머리기호로, 순서가 지정된 목록의 경우 숫자, 문자 또는 로마숫자로 표시한다.
•
list-style-position : 글머리 기호가 목록항목 내부에 표시되는지 각 항목시작전에 목록 항목 외부에 표시되는지 설정한다. 기본값은 outside 이다. inside로 설정하면 글머리기호가 줄 안쪽에 표시된다.
•
list-style-image : 간단한 사각형이나 원이아닌 글머리 기호에 대한 사용자 지정 이미지를 사용할수있다.
목록스타일 속기
위언급된 3가지 속성은 list-style 이라는 단일 속기속성 을 사용하여 설정할수 있다. 값은 임의의 순서로 나열할수 있고 1개, 2개 또는 3개 모두를 사용할수있다.
목록 계산 제어
start
때로는 순서가 지정된 목록에서 다르게 계산하고 싶을수 있다. start 속성을 사용하여 1이 아닌 숫자부터 시작하거나 거꾸로 세거나 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>
HTML
복사
reversed
목록을 위로 카운트 하는 대신 카운트 다운을 시작한다. (reversed 속성값 보다 더 많은 항목이 있는경우 0이된 다음 음수값이 된다.)
<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>
HTML
복사
value
value 속성을 사용하면 목록 항목을 특정 숫자값 으로 사용할 수 있다.
<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</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
</ol>
HTML
복사
링크 스타일링
기본스타일은 1990년대 중반 브라우저 초창기 때와 거의 동일하다. 스타일이 달라지면 많은 사람들이 혼란스러워할것이고 사용자들은 이러한 동작을 알고있고 기대한다. 스타일 지정은 예상되는 동작에서 너무 멀리 벗어나지 말아야 한다.
링크에 아이콘 포함하기
a[href^=”http”] 는 <a> 요소를 선택하지만 값이 “http” 로 시작하는 href 속성이 있는 경우에만 선택된다. background 속성을 사용하여 아이콘을 적용시킬수 있다.
