본문 바로가기

프론트엔드/CSS24

CSS 내부 여백 속성 padding: 요소의 내부 여백(공간)을 지정하는 단축 속성(요소의 크기가 늘어나는 특징을 가짐) 0: 내부 여백 없음 단위: px, em, vw 등 단위로 지정 %: 부모 요소의 가로 너비에 대한 비율로 지정 최대 4가지 값까지 입력 가능(padding: 10px 20px 30px 40px;), 띄어쓰기로 구분 padding: top,right,bottom,left; padding: top,bottom left,right; padding: top left,right bottom; padding: top right bottom left; padding-방향: 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들 padding-top padding-bottom padding-left padding-right 2021. 4. 18.
CSS 외부 여백 속성 margin: 요소의 외부 여백(공간)을 지정하는 단축 속성 (음수 사용 가능) 0: 외부 여백 없음 auto: 브라우저가 여백을 계산, 가로(세로) 너비가 있는 요소의 가운데 정렬에 활용 단위: px, em, vw 등 단위로 지정 %: 부모 요소의 가로 너비에 대한 비율로 지정 최대 4가지 값까지 입력 가능(margin: 10px 20px 30px 40px;), 띄어쓰기로 구분 margin: top,right,bottom,left; margin: top,bottom left,right; margin: top left,right bottom; margin: top right bottom left; margin-방향: 요소의 외부 여백(공간)을 지정하는 기타 개별 속성들 margin-top margin-b.. 2021. 4. 18.
CSS 속성 단위 px: 픽셀 %: 상대적 백분율 em: 요소의 글꼴 크기 rem: 루트 요소(html)의 글꼴 크기 (루트: 최상위) vw: 뷰포트 가로 너비의 백분율 vh: 뷰포트 세로 너비의 백분율 2021. 4. 18.
CSS속성 너비 width: 요소의 가로 너비 height: 요소의 세로 너비 기본값: auto max-width, max-height: 요소가 커질 수 있는 최대 가로/세로 너비 none: 최대 너비 제한 없음(기본값) auto: 브라우저가 너비를 계산 단위: px, em, vw 등 단위로 지정 min-width, min-height: 요소가 작아질 수 있는 최소 가로/세로 너비 0: 최소 너비 제한 없음 (기본값) auto: 브라우저가 너비를 계산 단위: px, em, vw 등 단위로 지정 2021. 4. 18.
CSS 우선순위 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 1. 점수가 높은 선언이 우선함 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선함 인라인 선언 : 1000점 (style="color: oragne") ID 선택자 : 100점 (#color_yellow) Class 선택자 : 10 점 (.color_green) 태그 선택자 : 1점 (div) 전체 선택자 : 10점 (*) !important : 99999999점 2021. 4. 13.
CSS 상속 상속되는 CSS 속성 모두 글자/문자 관련 속성들(모든 글자/문자 속성은 아님 주의) font-style : 글자 기울기 font-weight: 글자 두께 font-size : 글자 크기 line-height : 줄 높이 font-family : 폰트(서체) color : 글자 색상 text-align : 정렬 강제 상속 예제 상속되지 않는 속성을 강제로 상속받도록 설정 HTML CSS .parent{ width: 300px; height: 200px; background-color: red; } .child { width: 100px; height: inherit; /*부모요소로부터 강제 상속*/ background-color:inherit; position: fixed; /*화면에 view port를.. 2021. 4. 13.