이 랩에서는 두 개의 이미지를 사용하여 웹 레이아웃을 생성함으로써 CSS 에서 상대 위치 지정 (relative positioning) 을 적용하는 방법을 배우게 됩니다. 이 랩은 HTML 프로젝트 구조 설정, 기본 CSS 스타일시트 생성, 이미지 배치를 위한 상대 위치 지정 기술 구현을 안내합니다.
먼저 프로젝트 디렉토리를 생성하고, 이미지 자리 표시자를 사용하여 HTML 파일을 초기화하고, 샘플 이미지를 다운로드합니다. 그런 다음, 상대 위치 지정을 사용하여 이러한 이미지의 레이아웃과 위치를 정의하는 CSS 스타일시트를 개발합니다. 상대 위치 지정은 다른 요소의 레이아웃에 영향을 주지 않고, 요소의 위치를 일반적인 문서 흐름에 상대적으로 조정할 수 있게 해줍니다.
이 단계에서는 CSS 상대 위치 지정 (relative positioning) 을 배우기 위한 기본적인 HTML 프로젝트 구조를 설정합니다. 간단한 프로젝트 디렉토리를 생성하고 웹 레이아웃 실험에 필요한 파일을 초기화합니다.
먼저, 프로젝트 디렉토리로 이동합니다:
cd ~/projectCSS 위치 지정 프로젝트를 위한 새 디렉토리를 생성합니다:
mkdir css-positioning
cd css-positioning이제 WebIDE 를 사용하여 기본 프로젝트 파일을 생성합니다:
index.html이라는 HTML 파일을 생성합니다:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Relative Positioning</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<img src="left-image.jpg" alt="Left Image" class="left-image" />
<img src="right-image.jpg" alt="Right Image" class="right-image" />
</div>
</body>
</html>wget https://labex.io/sample-left-image.jpg -O left-image.jpg
wget https://labex.io/sample-right-image.jpg -O right-image.jpg예시 출력:
--2024-xx-xx xx:xx:xx-- https://labex.io/sample-left-image.jpg
Resolving labex.io (labex.io)...
Downloading sample images...이 설정은 이미지 자리 표시자가 있는 기본 HTML 구조를 생성하고, 다음 단계에서 CSS 위치 지정 실험을 위한 프로젝트를 준비합니다.
이 단계에서는 웹 페이지의 기본적인 스타일을 설정하기 위해 기본 CSS 스타일시트를 생성합니다. CSS (Cascading Style Sheets, 계단식 스타일 시트) 를 사용하면 HTML 요소의 레이아웃, 모양 및 위치를 제어할 수 있습니다.
프로젝트 디렉토리로 이동합니다:
cd ~/project/css-positioningWebIDE 에서 styles.css라는 새 CSS 파일을 생성합니다:
/* Basic reset and container styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
max-width: 800px;
margin: 50px auto;
position: relative;
border: 2px solid #333;
padding: 20px;
}
/* Initial image styles */
.left-image,
.right-image {
width: 200px;
height: auto;
border: 1px solid #666;
}CSS 를 자세히 살펴보겠습니다:
* 선택자는 기본 마진과 패딩을 제거하기 위해 리셋을 적용합니다..container는 테두리가 있는 가운데 정렬된 컨테이너를 생성합니다..left-image 및 .right-image는 초기 이미지 크기를 설정하고 테두리를 추가합니다.브라우저에서 볼 때의 예시 출력:
[두 개의 동일한 크기의 이미지를 포함하는 테두리가 있는 가운데 정렬된 컨테이너]이 기본 스타일시트는 상대 위치 지정 실험의 기반을 제공합니다. 다음 단계에서는 상대 위치 지정 기술을 시연하기 위해 이러한 스타일을 수정할 것입니다.
이 단계에서는 상대 위치 지정 (relative positioning) 을 사용하여 왼쪽 이미지를 원래 문서 흐름 내에서 이동하는 방법을 배웁니다. 상대 위치 지정을 사용하면 다른 요소에 영향을 주지 않고 요소의 위치를 원래 위치를 기준으로 조정할 수 있습니다.
WebIDE 에서 styles.css 파일을 열고 왼쪽 이미지에 대한 다음 CSS 를 추가합니다:
.left-image {
position: relative;
top: 20px; /* Move 20 pixels down */
left: 50px; /* Move 50 pixels to the right */
background-color: #f0f0f0; /* Add a light background for visibility */
}상대 위치 지정에 대한 주요 사항:
position: relative;는 상대 위치 지정을 활성화합니다.top은 요소를 아래로 이동시킵니다.left는 요소를 오른쪽으로 이동시킵니다.예시 시각적 출력:
[왼쪽 이미지가 20px 아래로, 50px 오른쪽으로 이동,
원래 레이아웃 공간 유지]상대 위치 지정을 사용하면 전체 페이지 레이아웃을 방해하지 않고 요소 배치를 미세 조정할 수 있습니다.
이 단계에서는 CSS 를 사용하여 요소를 독립적으로 이동하는 방법을 보여주기 위해 오른쪽 이미지에 상대 위치 지정을 적용합니다. 상대 위치 지정의 유연성을 보여주기 위해 다른 위치 지정 값을 사용합니다.
WebIDE 에서 styles.css 파일을 열고 오른쪽 이미지에 대한 다음 CSS 를 추가합니다:
.right-image {
position: relative;
bottom: 30px; /* Move 30 pixels up */
right: -40px; /* Move 40 pixels to the left */
background-color: #e0e0e0; /* Add a light background for visibility */
}위치 지정의 주요 차이점:
bottom은 요소를 위로 이동시킵니다.right는 요소를 왼쪽으로 이동시킵니다.예시 시각적 출력:
[오른쪽 이미지가 30px 위로, 40px 왼쪽으로 이동,
원래 레이아웃 공간 유지]이 예제는 상대 위치 지정을 사용하여 다양한 위치 지정 속성을 사용하여 요소 배치를 미세 조정하는 방법을 보여줍니다.
이 마지막 단계에서는 이미지에 적용된 상대 위치 지정 기술을 검토하고 확인합니다. 상대 위치 지정이 어떻게 작동하는지 시각적으로 이해도를 높이기 위해 몇 가지 최종적인 손질을 추가합니다.
styles.css 파일을 업데이트하여 위치 지정을 강조하는 완전한 스타일을 적용합니다:
.container {
width: 100%;
max-width: 800px;
margin: 50px auto;
position: relative;
border: 2px solid #333;
padding: 20px;
text-align: center;
}
.left-image,
.right-image {
width: 200px;
height: auto;
border: 3px solid #666;
transition: transform 0.3s ease;
}
.left-image {
position: relative;
top: 20px;
left: 50px;
background-color: #f0f0f0;
}
.right-image {
position: relative;
bottom: 30px;
right: -40px;
background-color: #e0e0e0;
}
/* Add hover effect to visualize positioning */
.left-image:hover,
.right-image:hover {
transform: scale(1.05);
}주요 확인 사항:
예시 시각적 출력:
[중앙 정렬된 컨테이너 내에 서로 다르게 배치된 두 개의 이미지,
미묘한 호버 효과로 위치를 강조 표시]이 최종 스타일은 유연하고 동적인 레이아웃을 만드는 데 있어 상대 위치 지정의 강력함을 보여줍니다.
이 랩에서는 참가자들이 처음부터 구조화된 웹 프로젝트를 생성하여 CSS 상대 위치 지정 (relative positioning) 을 적용하는 방법을 배웠습니다. 이 과정에는 HTML 프로젝트 디렉토리 설정, 이미지 자리 표시자가 있는 index.html 파일 생성, 위치 지정 기술을 시연하기 위한 샘플 이미지 다운로드가 포함되었습니다.
이 랩은 학습자가 기본 CSS 스타일시트를 만들고, 기본적인 스타일링 원칙을 설정하고, 왼쪽 및 오른쪽 이미지에 대한 상대 위치 지정을 구현하기 위한 기반을 마련하도록 안내했습니다. 단계별 지침을 따름으로써 참가자들은 웹 레이아웃 요소를 관리하고 CSS 위치 지정을 사용하여 컨테이너 내에서 이미지 배치를 제어하는 방법에 대한 실질적인 경험을 얻었습니다.
