Components and Layout

강의 자료와 함께 보아야 함

개요

From elements to webpages

Elements: paragraph, image, button, content, … 등이 포함됨

웹사이트의 정보를 전달하기 위해 일반적인 element와 component를 사용한다.
일반적 패턴을 사용하여 component를 layout으로 결합한다.
서로 다른 layout 영역을 완전한 최종 webpage로 조합한다.

Elements

Text
Buttons
Images
Input Elements
Tags
...

Components

Breadcrumbs
(사이트나 웹 앱에서 유저의 위치를 보여주는 보조 탐색 시스템)
Pagination
(페이지 매기기, 페이지 번호)
Alert and status bars
Statistics
Gallery
Feature box
Preview and profile cards
Accordion
Tabs
Carousel
Customer tetimonials
Customer logos
Featured-in logos
Steps
Forms
Tables
Pricing tables
Modal Windows
...

Section components

Navigation
Hero section
Footer
Call-to-action section
Feature low
...

Layout patterns

Row of boxes or cards
Grid of boxes or cards
Z-pattern
F-pattern
Single-column
Sidebar
Multi-column/magazine
Asymmetry/Experimental
...

Accordion Component

초기 세팅

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", sans-serif;
	color: #343a40;
	line-height: 1; /* 초기화 */
}

element를 중앙에 맞추는 hack

.accordion {
	width: 700px;
  margin: 100px auto;
}

마지막 요소에만 margin 주지 않기 (gap 사용)

수직 방향에 대해서 gap을 사용해야할 때
- flex-direction 사용하기

.hidden-box ul {
	color: #868e96;
	margin-left: 20px;
	
	display: flex;
	flex-direction: column;
	gap: 12px;
}

grid 주기

.item {
	box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
	padding: 24px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	/* 02, How long~, 화살표*/
	/* auto: 컨텐츠의 너비 */
}

.hidden-box {
	grid-column: 2;
}

.item {
	...
	column-gap: 24px;
	row-gap: 36px;
}

Carousel Component

transform

img {
	transform: scale(1.6);
	/* 개발자 도구로 원래 위치를 봤을 때,
	carousel의 왼쪽 패딩이 있어야 원하는 이미지가 된다.*/
}

.carousel{
	padding-left: 90px;
}

position

<div class="carousel">
	<img/>
	<blockquotes></blockquotes>
	<button class="btn"></button>
	<button class="btn"></button>
</div>

.carousel {
	display: flex;
}

.btn {
	position: absolute;
}
/* 부모 요소 확인하면 carousel이므로 이를 참고해 원하는 위치로 배정해야 함*/
/* carousel을 relative로 해야한다. */
.carousel{
	position: relative;
}

vertical centering

.carousel {
	align-items: center;
}
.btn:first-of-type {
	left: -20px;
}
.btn:last-of-type {
	right: -20px;
}

transform과 absolute를 이용한 vertical centering

.btn:first-of-type {
  top: 50%;
  left: 0;
}
.btn:last-of-type {
  top: 50%;
  right: 0;
}

.btn:first-of-type {
  top: 50%;
  transform: translate(0, -50%);
  left: 0;
}
.btn:last-of-type {
  top: 50%;
  transform: translate(0, -50%);
  right: 0;
}

.btn:first-of-type {
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}
.btn:last-of-type {
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}

태그 내용이 빈 공간일 때 비워두기 보다 를 사용한다.

<div class="dots">
  <button class="dot">&nbsp</button>
  <button class="dot">&nbsp</button>
  <button class="dot">&nbsp</button>
  <button class="dot">&nbsp</button>
</div>

transform과 absolute를 이용한 horizontal centering

.dots {
  display: flex;
  gap: 12px;

  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 32px);
}
.dot {
  height: 12px;
  width: 12px;
  background-color: #fff;
  border: 2px solid #087f5b;
  border-radius: 50%;
  cursor: pointer;
}
.dot--fill {
  background-color: #087f5b;
}