목록Front-End/CSS (2)
HappyWeasel
상속 test test span dummy span p test 위의 코드와 같이 css 코드의 selector(선택자)에 상속 범위를 지정할 수 있다. 나열하는 방식 위와 같이 div ul span{ ... } 직계 자식만 적용하는 방식 div > ul { ... } ul의 하위 자식은 영향을 받지 않는다. 상위에서 적용한 스타일은 하위에도 반영된다. 하지만 모든 CSS 속성이이런 특징을 갖게 되면, 몇몇의 문제가 생긴다. 예를 들면 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있다. 그래서 box-model(width, height, margin, padding, border)과 같이 크기와 배치 관련 된 속성들은 하위 엘리먼트로 상속되지 않는다. 우선순위 css 적..

이보다 쉬울 수 없는 CSS 문법 CSS 문법은 HTML 보다 더 쉽습니다. 아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 기본 문법은 충분합니다! div { font-size: 20px; color: red; } /* 다음과 같이 이해할 수 있습니다. */ 선택자 { 속성: 값; 속성: 값; } 선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign)입니다. “빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!”, “파랑 글자색(CSS, color: blue;)은 여기 본문(HTML, )에 적용하겠어!”와 같이 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고..