▶ 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;은 요소가 화면상에 존재하지만 단지 보이지 않는 것. 자리는 차지..

▶ overflow - 요소의 크기 이상으로 내용(자식 요소)이 넘쳤을 때 내용이 보이는 방식을 제어. 단축 속성. - 부모 요소의 영역 밖으로 자식 요소가 넘쳤을 때 넘친 영역을 어떻게 표시할 것인지에 대한 처리. [속성 값] - visible: 넘친 부분을 자르지 않고 그대로 보여줌. 기본값. - hidden: 넘친 부분을 잘라내고 보이지 않도록 함. - scroll: 넘친 부분을 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 넘침의 유무와 상관 없이 강제로 스크롤 바를 생성. - auto: 넘친 부분이 있는 경우만 잘라내고 스크롤 바를 통해 볼 수 있도록 함. 자동으로 스크롤 바 생성. 넘치면 넘치는 대로, 넘치지 않으면 않는 대로 스크롤 바를 생성하거나 생성하지 않는 것. [사용 예시] - ove..

▶ 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..

▶ 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 영역에는 각각 파랑, 초록, ..

▶ 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..

▶ padding - 요소 내부(안쪽) 여백을 설정 - padding은 단축 속성 - padding-top, padding-bottom, padding-left, padding-right의 네 가지 개별 속성의 집합 - 속성 값 - 단위: px, em, cm 등 단위로 지정. - 기본값: 0. - %: 부모 요소의 너비(width 값)에 대한 비율로 지정(margin과 동일). - 사용법 padding: 상 우 하 좌; - 속성 값으로 4개를 적은 경우 시계 방향으로 값 적용. padding: 상 [좌, 우] 하; - 속성 값으로 3개 적은 경우.위에서 아래로 해석. padding: [상, 하] [좌, 우]; - 속성 값으로 2개 적은 경우 상/하를 우선시. padding: [상, 하, 좌, 우]; - ..