250x250
반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 고척돔맛집
- 양주가족모임
- 성수7월팝업
- 코딩
- 코스트코할인기간
- 코스트코4월둘째주할인상품
- 코스트코할인소식
- 코스트코신상
- 성수팝업
- 코스트코3월첫째주할인상품
- 편의점신상
- 스파르타코딩클럽
- 코딩입문
- 영등포역맛집
- 코딩공부
- 코딩기초
- 구일역맛집
- seoungsupopupstore
- 고척동맛집
- 코린이 #코딩 #코딩공부 #코딩독학 #코딩학원 #코딩초보 #비쥬얼스튜디오코드 #비주얼스튜디오코드 #코딩프로그램 #css #html
- 성수팝업스토어
- 코스트코할인
- 동양미래대학교맛집
- 영등포맛집
- 양주맛집
- 성수8월팝업
- 영등포타임스퀘어맛집
- 코꼬미
- 용리단길맛집
- 코딩초보
Archives
- Today
- Total
쫑's바른생활
[코딩 초보 개발일지] 상세_08. position 본문
728x90
반응형
본문그림의
left 와 top 설명글의 위치가 서로바뀌었습니다.
참고해주세요.
position
: static | relative | absolute
요소가 배치되는 방식
<설정>
<div id="box">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
</div>
static
position은 기본적으로 static 정렬(기본값)
작성된 순서대로 수직정렬됨
(static 값을 주나 안주나 동일함)
<style>
#box{
width: 500px;
height: 800px;
background-color: lightsalmon;
}
.square1{
width: 200px;
height: 200px;
background-color: blue;
/* position: static; */
}
.square2{
width: 200px;
height: 200px;
background-color: red;
/* position: static; */
}
.square3{
width: 200px;
height: 200px;
background-color: green;
/* position: static; */
}
</style>
relative
원래 위치를 기준으로 상대적(relative)으로 배치
728x90
<style>
#box{
width: 500px;
height: 800px;
background-color: lightsalmon;
}
.square1{
width: 200px;
height: 200px;
background-color: blue;
/* position: static; */
}
.square2{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: 50px;
top: 50px;
}
.square3{
width: 200px;
height: 200px;
background-color: green;
/* position: static; */
}
</style>
absolute
절대적(absolute)으로 요소를 배치.
상위요소(부모요소)를 기준으로 배치됨.
아래 예시에서, absolute의 배치 기준은
상위요소인 파란색 static.
만약 파란색 static 조차 없다면,
body가 기준이되어 배치됨
relative와 같이쓰일 수 있음.
<style>
#box{
width: 500px;
height: 800px;
background-color: lightsalmon;
}
.square1{
width: 200px;
height: 200px;
background-color: blue;
/* position: static; */
}
.square2{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.square3{
width: 200px;
height: 200px;
background-color: green;
/* position: static; */
}
</style>
relative_추가설명
absolute와 함께 쓰임.
absolute에 relative를 부여하여 relative가 부모요소가 되도록 할 수 있음.
=relative인 요소를 기준으로 배치됨
=부모요소일 때에만 relative를 부여할 수 있음.
<설정 : square2에 square4가 자식요소일 때>
<body>
<div id="box">
<div class="square1"></div>
<div class="square2">
<div class="square4"></div>
</div>
<div class="square3"></div>
</div>
</body>
<style>
#box{width: 500px;
height: 800px;
background-color: lightsalmon;
}
.square1{width: 200px;
height: 200px;
background-color: blue;
/* position: static; */
}
.square2{width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.square3{width: 200px;
height: 200px;
background-color: green;
}
.square4{width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 50px;
top: 50px;
}
</style>
여기서 잠깐!
absolute를 쓰기위해 부모요소에 relative를 기준점으로 써줄 수 있고,
absolute를 쓰기위해 부모요소에 absolute를 또 써도
relative와 같은맥락으로 사용된다.
다만 다른점은
절대적인 위치이기 때문에
상대적으로 위치를 차지하는 relative와 달리
주변요소와 상대적으로 공존하지않고,
별도로 띄워진다고 생각하면 된다.
<style>
#box{width: 500px;
height: 800px;
background-color: lightsalmon;
}
.square1{width: 200px;
height: 200px;
background-color: blue;
/* position: static; */
}
.square2{width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
.square3{width: 200px;
height: 200px;
background-color: green;
}
.square4{width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
left: 50px;
top: 50px;
}
</style>
끝!
728x90
반응형
'개발일지 > 상세' 카테고리의 다른 글
[코딩 초보 개발일지] 상세_07. transform:rotate (0) | 2023.04.16 |
---|---|
[코딩 초보 개발일지] 상세_06. 반응형 알아보기(미디어쿼리 @media) (1) | 2023.04.13 |
[코딩 초보 개발일지] 상세_05. 블록/인라인 요소 (0) | 2023.04.05 |
[코딩 초보 개발일지] 상세_04. 제목 태그, 목록 태그 (0) | 2023.04.05 |
[코딩 초보 개발일지] 상세_03. 주석 배우기 (0) | 2023.04.04 |
Comments