IT 강좌 CSS 기초 022_텍스트, 글꼴, 링크
텍스트
CSS 텍스트 제어는 웹 페이지에서 텍스트 정보를 더 잘 표현하고 시각적 효과를 향상시키는 데 도움이 됩니다.
들여쓰기
텍스트의 첫 줄 들여쓰기를 설정하는 데 사용되며, 단락 첫 줄 들여쓰기에 적합합니다. 인라인 요소에는 사용을 피하세요. 속성은 절대값 또는 상대값을 받습니다. 절대값 단위에는 픽셀(px), 인치(in), 센티미터(cm), 밀리미터(mm) 등이 있고, 상대값 단위에는 em, rem, vw, vh 등이 있습니다.
예시:
p { text-indent: 2em;}효과:
쓰기 모드
CSS의 쓰기 모드는 텍스트 배치 방향을 말하며, 수평, 수직 및 혼합 모드를 포함합니다. 실제로 페이지에서 블록 레벨 요소의 표시 방향을 설정합니다 — 위에서 아래로, 오른쪽에서 왼쪽으로, 또는 왼쪽에서 오른쪽으로. 이것이 텍스트 방향을 결정합니다.
horizontal-tb: 블록 흐름이 위에서 아래로. 해당 텍스트 방향은 가로입니다.vertical-rl: 블록 흐름이 오른쪽에서 왼쪽으로. 해당 텍스트 방향은 세로입니다.vertical-lr: 블록 흐름이 왼쪽에서 오른쪽으로. 해당 텍스트 방향은 세로입니다.
예시:
body { writing-mode: vertical-rl;}효과:
쓰기 모드를 전환하면 블록과 인라인 텍스트 방향도 변경됩니다. horizontal-tb 쓰기 모드에서 블록 방향은 위에서 아래로의 가로 방향이고, vertical-rl 쓰기 모드에서 블록 방향은 오른쪽에서 왼쪽으로의 세로 방향입니다. 블록 차원은 항상 페이지 쓰기 모드에서 블록의 표시 방향을 나타냅니다. 인라인 차원은 항상 텍스트 방향을 나타냅니다.
이 그림은 수평 쓰기 모드에서의 두 차원을 보여줍니다.
이 그림은 수직 쓰기 모드에서의 두 차원을 보여줍니다.
텍스트 방향
direction 속성을 사용하여 텍스트 읽기 방향을 설정합니다: 왼쪽에서 오른쪽(ltr) 또는 오른쪽에서 왼쪽(rtl).
다국어 웹사이트에 적합하며, 텍스트 언어에 따라 읽기 방향을 설정합니다. 일부 언어(아랍어 등)는 가로로 쓰지만 오른쪽에서 왼쪽으로 읽습니다.
예시:
html { direction: rtl;}효과:
텍스트 장식
text-decoration 속성을 사용하여 텍스트의 선 장식 효과를 설정합니다.
- none: 선 없음
- overline: 윗줄
- underline: 밑줄
- line-through: 취소선
예시:
<p style="text-decoration: none;">텍스트 선 없음</p><p style="text-decoration: overline;">윗줄이 있습니다</p><p style="text-decoration: underline;">밑줄이 있습니다</p><p style="text-decoration: line-through;">취소선이 있습니다</p>효과:
텍스트 정렬
텍스트의 수평 정렬 방식을 설정합니다.
- left: 텍스트 왼쪽 정렬, 대부분 언어의 기본값.
- center: 텍스트 수평 가운데 정렬.
- right: 텍스트 오른쪽 정렬.
- justify: 텍스트 양쪽 정렬, 각 줄 사이에 추가 공백을 넣어 채웁니다. 텍스트 배치와 컨테이너 너비(텍스트가 짧거나, 공백이 부족하거나, 줄 수가 적거나, 단일 언어)에 따라 양쪽 정렬 효과가 쉽게 보이지 않을 수 있습니다.
- justify-all(드물게 사용): justify와 유사하지만 줄 시작과 끝에 추가 공백을 균등하게 분배합니다.
- start: 브라우저의 텍스트 방향에 따라 시작점(보통 왼쪽)에 정렬.
- end: 브라우저의 텍스트 방향에 따라 끝점(보통 오른쪽)에 정렬.
예시:
<p style="text-align: left;">이 텍스트는 왼쪽 정렬입니다</p><p style="text-align: right;">이 텍스트는 오른쪽 정렬입니다</p><p style="text-align: center;">이 텍스트는 가운데 정렬입니다</p>효과:
줄 높이
line-height 속성을 사용하여 텍스트 줄 사이의 높이를 설정할 수 있습니다. 글꼴 크기와 디자인 요구 사항에 따라 줄 높이를 조정하면 가독성을 향상시킬 수 있습니다.
예시:
<p>이것은 일반 줄 높이입니다 <br>이것은 일반 줄 높이입니다</p><p style="line-height: 3;">이 텍스트의 줄 높이를 확인하세요 <br>이 텍스트의 줄 높이를 확인하세요</p>효과:
간격
텍스트 내용 사이의 간격을 설정합니다.
letter-spacing글자, 한자, 숫자 사이의 간격을 설정합니다.word-spacing단어 사이의 간격을 설정합니다(공백 양쪽의 문자).
예시:
<p style="letter-spacing: 10px;">내 텍스트 간격 CSS를 확인하세요</p><p style="word-spacing: 10px;">내 텍스트 간격 CSS 123을 확인하세요</p>효과:
줄 바꿈
텍스트 줄 바꿈 방식을 제어합니다.
word-wrap: 주로 긴 단어나 URL의 줄 바꿈 방식을 제어하며, 영어 시나리오에 더 적합합니다.
normal(기본값): 일반 줄 바꿈 규칙을 따르며, 단어 내 줄 바꿈을 허용하지 않습니다.break-word: 단어 내 줄 바꿈을 허용하며, 긴 단어나 URL을 강제로 줄 바꿈할 수 있습니다.
예시:
.base{ background: #d7d8d9; width: 60px;}.example1{ word-wrap: normal;}.example2{ word-wrap: break-word;} <p class="base example1">줄 바꿈이 어떻게 되는지 보세요 HelloCSS Hello-CSS</p> <p class="base example2">줄 바꿈이 어떻게 되는지 보세요 HelloCSS Hello-CSS</p>효과:
white-space: 요소 내부의 공백 문자 처리 방식을 제어하며, 공백, 줄 바꿈 문자 등을 포함합니다.
normal(기본값): 공백 문자를 정상 처리하고, 연속 공백을 병합하며, 줄 바꿈 문자에 따라 줄 바꿈합니다.nowrap: 텍스트 줄 바꿈을 허용하지 않으며, 줄 바꿈 문자를 무시합니다.pre: 공백 문자를 유지하고, 연속 공백을 병합하지 않으며, 텍스트를 소스 코드 형식대로 표시합니다.pre-line: 줄 바꿈 문자를 유지하고, 연속 공백을 병합하며, 다른 공백은 정상 규칙대로 처리합니다.pre-wrap: 공백 문자를 유지하고, 연속 공백을 병합하며, 줄 바꿈 문자를 유지합니다.
예시:
.base{ background: #d7d8d9; width: 60px;}.example1{ white-space: normal;}.example2{ white-space: nowrap;}.example3{ white-space: pre;} <p class="base example1">줄 바꿈이 어떻게 되는지 보세요 HelloCSS Hello-CSS</p> <p class="base example2">줄 바꿈이 어떻게 되는지 보세요 HelloCSS Hello-CSS</p> <p class="base example3">줄 바꿈이 어떻게 되는지 보세요 HelloCSS Hello-CSS</p>효과:
그림자
텍스트에 하나 이상(쉼표로 구분)의 그림자 효과를 추가하여 가독성을 향상시키거나 독특한 디자인 효과를 만들 수 있습니다.
h-shadow: 수평 그림자 위치. 양수(오른쪽 이동) 또는 음수(왼쪽 이동)가 될 수 있습니다.v-shadow: 수직 그림자 위치. 양수(아래 이동) 또는 음수(위 이동)가 될 수 있습니다.blur: 선택 사항. 그림자의 흐림 정도를 나타내며, 값이 클수록 더 흐려집니다. 생략할 수 있습니다.color: 그림자 색상. 구체적인 색상값, 키워드 또는 RGBA 값이 될 수 있습니다.
예시:
<p style="text-shadow: 2px 2px black;">내 그림자를 확인하세요</p><p style="text-shadow: 1px 1px 1px red;">내 그림자를 확인하세요</p><p style="text-shadow: 3px 3px 5px darkgrey;">내 그림자를 확인하세요</p><p style="text-shadow: 2px 2px 2px black, -2px -2px 2px white;">내 그림자를 확인하세요</p>효과:
변환
텍스트의 대소문자 변환 효과를 제어합니다.
none: 기본값, 원래 대소문자를 유지합니다.capitalize: 각 단어의 첫 글자를 대문자로 변환합니다.uppercase: 모든 텍스트를 대문자로 변환합니다.lowercase: 모든 텍스트를 소문자로 변환합니다.
예시:
<p style="text-transform: none;">변환이 어떻게 되는지 보세요 hello CSS</p><p style="text-transform: capitalize;">변환이 어떻게 되는지 보세요 hello CSS</p><p style="text-transform: uppercase;">변환이 어떻게 되는지 보세요 hello CSS</p><p style="text-transform: lowercase;">변환이 어떻게 되는지 보세요 hello CSS</p>효과:
텍스트 오버플로
CSS에서 overflow 속성을 사용하여 텍스트 오버플로를 처리할 수 있습니다.
- visible: 텍스트가 넘치지 않고 완전히 표시됩니다.
- hidden: 텍스트가 넘칠 때 숨겨집니다.
- scroll: 텍스트가 넘칠 때 스크롤바가 표시되어 사용자가 스크롤하여 전체 내용을 볼 수 있습니다.
- auto: 텍스트가 넘칠 때 요소의 너비와 높이에 따라 스크롤바 표시 여부를 결정합니다.
예시:
.base{ white-space: nowrap; background: #d7d8d9; width: 120px;}.example1{ overflow: visible;}.example2{ overflow: hidden;}.example3{ overflow: scroll;}.example4{ overflow: auto;} <p class="base example1">내 텍스트 내용이 넘치는지 확인하세요</p> <p class="base example2">내 텍스트 내용이 넘치는지 확인하세요</p> <p class="base example3">내 텍스트 내용이 넘치는지 확인하세요</p> <p class="base example4">내 텍스트 내용이 넘치는지 확인하세요</p>효과:
글꼴
글꼴을 제어하고 정의하는 방법은 웹 디자인의 중요한 부분입니다.
글꼴 패밀리
font-family 속성으로 글꼴을 정의합니다. font-family는 하나의 글꼴을 지정할 수 있으며, 여러 대체 글꼴을 제공하는 것이 좋습니다. 브라우저는 우선순위에 따라 이 글꼴들을 순서대로 시도하여 적합한 사용 가능한 글꼴을 찾습니다. 글꼴 이름에 공백, 특수 문자 또는 중국어 문자가 포함된 경우 따옴표로 감싸는 것이 좋습니다. 웹 글꼴 서비스를 사용할 수 있으며, 글꼴 저작권에 주의하세요.
예시:
<p style="font-family: Arial, sans-serif;">hello CSS hello CSS</p><p style="font-family: Gabriola; ">hello CSS hello CSS</p>효과:
크기
CSS에서 글꼴 크기는 font-size 속성으로 설정할 수 있습니다.
텍스트 글꼴 크기를 설정하는 데 사용됩니다. 글꼴 크기는 절대값 또는 상대값으로 지정할 수 있습니다.
절대값을 사용하면 글꼴 크기가 고정되어 화면 해상도 변화에 따라 변하지 않습니다. 절대값 단위에는 픽셀(px), 인치(in), 센티미터(cm), 밀리미터(mm) 등이 있습니다.
상대값을 사용하면 글꼴 크기가 부모 요소의 글꼴 크기에 상대적입니다. 상대값 단위에는 em, rem, vw, vh 등이 있습니다.
키워드를 사용하여 글꼴 크기를 지정하면 가독성과 일관성을 향상시킬 수 있습니다. 키워드에는 xx-small, x-small, small, medium, large, x-large, xx-large가 있습니다.
예시:
body { font-size: 16px;}반응형 디자인:
- 반응형 디자인에서 글꼴 크기는 상대적이어야 하며, 다양한 화면 크기와 장치에서 좋은 읽기 경험을 보장합니다.
접근성:
- 글꼴 크기가 접근성 표준을 충족할 만큼 충분히 큰지 확인하세요. 본문 텍스트에는 최소 16px을 사용하는 것이 좋습니다.
글꼴 단위 선택:
- 상대 단위(em, rem, %)를 사용하면 브라우저에서 사용자의 글꼴 크기 기본 설정에 더 잘 적응하여 웹사이트의 접근성을 높입니다.
줄 높이 설정:
- 글꼴 크기에 따라 적절한 줄 높이를 설정하여 텍스트 가독성을 향상시킵니다. 일반적으로 줄 높이는 글꼴 크기의 1.4~1.6배로 설정할 수 있습니다.
굵기
CSS에서 글꼴 굵기는 font-weight 속성으로 설정할 수 있습니다.
normal: 기본 글꼴 굵기.bold: 굵은 글꼴.bolder: 부모 요소보다 더 굵은 글꼴.lighter: 부모 요소보다 더 가는 글꼴.- 숫자값: 숫자값으로 글꼴 굵기를 설정하며, 범위는 보통 100에서 900입니다.
예시:
<div style="font-weight: normal;">기본 글꼴 굵기</div>
<div style="font-weight: bold;"> 굵은 글꼴 <div style="font-weight: bolder;">부모 요소보다 더 굵은 글꼴</div></div>
<div style="font-weight: 700;"> 숫자값으로 굵게 한 글꼴 <div style="font-weight: lighter;">부모 요소보다 더 가는 글꼴</div></div>효과:
스타일
CSS에서 글꼴 스타일은 font-style 속성으로 설정할 수 있습니다.
normal: 기본 글꼴 스타일.italic: 이탤릭체, 글꼴 파일에서 전용으로 디자인된 이탤릭 효과를 사용합니다.oblique: 기울임체, 이탤릭과 유사합니다. 글꼴 파일에 전용 이탤릭 디자인이 없는 경우, 일반 글꼴을 강제로 기울입니다.
예시:
<div style="font-style: normal;">기본 글꼴 스타일 123 ABC</div><div style="font-style: italic;">이탤릭 스타일 123 ABC</div><div style="font-style: oblique;">기울임 스타일 123 ABC</div>효과:
색상
CSS에서 글꼴 색상은 color 속성으로 설정할 수 있습니다.
- 미리 정의된 색상 이름: 예:
red,green,blue등. - 16진수 색상값: 예:
#FF0000,#00FF00,#0000FF등. - RGB, RGBA 색상값: 예:
rgb(255, 0, 0),rgba(0, 255, 0, 0.5)등. - HSL, HSLA 색상값: 예:
hsl(0, 100%, 50%),hsla(120, 100%, 50%, 0.7)등.
예시:
<div style="color: blue;">글꼴 색상</div><div style="color: #ff6a00;">글꼴 색상</div><div style="color: rgba(0, 128, 0);">글꼴 색상</div><div style="color: rgba(0, 128, 0, 0.5);">글꼴 색상</div><div style="color: hsla(0, 100%, 50%);">글꼴 색상</div><div style="color: hsla(0, 100%, 50%, 0.7);">글꼴 색상</div><div style="color: transparent;">글꼴 색상</div>효과:
링크
CSS에서 color 속성을 사용하여 링크(하이퍼링크)의 글꼴 색상을 설정할 수 있습니다.
링크 색상 설정
- a - 전역 링크 색상 설정
- a:link - 일반, 방문하지 않은 링크
- a:visited - 사용자가 이미 방문한 링크
- a:hover - 사용자가 마우스를 링크 위에 올렸을 때
- a:active - 링크가 클릭되는 순간
예시:
/* 전역 링크 */a { color: #3498db; /* 파란색 */}
/* 방문하지 않은 링크 */a:link { color: #3498db; /* 파란색 */}
/* 방문한 링크 */a:visited { color: #884dff; /* 보라색 */}
/* 마우스 호버 시 링크 */a:hover { color: #ff6600; /* 주황색 */}
/* 링크 클릭 시 색상 */a:active { color: #ff0000; /* 빨간색 */}링크 밑줄 설정
예시:
a { text-decoration: none; /* 밑줄 제거 */}
a:hover { text-decoration: underline; /* 마우스 호버 시 밑줄 표시 */}