전체 글
-
CSS 속성 알아보기 (요소의 크기와 출력 형태)CSS/CSS 2021. 4. 24. 11:49
box-sizing box-sizing: 값; box-sizing: border-box; 요소의 크기 계산 기준을 지정하는 속성 기본값(content-box) - 요소의 내용(content)으로 크기 계산 border-box - 요소의 내용 + padding + border로 크기 계산 overflow overflow: 값; /* 부모 요소에다 작성 */ overflow: visible; overflow: hidden; overflow: scroll; overflow: auto; /* 개별 속성으로 제어도 가능하다 */ overflow-x: 값; overflow-y: 값; 요소의 크기 이상으로 내용이 넘쳤을 때, 보여짐을 제어하는 속성 기본값(Visible) - 넘친 내용을 그대로 보여줌 hidden -..
-
CSS 속성 알아보기 (요소의 테두리)CSS/CSS 2021. 4. 24. 08:25
border 속성 - 테두리 선 border: 선-두께 선-종류 선-색상; /* 요소의 테두리 선을 지정하는 기타 속성들 */ border-방향 border-방향-속성 border-방향: 두께 종류 색상; border-방향-width: 두께; border-방향-style: 종류; border-방향-color: 색상; 요소의 테두리 선을 지정하는 단축 속성, 요소의 크기가 커지는 특성을 가지고 있다 선-두께(border-width) - 요소 테두리 선의 두께, 기본값(medium) - 단위 px, em, % 등 단위로 지정 선-종류(border-style) - 요소 테두리 선의 종류, 기본값(none) - solid(실선, 일반선) - dashed(파선) 선-색상(border-color) - 요소 테두리 ..
-
CSS 표현 단위CSS/CSS 2021. 4. 23. 04:30
픽셀 스크린의 픽셀(pixel)을 기준으로 하는 크기 % - 상대적 백분율 요소에 지정된 사이즈를 기준으로 해서 상대적인 크기 em - 요소의 글꼴 크기 하나의 기본적인 글꼴 크기가 1em을 기준으로 배수 단위로 하는 크기 rem - 루트 요소(html)의 글꼴 최상위 요소(html)의 사이즈를 기준으로 배수 단위로 하는 크기 vw - 뷰포트 가로 너비의 백분율 vh - 뷰포트 세로 너비의 백분율 참고문서 : poiemaweb.com/css3-units CSS3 Units | PoiemaWeb CSS 프로퍼티에는 키워드, 크기 단위, 색상 표현 단위 등의 특정 단위를 갖는 값을 지정한다. poiemaweb.com
-
CSS 속성 알아보기 (요소의 너비와 여백)CSS/CSS 2021. 4. 23. 02:50
박스 모델 (Box Model) HTML의 모든 요소는 박스(Box) 모양으로 구성되며, 이러한 모양을 박스 모델(Box Model)이라고 부른다 width와 height 속성 요소의 가로/세로 너비 width와 height 속성은 지정하지 않아도 auto(기본값 - 요소에 이미 들어있는 속성의 값)라는 값이 들어감 기본값(Auto) - 브라우저가 너비를 계산 단위 - px, em, vw 등 단위로 지정 인라인 요소에서 width의 auto 값은 포함한 콘첸츠 크기만큼 자동으로 줄어듬 인라인 요소에서 height의 auto 값은 포함한 콘첸츠 크기만큼 자동으로 줄어듬 블록 요소에서 width의 auto 값은 부모 요소의 크기만큼 자동으로 늘어남 블록 요소에서 height의 auto 값은 포함한 콘첸츠 크..
-
CSS 선택자 우선순위CSS/CSS 2021. 4. 23. 00:13
우선순위 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법 CSS 우선순위의 점수를 계산하는 것을 명시도 라고 부른다 1. 점수가 높은 선언이 우선됨 2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선됨 인라인 선언 - 1000점 ID 선택자 - 100점 Class 선택자 - 10점 태그 선턱자 - 1점 전체 선택자 - 0점 !important(중요도) 키워드 - 점수가 무한대, 키워드 (속성:값 뒤에 붙임) 상속은 점수가 없다
-
CSS 스타일 상속CSS/CSS 2021. 4. 22. 23:47
스타일 상속 /* css */ .color { color: blue; } 색상 파랑 빨강 부모(또는 조상)요소로부터 적용되는 스타일이 자식(또는 하위) 요소들까지 스타일이 영향을 받음 상속되는 CSS 속성 - 모두 글자/문자 관련 속성들! (모든 글자/문자 속성이 상속이 되지는 않음) - font-style : 글자 기울기 - font-weight : 글자 두께 - font-size : 글자 크기 - line-height : 줄 높이 - font-family : 폰트(서체) - color : 글자 색상 - text-align : 정렬 등등 강제 상속 실질적으로 상속이 되지 않는 css의 내용을 강제적으로 상속시킬 수 있는 방법 .color { color: blue } .blue { color: inher..
-
CSS 선택자 (가상 클래스, 가상 요소)CSS/CSS 2021. 4. 21. 08:15
가상 클래스(Pseudo-Classes) 선택자 1. 어떠한 행동을 했을 때 동작하는 선택자 (hover, active, focus) 2. 특정한 요소를 선택하는 선택자 1번 선택자:hover { 속성: 값; } a:hover { color: blue; } HOVER - 선택자 요소에 마우스 커서가 올라고 있는 동안 선택한다 선택자:active { 속성: 값; } a:active { color: blue; } ACTIVE - 선택자 요소에 마우스를 클릭하고 있는 동안 선택한다 선택자:focus { 속성: 값; } input:focus { background-color: blue; } FOCUS - 선택자 요소가 포커스(활성화)되면 선택한다 - Focus 가능한 요소는 HTML 대화형 콘텐츠가 해당한다 (..