Programming/HTML, CSS16 [HTML/CSS] Media Queries(미디어쿼리), Viewport(뷰포트) 1) 미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주.. 2020. 8. 22. [HTML/CSS] CSS - display, visibility, float, clear, position, z-index, 유효성 검사 1) 속성 - display display none box1 box2 box3 inline box1 box2 box3 block box1 box2 box3 inline-block box1 box2 box3 list-item box1 box2 box3 body>div { padding: 5px; border: 1px dashed #aaa; } .box { padding: 15px; background-color: #eee; border: 1px solid #aaa; } .none .box { display: none; } .inline .box { display: inline; } .block .box { display: block; } .inline-block .box { display: inline-b.. 2020. 8. 21. [HTML/CSS] CSS - font, webfont, vertical-align, text-align, text-indent, text-decoration, 단어 관련 속성 8) 속성 - font /* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif } /* Set the font size to 80% of the parent element or default value (if no parent element present). Set the font family to sans-serif */ p { font: 80% sans-serif } /* Set the font weight to bold, the font-style to italic, the font size to large, and the font.. 2020. 8. 19. [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. 이전 1 2 3 4 다음
