HTML CSS 문단(paragraph) 관련 스타일 정리

안녕하세요. 오늘은 HTML/CSS 문단 관련 스타일을 정리하겠습니다.

HTML/CSS를 사용하여 문단(paragraph) 요소에 스타일을 적용하는 방법을 정리해 드리겠습니다. 문단 요소는 ‘<p>’ 태그를 사용하여 표현하며, 이 요소에 다양한 스타일을 적용할 수 있습니다.

01. Text Align (텍스트 정렬)

text-align 속성은 요소 내의 텍스트를 가로 방향으로 정렬하는 방법을 지정합니다.

• left: 텍스트를 왼쪽으로 정렬합니다. (기본값)
• right: 텍스트를 오른쪽으로 정렬합니다.
• center: 텍스트를 가운데로 정렬합니다.
• justify: 텍스트를 양쪽 맞춤으로 정렬합니다.

예제:

.text-center {
    text-align: center;  /* 텍스트 가운데 정렬 */
}

02. Vertical Align (수직 정렬)

vertical-align 속성은 인라인 요소의 수직 정렬을 설정합니다.

• baseline: 요소의 기본 베이스라인에 맞춥니다. (기본값)
• top: 요소를 상단에 정렬합니다.
• middle: 요소를 중앙에 정렬합니다.
• bottom: 요소를 하단에 정렬합니다.

예제:

.vertical-middle {
    vertical-align: middle;  /* 수직 가운데 정렬 */
}

03. Text Indent (들여쓰기)

text-indent 속성은 문단의 첫 줄 들여쓰기를 설정합니다.

예제:

.indent-first-line {
    text-indent: 20px;  /* 첫 줄 20px 들여쓰기 */
}

04. Word Wrap (단어 줄 바꿈)

word-wrap 속성은 긴 단어 또는 URL이 줄 넘김 없이 자동으로 개행되도록 설정합니다.

• normal: 단어나 URL을 자동으로 개행하지 않습니다. (기본값)
• break-word: 긴 단어나 URL을 강제로 개행하여 줄을 바꿉니다.

예제:

.wrap-words {
    word-wrap: break-word;  /* 긴 단어나 URL 자동 줄 바꿈 */
}

05. Word Break (단어 나누기)

word-break 속성은 텍스트 줄 바꿈 시 단어를 나누는 방식을 설정합니다.

• normal: 단어를 중간에서 나누지 않습니다. (기본값)
• break-all: 단어를 필요한 경우 어디서든 나누어 줄 바꿈을 합니다.

예제:

.break-words {
    word-break: break-all;  /* 단어를 나누어 줄 바꿈 */
}

06. White Space (공백 처리)

white-space 속성은 요소 내의 공백과 줄 바꿈을 어떻게 처리할지를 지정합니다.

• normal: 공백을 한 칸으로 처리하고, 연속된 공백과 줄 바꿈을 하나로 합니다. (기본값)
• nowrap: 공백과 줄 바꿈을 무시하고 한 줄로 표시합니다.
• pre: 공백과 줄 바꿈을 그대로 유지합니다.

예제:

.no-wrap {
    white-space: nowrap;  /* 공백과 줄 바꿈 무시 */
}

07. Text Overflow (텍스트 넘침 처리)

text-overflow 속성은 텍스트가 요소를 넘칠 때 처리 방법을 설정합니다.

• clip: 텍스트를 자르고 생략 기호(ellipsis)를 표시하지 않습니다.
• ellipsis: 텍스트를 자르고 생략 기호(…)를 표시합니다.

예제:

.overflow-ellipsis {
    text-overflow: ellipsis;  /* 텍스트가 넘칠 경우 생략 (...) 표시 */
    overflow: hidden;         /* 넘친 부분 감춤 */
    white-space: nowrap;      /* 한 줄로 표시 */
}

08. Display (표시 방법)

display 속성은 요소의 표시 방법을 설정합니다.

• block: 요소를 블록 수준 요소로 표시합니다.
• inline: 요소를 인라인 요소로 표시합니다.
• inline-block: 요소를 인라인 블록 요소로 표시합니다.
• none: 요소를 숨깁니다.

예제:

.display-block {
    display: block;  /* 블록 요소로 표시 */
}

09. Visibility (가시성)

visibility 속성은 요소의 가시성을 설정합니다.

• visible: 요소를 보이게 합니다. (기본값)
• hidden: 요소를 숨깁니다.

예제:

.hidden {
    visibility: hidden;  /* 요소를 보이지 않게 함 */
}

10. Overflow (넘침 처리)

overflow 속성은 요소의 내용이 넘칠 때 처리 방법을 설정합니다.

• visible: 넘친 내용을 보입니다. (기본값)
• hidden: 넘친 부분을 숨깁니다.
• auto: 넘친 부분에 스크롤바를 표시합니다.

예제:

.overflow-auto {
    overflow: auto;  /* 스크롤바 자동 표시 */
}

11. Opacity (불투명도)

opacity 속성은 요소의 투명도를 설정합니다. 값은 0에서 1 사이의 숫자로 지정하며, 0에 가까울수록 투명해지고 1에 가까울수록 불투명해집니다.

예제:

.low-opacity {
    opacity: 0.5;  /* 50% 불투명도 */
}

이렇게 각 스타일 속성을 정리하여 사용하시면 됩니다. 위의 예시는 각 속성의 기본적인 사용법을 보여주고 있으며, 실제로는 요소에 따라 적절한 속성 값을 선택하여 사용하셔야 합니다. 오늘도 필자의 부족한 글을 읽어 주셔서 감사합니다.