Front/CSS3 CSS Selector(2) 지난번에는 CSS 선택자들 중 기본 선택자들과 그룹 선택자를 알아봤다. 다음으로는 결합자가 있다. 결합자에는 자손 결합자, 자식 결합자, 일반 형제 결합자, 인접 형제 결합자 등이 있다. 우선 Descendant combinator(자손 결합자)의 경우 첫 번째 요소의 자손인 노드를 선택하여 적용하는 것이다. 사용법은 selector1 selector2 {style properties} 와 같은 방법으로 작성한다. 위와 같이 작성할 경우, 첫 번째 요소인 ul의 자손 중 span에 해당하는 자손에 스타일이 적용되는 것이다. 결과는 위와 같다. Child combinator(자식 결합자)는 자손 결합자와 비슷하지만 첫 번째 요소의 바로 아래 자식인 노드를 선택해 스타일을 적용한다는 것에서 차이가 있다. 사.. 2023. 5. 2. CSS Selector(1) CSS Selector (CSS 선택자)는 HTML 문서 내에서 CSS 규칙을 적용할 요소를 정의하는 역할을 한다. 선택자로는 기본 선택자, 그룹 선택자, 결합자, 의사 클래스, 의사 요소 등이 있다. 기본 선택자에도 여러 가지 선택자들이 있는데 전체 선택자의 경우 HTML 문서 내의 모든 요소를 선택하여 적용한다. 위와 같이 * {style properties} 와 같이 작성하며 이는 html 문서 내 모든 요소에 적용된다. 유형 선택자는 태그명을 이용해서 스타일을 적용한다. HTML 문서 내에서 주어진 해당 유형의 모든 요소를 선택하여 적용하는 것이다. 다음과 같이 html 문서를 작성할 경우 아래와 같은 결과를 얻을 수 있다. h3이라는 유형만 선택하여 스타일을 적용하는 것이다. 클래스 선택자는 해.. 2023. 5. 2. CSS CSS는 Cascading Style Sheets의 약자로 HTML 문서를 화면에 표시하는 방식을 정의한 언어이다. CSS를 통해 웹 문서의 내용과는 관계없이 디자인만 바꿀 수 있고, 다양한 기기에 맞게 반응형으로 바뀌는 문서 또한 만들 수가 있다. CSS를 적용하는 방법으로는 External style sheet과 Internal style sheet, Inline style 이 있다. External style sheet은 html 문서 내에서 태그를 사용하여 외부 스타일 시트를 적용한다. 위와 같이 head 태그 내에 작성하게 된다. 참조하는 css 파일이 다음과 같다면 아래와 같은 결과가 나타난다. Internal style sheet는 파일 내에 스타일을 적용하는 방식이다. 태그 사이에 CSS .. 2023. 5. 2. 이전 1 다음
