전체 글 (245) 썸네일형 리스트형 [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;은 요소가 화면상에 존재하지만 단지 보이지 않는 것. 자리는 차지.. [CSS] overflow ▶ overflow - 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 내용이 보이는 방식을 제어. 단축 속성. - 부모 요소의 영역 밖으로 자식 요소가 넘쳤을 때 넘친 영역을 어떻게 표시할 것인지에 대한 처리. [속성 값] - visible: 넘친 부분을 자르지 않고 그대로 보여줌. 기본값. - hidden: 넘친 부분을 잘라내고 보이지 않도록 함. - scroll: 넘친 부분을 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 넘침의 유무와 상관 없이 강제로 스크롤 바를 생성. - auto: 넘친 부분이 있는 경우만 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 자동으로 스크롤 바 생성. 넘치면 넘치는 대로, 넘치지 않으면 않는 대로 스크롤 바를 생성하거나 생성하지 않는 것. [사용 예시] - ove.. [CSS] display ▶ display - 요소의 박스 타입(유형)을 설정. - 요소가 화면에 보여지는 형태를 설정하는 것. [속성 값] - block: block 요소 처리. ex) 등. - inline: inline 요소 처리. ex) span 등. - 가로/세로의 값을 가질 수 없음. - inline-block: inline-block 요소 처리. base는 inline. - 수평으로 쌓이고 텍스트를 다루는 데 특화. - 가로/세로의 값을 가지고 margin/padding의 상하 값을 가질 수 있다는 특징을 가짐. - 기타: table, table-cell, flex 등. - none: 요소의 박스 타입이 없음(화면에서 요소가 사라짐). - display: block; & display: inline; - display.. [CSS] box-sizing ▶ box-sizing - padding과 border는 크기가 증가할 수 있다는 특징을 가짐. - 이때 크기 증가를 직접 계산해서 정의하거나 자동으로 브라우저가 계산하도록 하기 위해 box-sizing: border-box;를 지정 할 수 있음. - 요소의 크기 계산 기준을 지정. [속성 값] - content-box: width, height만으로 요소의 크기를 계산. 기본 값. - border-box: width, height에 안쪽 여백 padding과 테두리선 border를 포함하여 요소의 크기를 계산. - padding-box도 존재하지만 브라우저 호환성이 떨어짐. content-box, border-box 중 선택하여 사용하도록. - 개발자도구의 computed 영역에는 각각 파랑, 초록, .. [CSS] border ▶ border - 요소의 외곽선/테두리선을 지정. - border는 단축 속성으로 border-width, border-style, border-color의 세 가지 개별 속성들의 조합. [속성과 속성 값] - border-width: 선의 두께(너비) 지정. 기본값: medium. - border-style: 선의 종류 지정. 기본값: none. - border-color: 선의 색상 지정. 기본값: black. - border: 두께 종류 색상; 띄어쓰기로 구분. 기본값: medium none black; [border의 기본값] - border의 기본값으로 두께, 색상은 있지만 선의 종류가 none이기 때문에 화면에 출력되지 않음. - 따라서 종류만 입력해도 화면상에는 출력됨. - border-w.. 이전 1 ··· 15 16 17 18 19 20 21 ··· 31 다음
