DogFootRuler

웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS

7. Text

Zoo_10th 2024. 1. 22.

1. Text

텍스트 스타일링은 웹 페이지에서 텍스트의 가독성을 향상하고 시각적인 효과를 주는 데 중요한 역할을 한다.

 

1-1. 글꼴

1-1-1. 글꼴 선택(font-family)

font-family 속성은 웹페이지에서 텍스트에 사용할 글꼴을 정의할 때 사용하는 속성이다. 여러 글꼴을 우선순위대로 지정할 수 있으며, 브라우저는 사용자의 시스템에 해당 글꼴이 없을 때 다음 글꼴로 대처한다.

p {
  font-family: Arial, Helvetica, sans-serif;
}

 

1-1-2. 웹 폰트 사용

사용자의 컴퓨터 시스템에 글꼴이 설치되지 않았더라도 웹 서버로부터 글꼴을 제공받아 사용할 수 있는 웹 전용 글꼴이다. 웹 폰트를 사용함으로써 시스템 글꼴의 문제를 회피할 수 있다.

웹 폰트 적용 방법

1) 글꼴 파일 포함 :

   - 글꼴 파일을 웹 문서와 함께 제공한다.

   - 글꼴 파일 크기가 크므로 효율적이지 않다

 2) 웹 서버 연결 :

   - 웹 폰트를 호스팅 하는 웹 서버의 주소를 웹 문서에 연결한다.

   - 더 효율적인 방법이다.

 

1-1-3. 구글 폰트 사이트 이용

구글 폰트 사이트에서 다양한 웹 폰트를 무료로 제공하고 있다. 원하는 글꼴을 선택하고 적용하는 방법이다.

 1) 구글 폰트 사이트로 이동한다.

 2) 원하는 언어와 글꼴을 선택한다.

 3) 해당 글꼴을 선택하고, 스타일을 선택한 다음 "[Select this style]"을 클릭한다.

 4) 나타나는 코드를 스타일시트에 추가하여 글꼴을 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>웹 폰트</title>
  <style>
    @import url(
      '<https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap>'
    );

     /* id가 nm인 p 요소에만 적용합니다! */
    p#nm{ font-family: 'Nanum Myeongjo'; }
  </style>
</head>
<body>
  <p>정수 반컵에 에스프레소 샷을 넣고, 얼음을 가득 넣어주세요.</p>
  <p id="nm">정수 반컵에 에스프레소 샷을 넣고, 얼음을 가득 넣어주세요.</p>
</body>
</html>

 

1-2. 텍스트 꾸미기

1-2-1. 글자 크기 조절(font-size)

글자 크기를 조절하여 텍스트를 강조하거나 눈에 띄게 만들 수 있다.

h1 {
  font-size: 36px;
}

 

1-2-2. 글자 두께 조절(font-weight)

글자의 두께를 조절하여 텍스트를 강조할 수 있다. <strong> 태그에 글자를 굵게 표시한다.

strong {
  font-weight: bold;
}

 

1-2-3. 이탤릭체 표시(font-style)

글자를 이탤릭체로 표시하여 강조할 수 있다. <em> 태그에 이탤릭체를 적용한다.

em {
  font-style: italic;
}

 

1-2-4. 텍스트 정렬(text-align)

텍스트를 가운데 정렬하거나 다른 정렬 옵션을 사용하여 레이아웃을 개선할 수 있다. <p> 태그 내의 텍스트를 가운데 정렬한다.

p {
  text-align: center;
}

 

1-2-5. 텍스트 강조 효과(text-decoration)

텍스트에 밑줄, 윗줄 또는 취소선을 추가하여 강조할 수 있다. 

a {
  text-decoration: underline;
}

 

1-3. 색상지정

색상을 변경하고 텍스트의 색상을 지정하는 방법에는 여러가지가 있다.

 

1-3-1. color 속성(영어 단어 사용)

   - 영어 단어로 색상을 표현하는 방식이다.

   - 텍스트의 색상을 변경할 때 가장 간단한 방법은 color 속성을 사용하는 것이다.

   - 예를 들어, p요소의 글자 색을 빨간색으로 지정하려면 아래처럼 사용한다.

p {
  color: red;
}

 

1-3-2. rgb 함수 사용하기

   - rgb 함수는 빛의 3원색(빨강, 초록, 파랑)을 사용하여 색상을 지정하는 방법이다.

   - 빨간색을 rgb 함수로 표현하려면 아래처럼 사용해야 한다.

p {
  color: rgb(255, 0, 0);
}

 

1-3-3. hsl 함수 사용하기

   - hsl 함수는 색조(hue), 채도(saturation), 조도(lightness)를 사용하여 색상을 지정하는 방법이다.

   - 빨간색을 hsl 함수로 표현하려면 아래처럼 사용한다.

p {
  color: hsl(0, 100%, 50%);
}

 

1-3-4. 16진수 값 입력하기

   - 색상을 지정할 때 16진수 값을 사용하는 방법이다.

   - 빨간색을 16진수로 표현하려면 아래처럼 사용한다.

p {
  color: #ff0000;
}

 

