목록 스타일 CSS - list-style-image 목록에서 불릿을 더 다양하게 사용하고 싶을 때 list-style-image 속성을 이용해 불릿을 원하는 이미지로 바꿀 수 있습니다. 기본형 : list-style-image / none = url(이미지 파일 경로) 속성 값 설명 none 이미지를 사용하지 않고 list-style-type 속성에서 지정한 형태로 표시합니다. url("images.jpg")처럼 url() 키워드 안에 이미지 파일 경로를 지정합니다. ul 태그를 사용할 때 검정색 점 대신 이미지로 나열하고 싶은데 막상 나열하게 되면 이미지 사이즈를 잘 조정해서 글자와 맞추지 않으면 이미지와 글자의 차이로 어색해지는 경우가 있습니다. 이럴 때 ..
목록 스타일 CSS - list-style-type 순서 없는 목록의 경우, 목록 앞에 다양한 불릿(buller)을 넣을 수 있고 순서 목록에서는 번호 스타일을 지정할 수 있습니다. 이때 list-style-type 속성을 사용합니다. 기본형 : list-style-type : none / / 순서 없는 목록에서 불릿 모양 바꾸기 속성 값 설명 disc(●) 채운 원(기본) circle(○) 빈 원 square(■) 채운 사각형 none 불릿 없애기 순서 목록에서 숫자 바꾸기 순서 목록에는 항목 앞에 숫자가 붙습니다. list-style-type 속성을 이용하면 이 숫자의 스타일도 바꿀 수 있습니다. 기본 값 'decimal'은 아라비아 숫자로 순서..
문단 스타일 CSS - text-indent text-indent 속성은 문단의 첫 글자를 얼마나 들여 쓸지를 지정합니다. 기본형 : text-indent : / 텍스트가 많은 문서일 경우 문단의 첫 글자를 조금씩 들여 쓰면 문단의 시작을 쉽게 알아볼 수 있습니다. 속성 값 설명 단위와 함께 들여 쓸 크기를 지정합니다. 음수 값도 사용할 수 있습니다. 부모 요소의 너비를 기준으로 상대적 크기를 지정합니다. 의 경우 부모 요소의 웹 문서 화면의 너비가 달라지면 들여 쓰기 양도 달라집니다. 즉, 브라우저 창이 작아지면 들여 쓰기 양도 백분율에 따라 달라집니다. 문단 스타일 CSS - text-overflow white-space : nowr..
문단 스타일 CSS - line-height line-height 속성은 줄 간격을 조절할 때 쓰입니다. 기본형 : line-height : normal / / / / inherit 숫자나 백분율로 지정했을 때는 글자 크기를 기준으로 지정합니다. 예를 들어 글자 크기를 12px로 지정했을 때 줄 간격을 2.0으로 했다면 실제 줄 간격은 글자 크기의 2.0배인 24px가 되고 백분율도 같은 식으로 계산합니다. 보통 줄 간격은 글자 크기의 1.5~2배면 적당합니다. 문단 스타일 CSS - text-justify text-align 속성 값이 justify일 경우 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 어색하게 벌어질 수 있습니다. 이때 간격을 어떻게 조절해 ..
text-align 속성 text-align 속성은 문단의 텍스트 정렬 방법을 지정합니다. 기본형 : text-align : start / end / left / right / center / justify / match-parent 워드나 한글 문서에서 흔히 사용하던 왼쪽 정렬, 오른쪽 정렬, 양쪽 정렬, 가운데 정렬등을 지정할 수 있습니다. 속성 값 설명 start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다. left-to-right 언어라면 왼쪽으로, light-to-left 언어라면 오른쪽으로 맞추어 정렬합니다. end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다. left-to-right 언어라면 오른쪽으로, light-to-left 언어라면 왼쪽으로 맞추어 정렬합니다. l..
텍스트 관련 CSS - white-space white-space 속성은 텍스트와 함께 연속해 입력된 여러 개의 공백을 어떻게 처리할지 지정할 수 있습니다. 기본형 : white-space : normal / nowrap / pre / pre-line / pre-wrap 속성 값 설명 normal 여러 개의 공백을 하나로 표시합니다. 기본 값. nowrap 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다. pre 여러 개의 공백을 그대로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다. pre-line 여러개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시합니다. pre-wrap 여러 ..
텍스트 관련 CSS - text-shadow text-shadow 속성은 텍스트에 그림자 효과를 추가해 텍스트를 좀 더 입체적으로 보이게 합니다. 그림자 값은 쉼표로 구분해 여러 값을 지정할 수 있습니다. 가로 거리와 세로 거리만 지정하면 나머지 값은 기본 값을 사용해 텍스트 그림자를 표시할 수 있습니다. 기본형 : text-shadow : none / 속성 값 설명 텍스트부터 그림자까지의 가로 거리를 입력합니다. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자를 만듭니다. 텍스트부터 그림자까지의 세로 거리를 입력합니다. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자를 만듭니다. 그림자가 번지는 정도를 나타냅니다. 양수 값은 그림자가 모든 방향으로 퍼져 나가기 때문에 그림자가 크게 표시됩..
텍스트 관련 CSS - text-decoration text-decoration 속성을 이용하면 텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있습니다. 기본형 : text-decoration : none / underline / overline / lint-through 속성 값 설명 none 밑줄을 표시하지 않습니다. underline 밑줄을 포시합니다. overline 영역 위로 선을 그립니다. line-through 영역을 가로지르는 선(취소 선)을 그립니다. 텍스트 관련 CSS - text-transform 영문자를 표기할 때 텍스트의 대,소문자를 원하는 대로 바꿀 수 있습니다. (한글에는 영향을 미치지 않고 영문자에만 적용) 기본형 : text-transform : none / capitaliz..
텍스트 관련 CSS - font-style font-style은 글자를 이탤릭체로 표현할지 여부를 결정합니다. 기본형은 font-style: normal / italic / oblique 입니다. italic은 기울어진 글꼴이 처음부터 디자인되어 있는 반면 oblique는 원래 글꼴을 단지 기울어지게 표시할 뿐입니다. 대부분 기울어진 형태에 맞게 글꼴이 다듬어져 있기 때문에 웹에서는 주로 italic을 사용합니다. 속성 값 설명 normal 일반적인 형태로 표시합니다. italic 이탤릭체로 표시합니다. oblique 이택릭체로 표시합니다. 텍스트 관련 CSS - font-variant 영어 글꼴에서는 '작은 대문자'라는 독특한 설정도 할 수 있습니다. 작은 대문자란 대무자를 소문자 크기에 맞추어 작게 ..