Position 속성
- Relative
부모태그에 대하여 상대적인 좌표를 설정
<body>
<div>
<div class="relative box">div</div>
<div class="relative2 box">div2</div>
<div class="relative3 box">div3</div>
</div>
</body>.box {
width: 500px;
height: 50px;
border: 3px solid red;
font-size: 20px;
}
.relative {
position: relative;
top: 100px;
left: 100px;
}
.relative2 {
position: relative;
top: 200px;
left: 200px;
}
.relative3 {
position: relative;
top: 300px;
left: 300px;
}
- Absolute
relative, fixed, absolute 속성을 가지는 부모에 대하여 절대적으로 위치 지정할 때 사용
img는 부모인 div태그에 대하여 절대적인 위치로 지정
top 에서 10px, 오른쪽으로 부터 50px 떨어진 절대적 위치로 지정
<body>
<div class="relative">
<input type="text" placeholder="검색어 입력">
<img class="absolute top-10" alt="HTML" src="https://s3.ap-northeast-2.amazonaws.com/cdn.wecode.co.kr/icon/search.png">
</div>
</body>
.absolute {
position: absolute;
}
.top-10 {
top: 10px;
right: 50px;
}
Display attribute
- None
태그를 화면에서 보이지 않게 설정 - block
태그를 block형식으로 지정 - inline
태그를 inline형식으로 지정 -> margin은 적용되지만/ width, height 적용안됨 - inline-block
margin, width, height 적용안됨
<body>
<span class="start-box">none-start</span>
<div id="display-none-test">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
<span class="end-box">none-end</span>
<span class="start-box">block-start</span>
<div id="display-block-test">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
<span class="end-box">block-end</span>
<span class="start-box">inline-start</span>
<div id="display-inline-test">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
<span class="end-box">inline-end</span>
<span class="start-box">inline-block-start</span>
<div id="display-inline-block-test">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
</div>
<span class="end-box">inline-block-end</span>
</body>.start-box {
background-color: green;
}
.end-box {
background-color: red;
}
#display-none-test {
display: none;
}
#display-block-test {
display: block;
background-color: yellow;
width: 300px;
height: 300px;
margin: 50px;
}
#display-inline-test {
display: inline;
background-color: yellow;
width: 500px;
height: 500px;
margin: 50px;
}
#display-inline-block-test {
display: inline-block;
background-color: yellow;
width: 500px;
height: 500px;
margin: 50px;
}
Float
Float속성은 그림과 글자를 배치할때 주로 사용하지만, 전체 레이아웃을 잡을 때도 사용가능
ex1) Float속성을 사용하여 왼쪽 부터 배열하는 예제
<body>
<img src="./img_js.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="box">floating-box</div>
<div class="box">floating-box2</div>
</body>img {
float: left;
width: 100px;
height: 100px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 20px;
}
floating-box가 JS그림 아래쪽에 나올것으로 예상했지만 위그림과 같이 나왔다.. 수정하자..
<body>
<div>
<img src="./img_js.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<div class="box">floating-box</div>
<div class="box">floating-box2</div>
</div>
</body>
img {
float: left;
width: 100px;
height: 100px;
}
div {
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin: 20px;
}
div 태그로 묶어주고 overflow: hidden적용해서 해결
developer