edwith5 [HTML/CSS] CSS Box Model - Width, Height 10) 속성 - width width는 요소의 가로 크기를 정의하는 데 사용하는 속성으로, 정확히는 content 영역의 너비를 지정하는 것을 의미한다. 기본값이 auto이기 때문에 브라우저를 resize할 때 저절로 width가 변화된다. box .box { width: 100px; padding: 20px; border: 10px solid black; } 위 코드를 분석해보면 width에 의해 100px content + ( 20px * 2 ) padding + ( 10px * 2 ) border = 160px이 되는 것이다. child .parent { width: 300px; border: 20px solid red; } .child { width: 50%; padding: 20px; borde.. 2020. 8. 13. [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 - 문서 구조와 가상 선택자 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. 이전 1 다음
