부스트코스6 [HTML/CSS] Media Queries(미디어쿼리), Viewport(뷰포트) 1) 미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주.. 2020. 8. 22. [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. 이전 1 2 다음
