[멋쟁이 사자처럼 프론트엔드 5기] Day 8 - TIL

SangHun Han·2023년 4월 16일

멋쟁이 사자처럼 프론트엔드 스쿨

TIL

이미지 (img)

img

문서에 이미지를 삽입한다.

src : 경로
alt : 대체 텍스트, 이미지에 대한 설명

주의 사항! 이미지 하단에 빈 공간이 생긴다면?

해당 현상은 img가 인라인 요소라서 발생하는 현상

인라인 요소이기 때문에 img의 세로 정렬이 글자의 baseline을 따르게 된다.

따라서, 해당 현상을 해결하기 위해서는 아래와 같은 초기값을 넣어주면 된다.

img {
	vertical-align:top;
}

이미지 비율 유지하기

방법 1) aspect-ratio

기본 가로와 세로 비율을 설정한다.

img {
  width:300px;
  aspect-ratio: 2 / 1;
  object-fit:cover;
}

방법 2) padding %값 이용하기

padding의 top과 bottom % 값은 부모의 세로가 아닌, 가로 너비 기준으로 한다.

<div class="thumbnail">
  <img src="https://github.com/stronger-deer/myBlog/blob/main/img/main-visual.jpg?raw=true"
       alt="한 성인이 스케이트보드를 타고 있다" />
</div>

.thumbnail {
  position: relative;
  height: 0;
  padding-top: 50%; 
  overflow: hidden;
}

.thumbnail  img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

position

static

기본값이며, 의미는 변화 움직임이 없이 고정되고 정적인 상태이다.

relative

비교 상의, 상대적인의 의미를 가진다.

자신이 있어야 하는 위치에 상대적이며, 다른 컨텐츠들의 위치에 영향을 미치지 않는다.

absolute

조상의 위치를 기준으로 자리를 잡는다.

static을 제외한 position 속성값을 가진 가장 가까운 조상이다.

fixed

브라우저 화면(뷰포트)을 기준으로 위치를 저장한다.

단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.

일반적인 문서 흐름에서 자신의 요소를 제거하고 자리를 잡으며, 스크롤을 내리거나 올리거나 해도
화면의 같은 위치에 고정되어 있다.

header, 하단 top 버튼에 사용한다.

z-index

position이 static 외의 값을 가진 박스에 대해 z축의 위치를 지정한다.

값이 클 수록 제일 위로 배치된다.

부모가 z-index를 높여 자식 앞으로 나올 수 없다.

자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다.

유지보수를 위해 100단위로 작업하면 좋다.

Sections

소개 및 탐색에 도움을 준다.

회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함된다.

nav

문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여준다.

메뉴, 목차, 브레드크럼(breadcrumb)으로 사용된다.

메뉴

<nav>
	<ul>
		<li><a href="#">위니브</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

브레드크럼

<nav>
	<ol>
		<li><a href="#">위니브</a></li>
		<li><a href="#">캐릭터소개</a></li>
		<li>라이캣</li>
	</ol>
</nav>

문서의 모든 링크가 nav 안에 있을 필요는 없으며, 페이지의 주요 탐색 링크를 위한 태그이다.

하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등 하나의 웹페이지에
여러 개의 nav 태그를 가질 수 있다.

페이지의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.

main

body의 주요 컨텐츠를 나타낸다.

웹페이지에서 한 번만 사용할 수 있다.

검색 폼이 주요 기능이라면 예외!

article (1)

독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다.

사이트의 다른 기능에 영향을 주지 않고, 독립적인 기능을 수행한다.
article 영역을 제거해도 페이지는 정상적으로 돌아간다.

article이 대표적으로 사용되는 곳은 뉴스 홈페이지이다.

다양한 기사들이 한 페이지에 담겨 있지만, 이 기사들은 각각 독립적으로 사용된다.
시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영된다.

게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 등사용된다.

제목 요소를 자식으로 포함해야 한다!

article (2)

제목 요소를 자식으로 포함해야 한다.

일단 article 사용을 우선 고민해보자.

독립적으로 사용한다면 article 사용하고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 
더 적합한 의미를 가진 요소가 없을 때 section을 사용하자.

단순 스타일링이 목적이라면 div 요소를 사용하자.

aside

문서의 주요 내용과 간접적으로 연관된 부분을 나타낸다.

문서의 주요 흐름을 따라가지 않고, 보조적인 역할만하는 공간이다.

각주, 광고 배너등에 사용한다.

SangHun Han

매일매일 성장하는 개발자 🚀

이전 포스트

[멋쟁이 사자처럼 프론트엔드 5기] Day 7 - TIL

다음 포스트