HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성

HTML CSS - 텍스트 폰트 정렬 및 크기, 배경색상, 투명도 속성

티스토리나 워드프레스 등등 HTML  작업 중 자주사용하는 CSS 수정시트에 대해 속성값을 정리해보았습니다. 흔히 사용하는 본문 글씨크기 및 색상 간격, 배경색상등등의 스타일속성 명령어 등등 CSS 수정 시트는 웹 페이지의 스타일을 수정하고 개선하는 데 사용되는 중요한 도구로서 아래에는 몇 가지 자주 사용하는 스타일 속성과 그에 대한 간단한 설명을 제공하겠습니다.

CSS 수정 시트를 활용하면 웹 페이지의 폰트, 배경 이미지, 그림자, 투명화, 정렬, 테두리 등 다양한 요소들을 손쉽게 스타일링할 수 있습니다.

HTML  CSS 차이점

• HTML (HyperText Markup Language): 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. HTML은 웹 페이지의 뼈대를 구성하며, 텍스트, 이미지, 링크, 표 등의 요소를 사용하여 정보를 구조화합니다.
• CSS (Cascading Style Sheets): 웹 페이지의 스타일, 레이아웃 및 디자인을 지정하는 스타일 시트 언어입니다. CSS는 HTML 요소에 적용되어 텍스트, 색상, 배경, 여백, 정렬 등의 시각적인 스타일을 제어합니다.

폰트 크기  및 색상  간격 CSS 속성

• font-size: 텍스트의 크기를 지정합니다.
• color: 텍스트의 색상을 지정합니다.
• line-height: 줄 간격을 조정하여 텍스트의 가독성을 개선합니다.
• letter-spacing: 자간(글자 사이의 간격)을 조정합니다. 음수 값도 가능합니다.
• word-spacing: 단어 간격을 조정합니다. 음수 값도 가능합니다.
• text-align: 텍스트의 정렬 방식을 지정합니다. (left, center, right)

폰트 스타일링부터 시작해봅시다. 폰트 크기, 색상, 줄 간격, 자간, 단어 간격 등을 수정할 수 있습니다. 또한, 폰트 변형 효과를 주고 싶다면 font-variant 속성을 활용할 수 있습니다.

배경이미지 색상변경 CSS

• background: 배경 이미지의 경로를 지정합니다.
• background-repeat: 이미지를 반복하여 배경으로 사용할지 지정합니다. (repeat, no-repeat, repeat-x, repeat-y)
• background-position: 이미지를 배경으로 사용할 때 어느 부분을 기준으로 위치할지 지정합니다. (left, center, right, top, bottom 등)
• background-size: 배경 이미지의 크기를 지정합니다. (cover, contain 등)

배경 이미지를 다루는 방법을 알아보겠습니다. background 속성을 이용하여 이미지를 적용하고, 반복 여부, 고정 여부, 크기 조정 등 다양한 설정이 가능합니다.

그림자효과 CSS 속성

• box-shadow: 박스에 그림자를 추가합니다. (가로, 세로, 그림자의 크기, 흐림, RGB값, 투명도)
• text-shadow: 텍스트에 그림자를 추가합니다. (가로, 세로, 흐림, R, G, B, A)

그림자 효과를 주고 싶다면 box-shadow와 text-shadow 속성을 활용할 수 있습니다. 가로, 세로, 흐림 정도, 색상과 투명도 등을 조절하여 다양한 그림자 효과를 구현할 수 있습니다.

투명화 속성 CSS

• opacity: 요소의 투명도를 지정합니다. (0부터 1까지의 값)
• filter: 크로스 브라우징을 위한 투명도 지정 방법입니다. (alpha(opacity=70) 등)
• background-color: 배경의 색상을 지정하며, 텍스트는 유지한 채 배경만 투명하게 만듭니다.

HTML CSS 투명화 효과를 주고 싶다면 opacity, filter, background-color 속성을 사용할 수 있습니다. 배경과 텍스트를 함께 투명하게 만들거나, 텍스트는 유지한 채 배경만 투명하게 만들 수 있습니다.

정렬 CSS속성

• position: 요소의 위치를 지정합니다. (fixed, absolute, relative)
• z-index: 요소의 쌓임 순서를 지정합니다.
• vertical-align: 요소의 세로 정렬을 설정합니다.
• padding: 내부 여백을 지정합니다.
• margin: 외부 여백을 지정합니다.
• float: 요소를 좌, 중앙, 우로 정렬합니다.
• clear: float 속성이 적용된 요소의 영향을 제거합니다.
• border: 박스의 테두리를 지정합니다.
• border-radius: 박스의 모서리를 둥글게 만듭니다.
• white-space: 텍스트의 줄 바꿈과 공백 처리를 설정합니다.
• word-wrap: 긴 단어를 줄 바꿈하여 표시할지 설정합니다.
• word-break: 단어를 분리하여 줄 바꿈할지 설정합니다.
• transition: 요소의 변화를 시간에 따라 부드럽게 만듭니다.
• transform: 요소의 위치, 회전, 크기 등을 변환합니다.
• transform-origin: 요소의 변환 기준점을 설정합니다.

위치 지정과 정렬은 position, z-index, top, left, right, bottom, vertical-align 등의 속성을 활용하여 쉽게 조작할 수 있습니다. 또한, 텍스트와 박스에 테두리를 추가하고 모서리를 둥글게 만드는 방법도 알아보겠습니다.

문단과 단어의 줄 바꿈, 자르기, 유지 등을 다루는 white-space, word-wrap, word-break 속성을 적절히 활용하면 글자의 배치를 원하는 대로 조정할 수 있습니다.

마지막으로, CSS의 transition 속성을 활용하면 마우스 포커스 시 요소의 변화를 부드럽게 만들 수 있습니다. 시간에 따라 효과를 적용하고 싶은 요소들을 지정하여 마우스를 올리거나 클릭했을 때 부드러운 애니메이션 효과를 적용할 수 있습니다.

HTML CSS 색상코드 - 컬러코드 16가지 RGB CMYK 가산혼합 - 노랗IT월드