HTML29 [HTML/CSS] CSS Box Model - Content, Padding, Border, Margin 5) 속성 - boxmodel Box Model에 대해서 알아볼까요 .boxmodel { border: 10px solid #000000; padding: 30px; margin: 50px; } 위 코드의 결과로 보이는 것과 같이, content와 border 사이에 공간을 나타내는 padding과 다른 box 사이의 공간을 나타내는 margin을 설정할 수 있다. ▶ boxmodel 구성 Content 영역 요소의 실제 내용을 포함하는 영역으로, 크기는 내용의 너비 및 높이를 나타낸다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 한다. Padding 영역 content 영역과 테두리 border 사이의 여백을 padding이라고 한다. content 영역에.. 2020. 8. 12. [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 - 선택자 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 5 6 다음
