Programming/HTML, CSS16 [HTML/CSS] CSS - 속성 정의, 단위, 색상, background 1) 속성 - 정의와 구문 https://developer.mozilla.org/ko/docs/Web/CSS CSS: Cascading Style Sheets Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. developer.mozilla.org https://www.w3schools.com/css/ CSS Tutorial CSS Tutorial CSS is a language that describes the style of an HTML document. CSS describes how HTML elements should be displayed. T.. 2020. 8. 11. [HTML/CSS] CSS - 구체성, 상속, Cascading 9) 구체성 요소를 선택하는 데는 여러 방법이 있고, 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다. 그렇다면 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까? h1 { color: red; } body h1 { color: green; } 위 코드의 두 규칙은 모두 을 선택하게 되지만, 두 규칙 지정하는 스타일은 서로 다르다. 하지만 결국 에는 color: green이 적용되는데 이는 구체성과 연관이 있다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있는데, 이 규칙을 '구체성'이라 한다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 클수록 우선으로 적용된다. 0, 0.. 2020. 8. 10. [HTML/CSS] CSS - 문서 구조와 가상 선택자 6) 문서 구조 관련 선택자 HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. ◆ 자손 선택자 div span { color: red; } 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 하고, 위 코드는 의 자손 요소인 을 선택하는 선택자다. ◆ 자식 선택자 div > h1 { color: red; } 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣고, 꺽쇠 기호와 선택자 기호 사이에 공백은 있거나 없어도 상관 없다. 위 코드는 의 자식 요소인 를 선택하는 선택자다. ◆ 인접 형제 선택자 div + p { color: red; } 인접 형제 선택자는 선택자 사이에 + 기호를 넣고, .. 2020. 8. 9. [HTML/CSS] CSS - 선택자 3) 선택자 1 ◆ 요소 선택자 선택자 중에 가장 기본이 되는 선택자이며, 선택자 부분에 태그 이름이 들어가서 태그 선택자라고도 한다. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h4 { color: yellow; } h5 { color: yellow; } h6 { color: yellow; } ◆ 그룹화 선택자는 쉼표를 이용해서 그룹화를 할 수 있다. h1, h2, h3, h4, h5, h6 { color: yellow; } 위 코드와 같이 쉼표를 이용하거나 * { color: yellow; } *(별표, asterisk) 기호를 이용해서 문서 내에 모든 요소를 선택하는 전체 선택자도 있다. 이렇게 선언하면 한 번의 선언만으.. 2020. 8. 8. [HTML/CSS] CSS 이해하기 1) CSS 소개 ◆ CSS와 HTML CSS는 Cascading Style Sheets의 약자로, 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인하는 역할을 하고, 마크업 문서인 HTML 자체가 존재하지 않으면 CSS는 무용지물이다. 2) CSS 문법과 적용 ◆ CSS 구문 h1 { color: yellow; font-size: 2em; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ col.. 2020. 8. 8. 이전 1 2 3 4 다음
