HTML + CSS (25) [HTML + CSS] 부트스트랩 width 구간 Extra Small (< 576px): 모바일 Small (≥ 576px): 모바일 Medium (≥ 768px): 타블릿 Large (≥ 992px): 데스크탑 Extra Large (≥ 1200px): 와이드 데스크탑 [HTML + CSS] HERO-IMAGE 1. 사이트의 중심 이미지 2. .hero-image { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero_image.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } 3. Hero-Image 위에 Hero-text [HTML + CSS] 마진 상쇄 혹은 마진 겹침 (Margin Collapsing) 해결 마진 상쇄가 일어 나는 요소에 .margin-collapsing-element { display: inline-block; width: 100%; } [HTML + CSS] POSITIONING(포지셔닝) 포지셔닝이 안 되어 있는 요소: Static (기본) 포지셔닝: Relative, fixed, Absolute Relative: 자신의 원래 위치로부터 이동 Fixed: browser 윈도우가 기준으로 고정되어 있슴 Absolute: 가장 가까운 포지셔닝이 된 조상(Ancestor, 부모(parents)X) 요소가 기준 [HTML + CSS] 세로 가운데 정렬 1. 부모요소의 높이값이 있을 경우 가운데 정렬할 요소의 부모 요소에 line-height 값을 주고 vertical-align: middle을 한다. * line-height 속성은 자식들에게 상속되기 때문에 가운데 정렬된 요소에게는 line-height: normal을 해 주어야 한다. 2. 가짜(helper) 요소 더하기 Hello! My name is young. [HTML + CSS] Baseline(베이스라인) Baseline : vertical align의 기본값 부모요소의 기준선(baseline) 꼬리 부분을 뺀 기준선 baseline은 vertical-align의 조건들을 충족시키면서 줄의 높이를 최소화하는 곳에 위치한다. [HTML + CSS] img 태그에 대하여... 1. 이미지 태그는 inline 요소이다. 줄을 차지하지 않는다. 엔터를 친다든지, 스페이스 바를 치면 띄어 쓰기를 한다. text-align 으로 중앙 정렬한다. 2. block과 유사한 속성 크기를 가진다. margin 과 padding 값을 가질 수 있다. [HTML + CSS] img를 포함한 여러 요소 함께 링크 HHH XXX div 태그를 a태그로 바꾸고a { display: block; } 이전 1 2 3 4 다음
