CSS (59) 썸네일형 리스트형 [CSS] word-spacing ▶ word-spacing - 단어 사이(띄어쓰기)의 간격을 지정. - 띄어쓰기의 너비를 설정하는 것. - cf. letter은 자간(글자 사이의 간격)을 지정하는 것임에 유의. [속성 값] - 단위: px, em 등의 단위로 지정. - normal: 단어 사이의 일반 간격. 기본 값. - 단위로 0 지정 시(word-spacing: 0;) nomal로 설정하는 것(word-spacing: norma;)과 동일함. - 0으로 지정한다고 해서 띄어쓰기의 간격이 없어지는 것이 아님. ∴ word-spacing은 기본적으로 가지고 있는 띄어쓰기 너비에서 그에 더해 얼마나 더 간격을 넓힐 것이냐로 이해하는 것이 좋음. [사용 예시] [CSS] letter-spacing ▶ letter-spacing - 문자 사이의 자간(글자 사이 간격)을 설정. [속성 값] - normal: 단어 사이의 일반 간격. 기본값. - normal은 font마다 조금씩 다를 수 있음. 또한 단위로 환산하면 0에 해당. 0에서 출발하는 것. - 단위: px, em 등 단위로 지정 ∴ 자간이 멀다고 느껴질 경우 음수 값 지정도 가능. [사용 예시] [CSS] text-indent ▶ text-indent - 첫 번째 줄의 들여쓰기를 지정. - 음수값을 사용할 수 있음. - 음수 값 사용 시 첫째 줄은 왼쪽으로 들여쓰기(결론적으로 내어쓰기, outdent)됨. [text-indent 사용 예시] - 실무에서 많이 쓰임. - 들여쓰기 개념 자체는 웹에서 필요없을 수 있지만 글자를 밀어낸다는 개념으로는 많이 사용될 수 있음. [CSS] text-decoration ▶ text-decoration - 문자의 장식(line)을 설정. - 여기서의 장식이란 선(line)에 대한 장식을 의미. [속성 값] - none: 선 없음. 기본값. - underline: 밑줄 지정. - overline: 윗줄. - line-through: 중앙선(가로지르는) 지정. [사용 예시] [CSS] text-align ▶ text-align - 문자의 정렬 방식을 지정. - 왼쪽, 가운데, 오른쪽, 양쪽 정렬과 같은 내용을 제공. [속성 값] - left: 왼쪽정렬. - right: 오른쪽 정렬. - center: 가운데 정렬. - justify 양쪽 맞춤 ※ text-align: justify; 사용 시 주의사항 - 한 줄에서는 적용이 되지 않고 두 줄 이상일 경우에만 사용 가능하다는 조건이 있음. - 두 줄 이상인 경우에도 줄 바꿈을 강제적으로 했을 때는 적용되지 않고 작성하다가 공간이 모자라서 아래로 게행되는 경우에만 작동. - 사용 시에는 적용 안 됨. - direction 속성(텍스트 방향 및 쓰기 방향 지정 / ltr, rtl)의 값에 의해 text-align 속성의 기본값이 변경될 수 있음. - 일반적으로.. [CSS] color ▶ color - 문자의 색상을 지정(요소의 색상을 바꾸는 색상이 아님에 유의). [속성 값] - 색상을 지정. 색상 표현. - 기본 값: rgb(0, 0, 0) [색상 표현] - 색상 이름: 브라우저에서 제공하는 색상의 이름. 예) red, blue, ... - 색상의 이름은 브라우저마다 다르게 표현될 수 있음. - 따라서 정확한 표현은 아니므로 되도록이면 색상 이름을 지정하는 것은 지양. - 굉장히 많은 경우 Hex 색상코드 입력. - HEX 색상 코드: 16진수 색상(hexadecimal colors). 예) #000000 - '0123456789abcdef'로 구성된 16진수 6자리의 조합. - #000000은 검정, #ffffff은 흰색. - rgb: 빛의 삼원색(red, green, blue).. [CSS] font(5) - font-family ▶ font-family - 글꼴(서체) 지정. - 가지고 있는, 제공 가능한 폰트. [속성 값] - 글꼴 이름: 여러 개 지정할 수 있음. 속성 값으로 여러 개 입력 시 글꼴 후보 목록을 지정. + serif 글꼴 계열 이름을 지정. sans-serif, monospace, cursive, fantasy... - 글꼴 이름을 여러 개 입력 시 입력한 글꼴 이름 수만큼의 후보가 제공되고 그중 하나만 사용됨. - 입력된 후보를 모두 쓸 수 없는 경우, 해당 환경에서 쓸 수 있는 글꼴 계열 중 다른 폰트를 자동으로 찾아 사용하게 됨. - 따라서 font-family 사용 시 브라우저에 지정하기 원하는 글꼴의 이름 후보들과 그 후보가 제대로 표현되지 못했을 때 나오게 될 글꼴 계열의 이름을 함께 제공해야 함... [CSS] font(5) - line-height ▶ line-height - 줄 높이를 지정. [속성 값] - normal: 브라우저의 기본 정의 사용. 1~1.4 브라우저마다 다를 수 있음. 기본값. - 숫자: 요소 자체가 가지고 있는 글자 크기의 배수로 지정. 예) line-height: 2;라면 텍스트 크기의 2배. - 특정한 px 표기보다는 배수로 표기하는 것을 권장. - 일반적으로 권장하는 배수는 1.4 ~ 1.7 - 폰트의 종류에 따라 차이가 있지만 1.4 ~ 1.7이 글자를 읽는 데 문제가 없다고 판단. - 단위: px, cm, em 등 - %: 요소 자체 글자 크기의 비율로 지정. - line-height는 첫 번째 줄과 두 번째 줄 사이의 간격이 아니라 첫 번째 줄의 높이, 두 번째 줄의 높이가 됨. 예) font-size: 16px;.. 이전 1 2 3 4 5 6 7 8 다음
