Front71 [CSS] vh / % height 값을 100%를 주면 가득채워지지 않을까? 먼저 heigh와 width값의 기본값을 알아야 한다. height와 width속성의 기본 또는 default 값은? 따로 지정하지 않는다면 height와 width 속성의 기본값은 auto이며, 웹 브라우저가 자동으로 계산 .iamge{ width: auto; height: auto; } 가득찬 이미지 화면 아래와 같은 이미지를 화면에 가득채우게 만들려고 한다. 텍스트의 높이값만큼 보인다. div에 height 100% 스타일 추가 결과는 동일, height값을 100%로 준다는 것은 부모요소를 기준으로 100%만큼의 높이를 가지겠다는 건데, 현재 image요소의 부모요소는 body요소이므로 body요소의 높이가 화면을 채우지 않았다는게 된다. b.. 2022. 8. 25. [CSS] 전체 선택자(*) 와 box-sizing CSS 전체 선택자 - 전체 선택자(the Universal Selector)는 HTML의 모든 요소를 선택하는 기능 - 태그, 속성명, 속성값, 클래스, 아이디 등 모든 요소를 선택 - 아래는 전체 선택자를 통해 효과를 적용했고, 추가로 body 선택자를 통해 효과를 적용한 예 *{ margin:0; padding: 0; box-sizing: border-box; } body{ font-family: 'Silkscreen'; display: flex; justify-content: center; align-items: center; height: 100vh; background: url("login_image.jpg") no-repeat center; background-size: cover; } bo.. 2022. 8. 25. [HTML5+CSS] 겨울을 주제로 구현한 WinterSeason_01 1. HTML 코드 Snowulf Home Gallery Reservation Around FAQ winter season READ MORE Author: Bk 2. CSS 코드 /* nav var 꽉채우기, 폰트 전체 적용 */ body{ margin:0; font-family: 'Silkscreen'; } /* a 전체 태그 밑줄 제거, 색상 적용 */ a{ text-decoration: none; color:white; } /* nav bar 나란히, 빈 공간 적용, 중앙 정렬 등 적용 */ .nav_bar{ display: flex; justify-content: space-between; align-items: center; background: gray; padding: 10px; } .nav.. 2022. 8. 23. [CSS] 미디어 쿼리(Media Query) 1. 기본 문법 - CSS에서 어떤 스타일을 선택적으로 적용할 때 사용. @media (조건) { 스타일 } - 스타일 부분에는 일반적인 CSS 코드가 기재, 조건이 만족이 될 때는 스타일이 적용, 만족되지 않을 때는 스타일이 무시 2. 미디어 쿼리 예시 - 핸드폰과 같이 비교적 좁은 화면에서 특정한 스타일을 적용할 때는 화면의 최대 너비 조건으로 사용 *ex) 800px 이하의 좁은 화면는 박스를 없애고 싶다. See the Pen CSS - media by hbkuk (@hbkuk) on CodePen. *ex) 800px 이상의 넓은 화면는 박스가 있어야 한다. See the Pen CSS - media (2) by hbkuk (@hbkuk) on CodePen. * 별첨. 알고가기 - 코드의 재활.. 2022. 8. 19. [CSS] BOX MODEL, <div>, <gird> 1. BOX MODEL - Block Level Element: 화면 전체를 사용하는 태그 * ex tag) , etc.. ** display 속성을 통해 Inline Element로 변경 가능 - Inline Element: 적용된 컨텐츠 영역만 사용하는 태그 * ex tag) tag, etc.. ** display 속성을 통해 Block Level Element로 변경 가능 See the Pen CSS - block, lnline by hbkuk (@hbkuk) on CodePen. 2. CSS 속성 정리 - 중복되는 속성을 간략하게 정리 See the Pen CSS - 중복 정리 by hbkuk (@hbkuk) on CodePen. 3. CSS 적용을 위한 무색/무취인 태그 - division의 줄.. 2022. 8. 18. [CSS] - 선택자 1. CSS를 통한 일괄 적용 - Selector(선택자)에 css를 적용 - 문장 구조 설명 a{ color: blueviolet; text-decoration:none; } * a → selector(선택자) ** color: blueviolet → declaration(선언 및 효과) text-decoration:none → declaration(선언 및 효과) *** color, text-decoration:none → property(속성) **** blueviolet, none → value(속성 값 또는 값) See the Pen CSS - a by hbkuk (@hbkuk) on CodePen. 2. CSS 적용을 위한 선택자 class - class 적용 예 * CSS 적용을 위해 이름 .. 2022. 8. 18. 이전 1 ··· 8 9 10 11 12 다음
