본문 바로가기

홈페이지 만들기37

CSS 문단 스타일: line-height text-overflow CSS 문단 스타일: line-height text-overflow 대부분 한글 오피스로 작업을 하며 줄간격을 조절해 본 적이 있을 것입니다. 줄이 너무 다닥다닥 붙어 있으면 가독성이 떨어지지요. 그래서 한글 오피스에서는 ??%로 되어 있는 줄간격을 조절해서 줄의 간격을 조절해줍니다. CSS를 활용해서도 줄간격을 조절해줄 수 있습니다. 오늘은 줄 간격을 조절해보고, 넘치는 텍스트를 어떻게 표시할지 정해보도록 하겠습니다. line-height - 줄간격을 조절하기 위해서는 line-height 속성을 사용합니다. 기본형을 아래와 같습니다. - 선택자 { line-height: 크기 or 숫자 or 백분율; } - 먼저 크기 값을 넣어 줄 간격을 지정해줄 수 있습니다. - 크기 값은 전에 배운대로 px, p.. 2020. 11. 30.
CSS 문단 스타일: direction text-align text-indent 오늘은 문단 관련 스타일을 배워 보겠습니다. 글자 쓰기 방향, 텍스트 정렬, 들여쓰기 등에 대해 배워봅시다. 1. direction - direction 속성은 텍스트를 어느 방향부터 쓰기 시작할지 지정해줍니다. - 선택자 { direction: 속성값; }과 같은 형식으로 작성해줍니다. - 속성값을 ltr로 설정하거나, direction 속성을 지정하지 않을 시 왼쪽에서부터 텍스트를 써줍니다. - ltr은 left-to-right의 줄임말입니다. 즉, '왼쪽에서 오른쪽으로'라는 뜻입니다. - 속성값을 rtl로 설정하면 오른쪽에서부터 텍스트를 써줍니다. - rtl은 right-to-left의 줄임말입니다. 즉, '오른쪽에서 왼쪽으로'라는 뜻입니다. 2. text-align - text-align 속성은 .. 2020. 11. 19.
CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing CSS 텍스트 스타일: text-shadow white-space letter-spacing word-spacing 오늘은 텍스트에 그림자 효과를 주고, 텍스트의 간격과 공백을 조절해보겠습니다. 1. text-shadow - text-shadow 속성을 사용하면 텍스트에 그림자 효과를 줄 수 있습니다. - 선택자 { text-shaodw: 가로거리 세로거리 번짐정도 색상; }와 같은 형식으로 사용합니다. - 가로거리는 필수로 입력해야하는 값입니다. 텍스트부터 그림자까지의 가로 거리를 의미합니다. 양수 값은 글자 오른쪽으로 그림자를 만들고, 음수 값은 글자 왼쪽으로 그림자를 만듭니다. - 세로거리는 필수로 입력해야하는 값입니다. 텍스트로부터 그림자까지의 세로 거리를 의미합니다. 양수 값은 글자 아래쪽으로 .. 2020. 11. 16.
CSS 텍스트 스타일: color text-decoration text-transform CSS 텍스트 스타일: color text-decoration text-transform 앞에서는 글꼴과 관련된 스타일을 배워보았습니다. 이번에는 글자의 색깔, 장식, 효과 등을 지정해주는 텍스트 스타일을 배워보겠습니다. 1. color - color 속성을 사용하면 글자 색을 지정할 수 있습니다. - 선택자 { color: 색상; } 의 형식으로 사용합니다. - 주로 세 가지 방법으로 색상을 지정해줍니다. - 첫 번째 방법은 색상의 이름을 써주는 것입니다. 위 예시에서 .blue { color: blue; }로 작성된 부분이 그것입니다. 파란색으로 색상을 지정해 준 것입니다. - 두 번째 방법은 rgb값을 써주는 것입니다. 위 예시에서 .red { color: rgb{255, 0, 0); }로 작성된 .. 2020. 11. 12.
CSS 폰트 스타일: font-size font-weight font-style font CSS 폰트 스타일: font-size font-weight font-style font 오늘은 글자 크기, 굵기, 스타일을 조절해보겠습니다. 1. font-size 속성 값 사용할 수 있는 값(단위) 절대 크기 브라우저에서 미리 정해놓은 크기: xx-small, x-small, small, medium, large, x-large, xx-large 상대 크기 부모 요소 글자 크기 기준으로 더 크거나 작거나: larger, smaller 직접 지정한 크기 CSS 작성자가 직접 지정한 크기: px, pt, em, ex, rem 백분율 부모 요소 글자 크기 기준으로 백분율: 예를 들어 100%는 부모 요소 크기와 같음 - font-size는 글자의 크기를 지정해줍니다. - font-size 속성 값은 위와 .. 2020. 11. 9.
CSS 폰트 스타일: font-family, 웹 폰트(web font) CSS 폰트 스타일: font-family, 웹 폰트(web font) 오늘은 글자 모양을 지정해주는 폰트 관련 스타일을 알아보겠습니다. 1. font-family - 글꼴을 지정해주기 위해서는 font-family 속성을 사용합니다. - 직역하면 '글꼴 가족'이지요. 해당 모양의 글자들을 한 가족으로 모아두었다는 뜻입니다. - font-family 속성은 아래와 같은 형식으로 사용합니다. - font-family { 글꼴 이름, 대체 글꼴 이름1, 대체 글꼴 이름2, ... } - 위 예시를 통해 살펴보겠습니다. - 먼저 id를 "gul"로 지정한 p태그를 살펴보겠습니다. - #gul { font-family: 굴림; } 으로 되어있지요. id가 gul인 p태그는 글꼴을 '굴림'으로 지정한다는 뜻입니다.. 2020. 11. 5.
반응형

티스토리툴바