레이아웃 설계시 어떠한 HTML 요소를 내가 원하는 위치에 결정할수 있습니다.
이때 쓰는 CSS의 요소는 position (포지셔닝) 속성인데요. 오늘은 간단하게 position속성을 이용하여 box를 내가 원하는 위치에 넣어보도록 할게요.
CSS 포지셔닝 position 속성 부모요소와 자식요소
1. html코드의 <body> </body> 태그안에 부모요소 class와 자식요소 class를 지정합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>※주의. CSS 내부링크를 사용하지 않았습니다. 외부링크를 사용하는 편입니다.
내가 원하는 위치의 좌표를 넣기전에 position 속성이라는 것을 사용해서, 부모요소와 자식요소의 값이 다르게 지정해줘야 합니다. 사람은 개떡같이 말해도 찰떡같이 알아듣는 눈치가 있지만..(없는 사람도 있음) 컴퓨터는 감정이 없기에 찰떡같이 명확하게 표기해야 합니다.
| position 부모요소 | .parent { position : relative; } |
| position 자식요소 | .child { position : absolute; } |
2. 자, 이렇게 css파일에 부모요소와 자식요소를 각각 relative 값, absolute 값을 넣어줍니다.
물론 배경색상(background-color) 너비(width) 높이(height)까지 넣어줘야 박스가 보이겠죠? 박스를 만들어 놓아야 위치속성이 적용되었는지 확인할 수 있으니깐요. *저는 추가로 자식요소(.child)에 border값을 넣어 보았습니다.
.parent {
background-color:rgb(92, 72, 72);
width: 500px;
height: 1000px;
position: relative;
}
.child {
background-color: rgb(59, 36, 36);
border: solid 5px rgb(20, 2, 2);
width: 100px;
height: 100px;
position: absolute;
}※주의. CSS 내부링크를 사용하지 않았습니다. 외부링크를 사용하는 편입니다.
[▲ css 코드 간단 해설]
.parent= <div class="parent">
.child= <div class="child">
width(박스의 너비값) height(높이값) position: relative; (부모요소) position: absolute; (자식요소)
▼ 출력 값 (코드를 넣으면 나타나는 화면)
초콜릿 모양의 직사각형이 나오고, 자식요소의 100px의 정사각형 박스는 맨 상단의 왼쪽에 다크초코색 한개가 있네요.
여기서 저는 이 한 조각 초코(자식요소, 100px의 정사각형)를 맨 아래 하단으로 위치시키고 싶어요.
3. 내가 원하는 좌표 입력
이제야 내가 원하는 좌표값을 입력해 봅시다. 좌표값은 쉬운점이 영어로 오른쪽, 왼쪽, 위, 아래로 속성을 표시합니다. 아래 그림과 같이 내가 원하는 위치를 입력하면 됩니다. 참고로 저는 한 조각짜리 초코를 맨 아래 하단에 위치시키고 싶다고 했어요.
/* 부모요소 position: relative */
/* 자식요소 position: absolute */
.parent {
background-color:rgb(92, 72, 72);
width: 500px;
height: 1000px;
position: relative;
}
.child {
background-color: rgb(59, 36, 36);
border: solid 5px rgb(20, 2, 2);
width: 100px;
height: 100px;
position: absolute;
right: 0;
bottom: 0;
}※주의. CSS 내부링크를 사용하지 않았습니다. 외부링크를 사용하는 편입니다.
▲위의 코드와 같이 .child { ...생략 .... right : 0; bottom : 0;}을 넣었습니다. 이 말은 오른쪽 끝 , 맨 아래 끝 이라는 말로 컴퓨터는 알아듣습니다.
▼ 드디어 위치시킨 출력 화면
'HTML | CSS' 카테고리의 다른 글
| 어도비 XD 그리드 설정시 자동 입력 값 오류 해결 (0) | 2022.05.31 |
|---|---|
| <a>태그로 간단하게 문서 내로 이동하기 (0) | 2021.12.21 |
| CSS 인라인 블록 요소 레이아웃 스타일 (0) | 2021.11.03 |
| CSS 우선순위, 순서대로 간단하게 알아보자 (0) | 2021.10.31 |
| HTML5 시멘틱 구조 태그 (0) | 2021.10.28 |