1-3-5. opacity 속성(투명도)

   - opacity 속성을 사용하여 글자나 요소의 전체 투명도를 조절할 수 있다.

   - 글자의 투명도를 50%로 설정하려면 아래처럼 사용한다.

p {
  color: red;
  opacity: 0.5;
}

 

1-4. 요소의 유형 변경

1-4-1. CSS의 display 속성

HTML 요소의 표시 방법을 결정하는 중요한 속성 중 하나다. 요소의 유형을 변경하거나 요소의 레이아웃을 조절할 수 있다.

 

1) none : 이 속성값을 사용하면 요소를 화면에 표시하지 않는다. 내용이 보이지 않을 뿐만 아니라 요소가 차지해야 할 공간도 사라진다.

.hidden-element {
  display: none;
}

 

2) block : 요소를 블록 레벨 요소로 만든다. 블록 레벨 요소는 자신이 속한 영역의 가로길이를 통째로 차지하며, 영역이 줄어들면 요소의 가로길이도 줄어든다.

.block-element {
  display: block;
}

 

3) inline : 요소를 인라인 요소로 만든다. 인라인 요소는 콘텐츠의 크기만큼만 공간을 차지하는 요소로, 자신이 표시할 콘텐츠를 위해 필요한 공간 외에는 사용하지 않는다.

.inline-element {
  display: inline;
}

 

 

4) inline-block : 요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가한다. 요소는 인라인처럼 나란히 표시되지만 블록처럼 크기 조절이 가능하다.

.inline-block-element {
  display: inline-block;
}

 

5) flex : 요소를 블록 레벨 요소로 표시하되, 내부 레이아웃 방식을 flex로 변경한다. 이를 사용하면 플렉스 박스 레이아웃을 적용할 수 있다.

 

6) inline-flex : 요소를 인라인 요소로 표시하되, 내부 레이아웃 방식을 flex로 변경한다.

 

1-4-2. flex 레이아웃

CSS에서 요소의 배치와 정렬을 효율적으로 다룰수 있도록 도와주는 레이아웃 방식이다. flex 레이아웃을 사용하려면 부모요소(플렉스 컨테이너)와 그 안에 포함된 자식 요소(플렉스 아이템)를 지정해야 한다.

 

display: flex로 플렉스 컨테이너 생성

 1) display : flex 속성을 부모 요소에 적용하면 그 부모 요소는 플렉스 컨테이너가 된다. 이제 플렉스 컨테이너 안에 있는 자식 요소들을 배치하고 정렬할 수 있다.

.flex-container {
  display: flex;
  flex-direction: row; /* 주축 방향 설정 */
  justify-content: space-between; /* 주축을 따라 요소들 사이의 간격을 최대로 설정 */
  align-items: center; /* 교차축을 따라 요소들을 중앙 정렬 */
}

 

flex-direction으로 주축 설정

 1) flex-direction 속성을 사용하여 주축(main axis)을 설정한다. 주축은 요소들이 배열되는 방향을 나타낸다.

.inline-flex-container {
  display: inline-flex;
  flex-direction: column; /* 주축 방향을 세로로 설정 */
  align-items: flex-start; /* 교차축을 따라 요소들을 시작 부분에 정렬 */
}

  - row : 요소들을 왼쪽에서 오른쪽으로 나열(기본값)

  - row-reverse : 요소들을 오른쪽에서 왼쪽으로 나열

  - column : 요소들을 위에서 아래로 나열

  - column-reverse : 요소들을 아래에서 위로 나열

 

justify-content와 align-items로 정렬

 1) justify-content 속성은 주축(main axis)을 따라 요소들을 정렬한다. 이로서 요소들을 수평 방향으로 정렬할 수 있다.

 2) align-items 속성은 교차축(cross axis)을 따라 요소들을 정렬한다. 이로서 요소들을 수직 방향으로 정렬할 수 있다.

 

flex-grow와 flex-shrink로 요소 크기 조절

 1) flex-grow 속성을 사용하여 요소의 확장 비율을 설정할 수 있다. 이를 통해 요소의 크기가 화면 공간에 따라 조절한다.

 2) flex-shrink 속성은 요소의 축소비율을 설정한다. 이를 사용하면 화면 공간이 부족할 때 요소가 얼마나 줄어들지를 조절할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: row; /* 주축 방향 설정 */
      justify-content: space-between; /* 주축을 따라 요소들 사이의 간격을 최대로 설정 */
      align-items: center; /* 교차축을 따라 요소들을 중앙 정렬 */
    }

    .flex-item {
      flex: 1; /* 모든 요소가 동일한 비율로 확장/축소 */
      padding: 10px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </div>
</body>
</html>
728x90
저작자표시 비영리 변경금지

'웹 서비스 개발(FB,BE,SERVER,DB) > HTML & CSS' 카테고리의 다른 글

9. 동작반응  (0) 2024.01.31
8.CSS_활용  (1) 2024.01.26
6. CSS_Box Model  (0) 2024.01.21
5. CSS (Cascading Style Sheets)  (0) 2024.01.21
4. HTML 멀티미디어  (0) 2024.01.21

댓글

티스토리툴바