이 랩에서는 학생들이 CSS 절대 위치 지정 (absolute positioning) 을 사용하여 웹 페이지 요소의 레이아웃을 정밀하게 제어하는 방법을 배우게 됩니다. 이 랩은 참가자들이 프로젝트 환경을 설정하고, 이미지를 다운로드하며, HTML 구조를 생성하고, 이미지 배치를 조작하기 위해 절대 위치 지정 기술을 적용하는 과정을 안내합니다.
참가자들은 구조화된 프로젝트 디렉토리를 생성하고, HTML5 템플릿을 설정하며, 기본 리셋 스타일을 포함하는 CSS 파일을 준비하는 것으로 시작합니다. 실습 단계를 통해 학습자들은 일반적인 문서 흐름과 독립적으로 요소를 배치하는 방법을 탐구하여 CSS 절대 위치 지정을 사용하여 복잡하고 동적인 웹 레이아웃을 생성하는 실질적인 기술을 습득하게 됩니다.
이 단계에서는 CSS 절대 위치 지정을 배우기 위한 프로젝트 환경을 설정합니다. 전용 프로젝트 디렉토리를 생성하고 랩에 필요한 파일을 준비합니다.
먼저, 프로젝트 디렉토리로 이동하여 CSS 위치 지정 프로젝트를 위한 새 폴더를 생성해 보겠습니다.
cd ~/project
mkdir css-positioning-lab
cd css-positioning-lab이제 기본 프로젝트 구조를 생성해 보겠습니다. index.html 파일과 CSS 파일을 정리하기 위한 styles 디렉토리를 생성합니다.
mkdir styles
touch index.html styles/main.css디렉토리 구조를 확인해 보겠습니다.
tree예시 출력:
.
├── index.html
└── styles
└── main.cssWebIDE 에서 index.html 파일을 엽니다. CSS 위치 지정 랩을 위해 기본 HTML5 구조를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<!-- We'll add content in the next steps -->
</body>
</html>마찬가지로, styles/main.css 파일을 열고 기본 브라우저 스타일을 제거하기 위해 기본 리셋을 추가합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}이러한 초기 설정 단계는 CSS 절대 위치 지정 랩을 위한 깨끗하고 정리된 환경을 만듭니다. 다음 단계에서는 이미지를 다운로드하고 위치 지정 기술을 구현하기 시작합니다.
이 단계에서는 CSS 절대 위치 지정을 시연하는 데 사용할 이미지를 다운로드합니다. images 디렉토리를 생성하고 wget을 사용하여 샘플 이미지를 다운로드합니다.
먼저, 프로젝트 디렉토리로 이동하여 images 폴더를 생성합니다.
cd ~/project/css-positioning-lab
mkdir images
cd images이제 몇 가지 샘플 이미지를 다운로드해 보겠습니다. 시연 목적으로 임의의 이미지를 제공하는 Lorem Picsum 에서 자리 표시자 이미지를 사용합니다.
wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpg다운로드된 이미지를 확인해 보겠습니다.
ls -l예시 출력:
total 180
-rw-r--r-- 1 labex labex 59973 Jun 1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun 1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun 1 10:00 image3.jpg파일 크기를 확인하고 세 개의 서로 다른 이미지가 성공적으로 다운로드되었는지 확인합니다. 이러한 이미지는 다음 단계에서 CSS 의 절대 위치 지정 기술을 시연하는 데 사용됩니다.
이 단계에서는 절대 위치 지정을 시연하기 위한 HTML 구조를 생성합니다. index.html 파일을 수정하여 절대적으로 위치를 지정할 여러 이미지가 포함된 컨테이너를 추가합니다.
WebIDE 에서 index.html 파일을 열고 내용을 다음 코드로 바꿉니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="positioning-container">
<div class="image-wrapper">
<img src="images/image1.jpg" alt="Image 1" class="positioned-image" />
<img src="images/image2.jpg" alt="Image 2" class="positioned-image" />
<img src="images/image3.jpg" alt="Image 3" class="positioned-image" />
</div>
</div>
</body>
</html>이제 styles/main.css 파일을 업데이트하여 위치 지정 시연을 위한 기본 스타일을 설정합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.positioning-container {
width: 500px;
height: 500px;
border: 2px solid #333;
position: relative;
margin: 50px auto;
}
.image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.positioned-image {
width: 200px;
height: 300px;
border: 2px solid red;
}HTML 구조를 자세히 살펴보겠습니다.
positioning-container 클래스가 있는 컨테이너 div 를 생성했습니다.image-wrapper div 가 있습니다.positioned-image 클래스가 있습니다.CSS 는 기본 설정을 제공합니다.
position: relative가 컨테이너에 적용됩니다.이 단계에서는 CSS 절대 위치 지정을 사용하여 컨테이너 내에 이미지를 정확하게 배치하는 방법을 배웁니다. 절대 위치 지정은 요소를 가장 가까운 위치가 지정된 상위 요소에 상대적으로 원하는 위치에 정확하게 배치할 수 있도록 합니다.
styles/main.css 파일을 열고 CSS 를 수정하여 이미지에 절대 위치 지정을 적용합니다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.positioning-container {
width: 500px;
height: 500px;
border: 2px solid #333;
position: relative;
margin: 50px auto;
}
.image-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.positioned-image {
width: 200px;
height: 300px;
border: 2px solid red;
position: absolute;
}
/* Positioning for individual images */
#image1 {
top: 0;
left: 0;
}
#image2 {
top: 100px;
right: 0;
}
#image3 {
bottom: 0;
left: 150px;
}이제 index.html 파일을 업데이트하여 이미지에 고유한 ID 를 추가합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Absolute Positioning Lab</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="positioning-container">
<div class="image-wrapper">
<img
src="images/image1.jpg"
alt="Image 1"
id="image1"
class="positioned-image"
/>
<img
src="images/image2.jpg"
alt="Image 2"
id="image2"
class="positioned-image"
/>
<img
src="images/image3.jpg"
alt="Image 3"
id="image3"
class="positioned-image"
/>
</div>
</div>
</body>
</html>절대 위치 지정에 대한 주요 사항:
position: absolute는 요소를 일반적인 문서 흐름에서 제거합니다..positioning-container) 에 상대적으로 위치가 지정됩니다.top, bottom, left, 및 right 속성은 정확한 배치를 제어합니다.예시 레이아웃:
이 마지막 단계에서는 절대 위치 지정 레이아웃을 확인하고 이미지가 컨테이너 내에서 어떻게 배치되는지 이해합니다. 웹 브라우저에서 index.html 파일을 열어 CSS 절대 위치 지정의 결과를 확인합니다.
구현한 절대 위치 지정의 주요 측면을 검토해 보겠습니다.
.positioning-container {
position: relative; /* Creates a positioning context */
width: 500px;
height: 500px;
}.positioned-image {
position: absolute; /* Takes images out of normal document flow */
width: 200px;
height: 300px;
}
#image1 {
top: 0;
left: 0;
} /* Top-left corner */
#image2 {
top: 100px;
right: 0;
} /* 100px from top, aligned right */
#image3 {
bottom: 0;
left: 150px;
} /* Bottom, 150px from left */이미지가 어떻게 배치되는지 관찰합니다.
top, bottom, left, 및 right 속성으로 제어됩니다.더 실험하려면 CSS 에서 위치 지정 값을 수정하여 이미지 레이아웃에 어떤 영향을 미치는지 확인하십시오.
이 단계에서는 구조화된 웹 개발 환경을 설정하여 CSS 절대 위치 지정의 기본 사항을 배웁니다. 초기 단계는 index.html 파일과 styles 폴더를 포함하는 명확한 파일 구조를 갖춘 전용 프로젝트 디렉토리를 생성하고, 서로 다른 브라우저에서 일관된 스타일 지정을 보장하기 위해 기본 CSS 리셋을 구현하는 것입니다.
이 단계는 학습자가 깔끔한 프로젝트 설정을 구축하고, HTML 및 CSS 파일을 준비하며, 절대 위치 지정 기술을 탐색하기 위한 기반을 만드는 과정을 안내합니다. 디렉토리 생성, 파일 초기화, 초기 HTML 및 CSS 구성 추가와 같은 체계적인 단계를 따르면, 참가자는 웹 개발 프로젝트를 구성하고 고급 CSS 레이아웃 기술을 준비하는 실질적인 경험을 얻게 됩니다.
