본문 바로가기

프론트엔드235

CSS 테두리 선 속성 border: 선-두께(border-width), 선-종류(border-style), 선-색상(border-color); -> 요소의 테두리 선을 지정하는 단축 속성 (요소의 크기가 커지는 특징) 기본값 border: medium none black; 예시 border: 10px solid orange border-width: 요소 테두리 선의 두께 medium: 중간 두께 thin: 얇은 두께 thick: 두꺼운 두께 단위: px, em, % 등 단위로 지정 (권장) 최대 4가지 값까지 입력 가능(border-width: 10px 20px 30px 40px;), 띄어쓰기로 구분 border-width: top,right,bottom,left; border-width: top,bottom left,rig.. 2021. 4. 18.
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.