Components and Layout

• 강의 자료와 함께 보아야 함

개요

From elements to webpages

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

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

Elements

1. Text
2. Buttons
3. Images
4. Input Elements
5. Tags
   ...

Components

1. Breadcrumbs
   (사이트나 웹 앱에서 유저의 위치를 보여주는 보조 탐색 시스템)
2. Pagination
   (페이지 매기기, 페이지 번호)
3. Alert and status bars
4. Statistics
5. Gallery
6. Feature box
7. Preview and profile cards
8. Accordion
9. Tabs
10. Carousel
11. Customer tetimonials
12. Customer logos
13. Featured-in logos
14. Steps
15. Forms
16. Tables
17. Pricing tables
18. Modal Windows
    ...

Section components

1. Navigation
2. Hero section
3. Footer
4. Call-to-action section
5. Feature low
   ...

Layout patterns

1. Row of boxes or cards
2. Grid of boxes or cards
3. Z-pattern
4. F-pattern
5. Single-column
6. Sidebar
7. Multi-column/magazine
8. 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;
}