전체 글 (265) 썸네일형 리스트형 [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;.. [CSS] font(4) - font-size ▶ font-size - 글자의 크기 지정. [속성 값] - 단위: px, em, cm 등 단위로 지정. - 기본값 16px(에 font-size: 16px로 지정되어있다고 가정). - %: 부모(상위) 요소의 비율로 지정. 이는 em으로 대체해 사용하는 것을 권장. - xx-small: 가장 작은 크기. - x-small: 더 작은 크기. - small: 작은 크기. - medium: 중간 크기. - large: 큰 크기. - x-large: 더 큰 크기. - xx-large: 가장 큰 크기. - smaller: 부모 요소보다 작은 크기. - larger: 부모 요소보다 큰 크기. ∴ xx-small, x-small, small 등은 명확한 크기를 을 수 없음. - 되도록 완벽하게 크기를 제어할 수 있.. [CSS] font(3) - font-weight ▶ font-weight - 글자의 두께(가중치)를 지정. [속성 값] - normal: 기본 글자 두께. font-weight: 400;과 동일. 기본값. - bold: 두껍게. font-weight: 700;과 동일. - border: 부모(상위) 요소보다 더 두껍게(bold보다 두껍다는 개념이 아님에 유의). - lighter: 부모(상위) 요소보다 더 얇게. - 숫자: 100부터 900까지 100단위의 숫자 값 9가지. normal과 bold 이외에 글자의 두께를 제공하는 글꼴(서체)을 위한 설정. [일반적인 두께의 이름] - font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨. 값 일반적인 두께 이름 100 thin(hairline) 200 extra light(ult.. [CSS] font(2) - font-style ▶ font-style - 글자의 스타일(기울기)을 지정. [속성 값] - normal: 스타일 없음. 기본값. - italic: 이탤릭체(활자) - oblique: 기울어진 글자 ※ 기울어진 글자체 사용 시 보통 font-style: oblique보다 font-style: italic; 사용. [CSS] font(1) ▶ font - 글자 관련 속성들을 지정. - 단축 속성. - font-style, font-weight, font-size, line-height, font-family의 다섯 가지 개별 속성들의 집합. [개별 속성] font-style - 글자 기울기 지정. - 기본 값: normal. font-weight - 글자 두께 지정(가중치). - 기본 값: normal. font-size - 글자 크기 지정. - 기본 값: medium(= 16px). - 미리 지정된 CSS 설정이 없다면 font-size: medium;으로 설정되어 있을 것이고 이는 16px에 해당. line-height - 줄 높이 지정. - 기본값 normal. - reset.css 적용 시 line-height의 기본 값은 약 1... [CSS] opacity ▶ opacity - 요소의 투명도 지정. [속성 값] - 0부터 1 사이의 소수점 단위의 숫자 값 지정. - 기본값 1. - 소수점 값 입력 시 0은 생략 가능(ex. 0.5 = .5) [사용 예시] .half{ opacity: 0.5 } /* 50% 투명도. 반투명 */ .transparent{ opacity: 0 } /* 0% 투명도. 투명 */ .box{ opacity: .75 } /* 75% 투명도. 반투명 */ .full{ opacity: 1 } /* 100% 투명도. 불투명 */ ※ display: none;과 opacity: 0; - display: none;과 opacity: 0; 사이 혼돈에 주의. - opacity: 0;은 요소가 화면상에 존재하지만 단지 보이지 않는 것. 자리는 차지.. 이전 1 ··· 17 18 19 20 21 22 23 ··· 34 다음
