css position
요소의 위치를 결정하는 방식을 설정
1. 정적 위치 지정방식 (static)
기본값
html 요소의 위치를 결정하는 기본적인 방식
top, left, right, bottom 속성들을 사용할수 없음
단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정
2. 상대 위치 지정방식 (relative)
HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식을
기본 위치는 정적 위치 지정방식일 때 결정되는 위치를 의미
- 입력 코드-
<body>
<h2>상대 위치 지정방식</h2>
<div class="relative1">상대위치 지정방식1</div>
<div class="relative2">
상대 위치 지정방식2
<div>자식div</div>
</div>
</body>- 입력 스타일 코드-
<style>
.relative1{
width: 200px;
background-color: deeppink;
padding: 20px;
margin-left: 50px;}
.relative2{
width: 400px;
height: 200px;
background-color: dodgerblue;
padding: 20px;
position: relative;
margin: 20px;
top: 20px;
left: 100px;}
.relative2>div {
width: 30%;
height: 20%;
border: 3px dashed blue;
margin: 0 auto;}
</style>
3. 고정 위치 지정방식 (fixed)
뷰포트를 기준으로 위치를 설정하는 방식
웹 페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 코드입력 -
<body>
<h2>고정 위치 지정방식</h2>
<div id="fix"> 장바구니 목록</div>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias possimus modi, corporis eos laborum quasi distinctio temp
ore optio labore numquam deleniti. Voluptate, quasi amet. Labore non
nihil inventore quisquam vitae.
</p>
</body>- 바디 값안에 아이디 네임을 fix로 지정해주고 그 아래에 p 태그로
스크롤링하면 내려갈수 있을 정도의 lorem 을 쓰고 스타일 값을 입력한다.
- 스타일 코드 입력-
<style>
#fix {
width: 100%;
height: 200px;
background-color: gold;
position: fixed;
/*top: 0*/
}
</style>- 아이디 fix 안에 들어갈 스타일의 값을 입력한다. 골드색의 박스 모양 스타일
- 출력결과 -
fix 의 준 스타일값은 계속 위치 지정이 되어있고 스크롤을 올리면 안에 있는 p 값에 있는 텍스트들만 스크롤이 되는 방향으로 움직이는 것을 볼수 있다.
4. 절대 위치 지정방식 (absolute)
뷰포트를 기준으로 위치를 설정하는 방식
조상 요소를 기준으로 위치를 지정할 수 있음
조상 요소를 가지지 않으면 body 요소를 기준으로 위치를 결정한다
- 입력 코드-
<body>
<h2>절대 위치 지정방식</h2>
<div id="relative"></div>
<div id="modal"></div>
<div id="wrap">
<div class="box ab1">1</div>
<div class="box ab2">2</div>
<div class="box ab3">3</div>
<div class="box ab4">4</div>
</div>
</body>
- 스타일 코드-
#wrap {
width: 500px;
height: 500px;
border: 3px solid red;
position: relative;
}
.ab1 {
top: 0;
right: 0;}
.ab2 {
bottom: 0;
left: 0;}
.ab3 {
bottom: 0;
right: 0;}
.ab4 {
top: 200px;
left: 200px;}
.box {
width: 50px;
height: 50px;
background-color: deeppink;
color: white;
position: absolute;}- class 를 감싸고 있는 wrap 속성 에다가 3px 의 빨간 테두리 박스를 고정시켜 놓고
그 안에 각각의 클래스 박스 안에 있는 b1 ,b2 b3,b4 의 값을 지정한후
각각의 b를 감싸고 있는 box클래스에 크기 , 높이, 박스의 색, 그리고 위치 지정 absolute 를 넣었더니
출력 되었을때 지정한 값에 고정되어 있는 모습을 볼수 있다.
- 출력 결과-
5. z-index
HTML 요소의 위치를 설정하면 위치 방식에 따라 겹쳐서 나타나게 될 수 있음
겹처지는 요소들이 쌓이는 순서를 결정할 때 사용
순서는 음수, 양수 모두 사용할 수 있음
크기가 클 수록 위에 위치, 작을 수록 아래에 위치
= z-index에 부여하는 값이 클수록 더 우선으로 보여진다.
6. float
HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만들어줌
float를 적용 받은 요소들의 다음 요소들이 끌어올려짐
float를 적용 받은 요소들의 방향을 결정이 가능 (left, right)
컨텐츠 크기 만큼 영역을 설정
float를 적용 받은 요소는 다른 요소보다 위쪽에 위치
수평 방향 정렬 시 사용
- 입력 코드-
<body>
<h2>float1</h2>
<img src="./parade.png" alt="퍼레이드" /> Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Perferendis quia recusandae fuga! Nam esse,
exercitationem ex veniam quas officia deserunt voluptate dicta? Asperiores
iusto nobis doloremque inventore cupiditate. Optio, dolore? Lorem ipsum
dolor sit amet consectetur adipisicing elit. Obcaecati cupiditate labore
excepturi quaerat minus qui commodi voluptatem eos alias. Earum facilis
minima assumenda tempore commodi repellendus tempora, sapiente quos facere.
</body>
- 스타일 코드 입력 -
<style>
img {
float: right;
margin-right: 20px;
}
</style>- 이미지에 방향을 오른쪽으로 해두었고 , 오른쪽의 마진 값을 20px 넣어두었다.
- 출력 결과-
7. 레이아웃
- 레이아웃 나누기
- 입력코드 -
헤더부분과 , 아래 있을 본문의 내용 넣는다 .
<aside>의 태그 안에 사이드 바안에 넣을 태그들을 넣는다.
- 스타일 코드-
- 전체적으로 기본적인 마진 패팅 값을 없애주기위해 0으로 해놓는다.
- 전체적으로 1px 의 회색 테두리를 만들어 모양을 잡아준다.
- 각각의 헤더, 섹션, 사이드 바에 넣을 속성들을 넣어준다.
- 아래에 footer 가 겹치지 않도록 clear:both 의 속성을 주어 맨 아래로 보이게 한다.
- 출력 결과-
- 지정값의 위치가 각각 잘 자리 잡아 있는 모습이 보인다.
8. 다단레이아웃
- 텍스트 단을 column 속성으로 나누어서 다단을 생성
다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미
column-count : 나누어질 단의 개수를 설정
column-rule : 단과 단 사이의 구분선 스타일을 설정
column-gap : 단과 단 사이의 여백을 설정
column-span : 단과 안의 포함된 요소를 다단편집에서 해제
- 코드 입력-
col 이라는 클래스 값안에 p 태그로 해 안에 들어갈 내용 text를 적는다.
- 스타일 입력-
<style>
.col {
text-align: justify;
padding: 20px;
background-color: antiquewhite;
column-count: 3;
column-gap: 30px;
column-rule: 3px solid red;
}
</style>
- 출력 결과-
- 한줄 수업평-
- 전반적인 웹 페이지 안에 레이아웃 잡는 법에 대한 것을 배웟으며 ,
그 레이아웃 안에 어떻게 텍스트를 배치 하고 원하는 값으로 조절하며 배치 해야 하는지 알게 되는 수업이 였다.
이 지식을 바탕으로해 웹 페이지 div 값을 잡고 어떻게 배치 해야 하는지 다은 웹 사이트드들 참고해
연습해야 겠다.
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY09] (0) | 2022.05.24 |
|---|---|
| [프론트 엔드 DAY08] (0) | 2022.05.23 |
| [프론트 엔드 DAY06] (0) | 2022.05.02 |
| [프론트 엔드 DAY05] (0) | 2022.04.27 |
| [프론트 엔드 DAY04-1] (0) | 2022.04.27 |
댓글