5일차 _CSS : Position, 가상요소, CSS 리셋

 position, 가상 요소, CSS 리셋

이번 글에서는 CSS 수업에서 배운 position, 가상 요소, CSS 리셋을 다시 정리해보려고 합니다.

---

1. position이란?

position은 HTML 요소의 위치를 정할 때 사용하는 CSS 속성입니다.

예를 들어 카드 안의 오른쪽 위에 NEW라는 글자를 넣고 싶을 때 사용할 수 있습니다.

 

position은 다음처럼 이해하면 쉽습니다.

relative는 기준이 되고, absolute는 그 기준을 따라 움직입니다.

---

relative와 absolute 쉽게 이해하기

먼저 다음과 같은 카드가 있다고 생각해보겠습니다.

<div class="card">
  <span class="badge">NEW</span>
</div>

.card {
  position: relative;
  width: 200px;
  height: 120px;
  background-color: lightgray;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

이 코드에서 .card에는 position: relative가 들어가 있습니다.

.card {
  position: relative;
}

relative는 자식 요소가 움직일 때 기준이 되어줍니다.

그리고 .badge에는 position: absolute가 들어가 있습니다.

.badge {
  position: absolute;
}

absolute는 기준이 되는 부모 안에서 위치를 움직입니다.

따라서 이 예제에서는 NEW 글자가 카드의 오른쪽 위에 배치됩니다.

top: 10px;
right: 10px;

• top: 10px은 카드 위쪽에서 10px 떨어진다는 뜻입니다.
• right: 10px은 카드 오른쪽에서 10px 떨어진다는 뜻입니다.

쉽게 정리하면 다음과 같습니다.

부모 {
  position: relative;
}

자식 {
  position: absolute;
}

부모가 기준을 잡아주고, 자식이 그 기준 안에서 움직이는 방식입니다.

---

relative가 없다면 어떻게 될까요?

부모 요소에 position: relative가 없다면, absolute 요소는 카드가 아닌 화면이나 다른 부모를 기준으로 움직일 수 있습니다.

.card {
  width: 200px;
  height: 120px;
  background-color: lightgray;
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

이 경우 NEW 글자가 카드 안이 아니라 화면 오른쪽 위로 이동할 수 있습니다.

그래서 absolute를 사용할 때는 기준이 되는 부모에 relative가 있는지 확인하는 것이 중요합니다.

---

이미지 위에 글자 올리기

relative와 absolute는 이미지 위에 글자를 올릴 때도 사용할 수 있습니다.

<div class="photo">
  <img src="photo.jpg" alt="여행 사진">
  <p class="photo-text">여름 여행</p>
</div>

.photo {
  position: relative;
  width: 300px;
}

.photo img {
  width: 100%;
}

.photo-text {
  position: absolute;
  left: 20px;
  bottom: 20px;

  color: white;
  font-size: 24px;
}

여기에서는 .photo가 기준이 됩니다.

.photo {
  position: relative;
}

그리고 .photo-text가 그 기준 안에서 움직입니다.

.photo-text {
  position: absolute;
}

left: 20px, bottom: 20px을 사용했기 때문에 글자가 이미지의 왼쪽 아래에 표시됩니다.

---

position: fixed

fixed는 요소를 화면에 고정할 때 사용합니다.

<button class="top-button">TOP</button>

.top-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

이 버튼은 화면 오른쪽 아래에 고정됩니다.

페이지를 아래로 스크롤해도 계속 같은 위치에 보입니다.

주로 다음과 같은 버튼에 사용합니다.

• 맨 위로 이동하는 버튼
• 채팅 버튼
• 상담 버튼

---

position: sticky

sticky는 스크롤하다가 특정 위치에 도착하면 그 자리에 고정되는 방식입니다.

<header class="header">
  상단 메뉴
</header>

.header {
  position: sticky;
  top: 0;
  background-color: white;
}

처음에는 일반 요소처럼 움직이다가 화면 위쪽에 닿으면 고정됩니다.

주로 상단 메뉴를 만들 때 사용합니다.

---

position 간단 정리

속성의미

relative	자식 요소가 움직일 기준이 됩니다
absolute	기준이 되는 부모 안에서 움직입니다
fixed	브라우저 화면에 고정됩니다
sticky	스크롤하다가 특정 위치에서 고정됩니다

초보자 단계에서는 다음 내용을 가장 먼저 기억하면 좋습니다.

부모의 relative가 기준이 되고, 자식의 absolute가 그 기준을 따라 움직입니다.

---

2. 가상 요소란?

가상 요소는 HTML 태그를 추가하지 않고 CSS만으로 글자나 장식을 넣는 기능입니다.

가상 요소에는 주로 두 가지가 있습니다.

::before
::after

• ::before는 내용 앞에 무언가를 추가합니다.
• ::after는 내용 뒤에 무언가를 추가합니다.

---

제목 앞에 별 넣기

<h2 class="title">공지사항</h2>

.title::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

화면에는 다음처럼 표시됩니다.

★ 공지사항

HTML에는 별을 작성하지 않았지만, CSS에서 별을 추가한 것입니다.

---

글자 뒤에 별표 넣기

회원가입 화면에서 필수 입력 항목을 표시할 때 사용할 수 있습니다.

<label class="required">이름</label>

.required::after {
  content: "*";
  color: red;
}

화면에는 다음처럼 표시됩니다.

이름*

::after는 내용 뒤에 무언가를 추가할 때 사용합니다.

---

버튼 뒤에 화살표 넣기

<button class="more-button">더보기</button>

.more-button::after {
  content: "→";
  margin-left: 5px;
}

화면에는 다음처럼 표시됩니다.

더보기 →

---

가상 요소에서 content가 필요한 이유

가상 요소를 만들 때는 반드시 content 속성을 작성해야 합니다.

.title::before {
  content: "★";
}

글자를 넣지 않고 선이나 도형을 만들 때도 다음처럼 작성해야 합니다.

.title::after {
  content: "";
}

내용이 없더라도 빈 문자열을 작성해야 가상 요소가 만들어집니다.

---

제목 아래에 선 만들기

<h2 class="line-title">오늘의 상품</h2>

.line-title::after {
  content: "";
  display: block;

  width: 100px;
  height: 3px;
  background-color: blue;
}

가로는 길고 세로는 얇기 때문에 파란색 사각형이 선처럼 보입니다.

가상 요소는 별이나 화살표뿐 아니라 선, 원, 작은 장식도 만들 수 있습니다.

---

가상 요소는 언제 사용하면 좋을까요?

가상 요소는 주로 꾸미는 용도로 사용하면 좋습니다.

예를 들면 다음과 같습니다.

• 제목 앞의 별
• 버튼 뒤의 화살표
• 제목 아래의 선
• 필수 입력 항목의 별표
• 작은 원이나 장식

상품 가격이나 중요한 안내처럼 꼭 보여야 하는 정보는 가상 요소보다 HTML에 직접 작성하는 것이 좋습니다.

---

3. CSS 리셋이란?

브라우저는 HTML 태그에 기본 스타일을 자동으로 적용합니다.

예를 들어 다음 코드만 작성해도 제목과 문단 사이에 여백이 생깁니다.

<h1>제목입니다</h1>
<p>내용입니다</p>

CSS를 작성하지 않았는데도 여백이 생기는 이유는 브라우저가 기본 스타일을 가지고 있기 때문입니다.

CSS 리셋은 브라우저가 기본으로 넣어둔 여백을 없애고, 내가 원하는 디자인을 만들기 쉽게 준비하는 작업입니다.

---

가장 기본적인 CSS 리셋

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

보통 CSS 파일의 가장 위에 작성합니다.

---

*  의 의미

* {
}

*는 모든 HTML 요소를 선택한다는 뜻입니다.

예를 들어 다음 요소에 모두 적용됩니다.

<h1>제목</h1>
<p>내용</p>
<div>박스</div>
<button>버튼</button>

---

margin: 0

margin은 요소 바깥쪽의 여백입니다.

* {
  margin: 0;
}

브라우저가 기본으로 넣어둔 바깥 여백을 제거합니다.

웹페이지를 만들었을 때 화면 가장자리에 원하지 않는 흰 여백이 보인다면 기본 margin 때문일 수 있습니다.

---

padding: 0

padding은 요소 안쪽의 여백입니다.

* {
  padding: 0;
}

브라우저가 기본으로 넣어둔 안쪽 여백을 제거합니다.

목록 태그인 ul이나 ol은 기본적으로 왼쪽 여백이 있는데, 이를 없앨 때도 사용합니다.

---

box-sizing: border-box

box-sizing: border-box;

이 속성은 박스 크기를 계산하기 쉽게 만들어줍니다.

예를 들어 다음과 같이 박스를 만들었다고 하겠습니다.

.box {
  width: 200px;
  padding: 20px;
}

기본 설정에서는 padding 때문에 실제 박스 크기가 200px보다 커질 수 있습니다.

하지만 border-box를 사용하면 padding이 200px 안에 포함됩니다.

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
}

초보자 입장에서는 다음처럼 기억하면 쉽습니다.

box-sizing: border-box는 박스가 내가 정한 크기보다 커지는 것을 막아줍니다.

---

초보자용 CSS 리셋 코드

처음에는 다음 코드만 사용해도 충분합니다.

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

조금 더 추가하면 다음처럼 사용할 수 있습니다.

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

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

각 코드는 다음과 같은 역할을 합니다.

img {
  max-width: 100%;
}

이미지가 부모 요소보다 커지지 않도록 합니다.

a {
  text-decoration: none;
}

링크의 기본 밑줄을 없앱니다.

ul,
ol {
  list-style: none;
}

목록 앞의 점이나 숫자를 없앱니다.

---

4. 세 가지 내용을 함께 사용한 간단한 예제

이번에는 position, 가상 요소, CSS 리셋을 함께 사용해보겠습니다.

<div class="card">
  <span class="badge">NEW</span>

  <h2 class="title">신상품</h2>
  <p>새롭게 등록된 상품입니다.</p>

  <button class="button">더보기</button>
</div>

/* CSS 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 카드 */
.card {
  position: relative;

  width: 250px;
  padding: 20px;
  margin: 30px;

  background-color: lightgray;
}

/* 카드 안에서 움직이는 NEW 글자 */
.badge {
  position: absolute;
  top: 10px;
  right: 10px;

  background-color: red;
  color: white;
}

/* 제목 앞의 별 */
.title::before {
  content: "★";
  color: orange;
  margin-right: 5px;
}

/* 버튼 뒤의 화살표 */
.button::after {
  content: "→";
  margin-left: 5px;
}

이 예제에서 .card는 위치의 기준입니다.

.card {
  position: relative;
}

.badge는 카드라는 기준 안에서 움직입니다.

.badge {
  position: absolute;
}

제목 앞에는 ::before를 사용해 별을 넣었습니다.

.title::before {
  content: "★";
}

버튼 뒤에는 ::after를 사용해 화살표를 넣었습니다.

.button::after {
  content: "→";
}

그리고 CSS 리셋을 사용해 브라우저의 기본 여백을 없앴습니다.

 

하지만 다시 정리해보니 두 속성은 함께 사용할 때 이해하기 쉬웠습니다.

relative는 자식 요소가 움직일 수 있도록 기준을 만들어줍니다.

absolute는 그 기준 안에서 top, right, bottom, left 값을 사용해 위치를 정합니다.

그래서 다음 문장으로 기억하면 좋을 것 같습니다.

relative는 기준이고, absolute는 그 기준을 따라 움직이는 요소입니다.