코드 정리/CSS13 CSS 기본 속성 (1) 너비 width / height - 요소의 가로 / 세로 너비 - 기본값 auto (브라우저가 너비를 계산) => 인라인 / 블럭 요소의 특징에 맞게 계산 됨. - 인라인 요소는 가로 / 세로 너비를 지정할 수 없음 max-width / max-height - 요소가 커질수 있는 최대 가로 / 세로 너비 - 기본값 none min-width / min-height - 요소가 작아질 수 있는 최소 가로 / 세로 너비 - 기본값 none 외부 여백 margin - 요소의 외부 여백을 지정하는 단축 속성 - 음수 사용 가능 - 기본값 0 - auto 브라우저가 여백을 계산 => 가로 / 세로 너비가 있는 요소의 가운데 정렬에 유용 .box { width: 400px; background-color: aqua;.. 2022. 11. 15. CSS 단위와 색상표현 단위 - css에서 각 속성들의 크기를 표현하는 단위가 여러 가지 있다. px - 픽셀 % - 상대적 백분율 em - 요소의 자체의 글꼴 크기 => 요소의 글꼴 크기가 16px이라면 1em 은 16px의 값을 가진다. rem - 루트 요소(html)의 글꼴 크기 vw - 뷰포트 가로 너비의 백분율 => 50vw는 뷰포트의 가로 값의 50% 크기 vh - 뷰포트 세로 너비의 백분율 => 50vh 는 뷰포트의 세로 값의 50% 크기 색상 표현 색상이름 (브라우저에서 제공하는 이름) : red, tomato, royalblue, green ... Hex 색상 코드 (16진수 색상) : #fff, #000, #0054ff ... RGB (빛의 삼원색) : rgb(255, 255, 255) ... RGBA (빛의.. 2022. 11. 15. CSS 스타일의 상속과 선택자 우선순위 스타일의 상속 - 해당 요소의 스타일이 자식/하위 요소에 적용이 상속되는 것 - 대부분 글자/문자 관련 속성들이 상속 됨. CSS의 스타일 상속 Rien Hello .parent { font-size: 50px; font-weight: bold; color: red; } parent 요소에만 스타일을 적용했지만 자식 요소와 하위 요소까지 스타일이 적용되는 모습을 볼 수 있다. 스타일의 강제 상속 - 상속되지 않는 속성을 부모 요소로부터 상속받도록 만드는 것. - 속성 값 : inherit 적용 .parent { width: 300px; height: 300px; background-color: royalblue; } .child { width: 150px; height: inherit; backgroun.. 2022. 11. 15. CSS 선택자 - 가상 요소 선택자 & 속성 선택자 가상 요소 선택자 BEFORE - 선택자 요소의 내부 앞에 내용을 삽입. - content: "내용"; => 필수 속성! - 콜론 두 개( :: ) 사용 AFTER - 선택자 요소의 내부 뒤에 내용을 삽입. => before & after 둘 다 삽입된 내용은 인라인 요소로 인식됨. Box .box::before { content: "앞!"; } .box::after { content: "뒤!" } 속성 선택자 ATTR - 속성을 포함한 요소 선택 - 대괄호로 표현 ATTR = VALUE - 속성을 포함하고 값도 일치하는 요소 선택 [disabled] { color: red; } [type="password"] { color: red; } 추가 응용 1 before & after 선택자는 content .. 2022. 11. 14. CSS 선택자 - 가상 클래스 선택자 가상 클래스 선택자 - 선택자 뒤에 콜론 ( : )을 붙이고 사용 HOVER - 선택자 요소에 마우스 커서가 올라가 있는 동안 선택 .box:hover { background-color: orange; } => .box 요소에 마우스를 올리면 배경 색상이 오렌지 색상으로 변경 ACTIVE - 선택자 요소에 마우스를 클릭하고 있는 동안 선택 .box:active { background-color: red; } => .box 요소를 클릭하고 있는 동안 배경 색상이 빨간색으로 변경 FOCUS - 선택자 요소가 포커스 되면 선택 - input 태그와 같이 포커스가 가능한 요소에 적용 가능. input:focus { background-color: red; } => input 요소에 포커스가 되면 배경 색상이 빨.. 2022. 11. 13. CSS 선택자 - 기본 선택자와 복합 선택자 CSS 선택자 전체 선택자 - ( * ) 사용 - 모든 요소 선택 * { font-size: 24px; color: #ccc; } 태그 선택자 - html 태그 이름으로 요소 선택 div { width: 200px; height: 100px; background-color: #333; } 클래스 선택자 - html 클래스 속성 값으로 요소 선택 - 앞에 마침표 ( . )를 붙여 클래스 선택자임을 표시 .box { background-color: #fff; margin: 20px; } 아이디 선택자 - html 아이디 속성 값으로 요소 선택 - 앞에 해시 ( # )를 붙여 클래스 선택자임을 표시 #box { display: flex; } 일치 선택자 - 선택자 두 개.. 2022. 11. 13. 이전 1 2 3 다음
