1. 학습내용
오늘은 position과 기본 레이아웃을 공부했다.
<style>
.parent-static{
width: 300px;
/* height: 300px; */ /*3)*/
background-color: antiquewhite;
}
.child-static{
position: static; /*기본값- 아무변화 없음*/
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* margin-top: 100px; */ /*1)*/
/* top: 100px; */ /*2)*/
}
</style>
</head>
<body>
<!--position static
- 기본값(설정하지 않아도 기본적용)
- 2차원 속성 -> float 사용하면 위치 지정 가능
[3가지 체크 사항]
1) 부모 자식 간 마진 병합? (발생)
2) top, right, bottom, left 속성 사용 가능? (사용불가)
3) 자식 높이가 부모 높이에 영향? (영향있음)
-->
<div class="parent-static">
<div class="child-static"></div>
</div>
</body>
-position: relative
<style>
.box1{
width: 300px;
height: 300px;
background-color: palegreen;
}
.parent-relative{
width: 300px;
/* height: 300px; 3) */
background-color: antiquewhite;
}
.child-relative{
position: relative;
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* margin-top: 100px; /*1) */
/* top: 100px; /*2) */
}
.box2{
width: 300px;
height: 500px;
background-color: plum;
}
</style>
</head>
<body>
<!--position: relative
- 큰 레이아웃 작성시에 자주 사용
-
[3가지 체크 사항]
1) 부모 자식 간 마진 병합? (발생함)
2) top, right, bottom, left 속성 사용 가능? (사용가능- 원래 자기 위치)
3) 자식 높이가 부모 높이에 영향? (영향있음)
-->
<div class="box1"></div>
<div class="parent-relative">
<div class="child-relative"></div>
</div>
<div class="box2"></div>
</body>
-position: absolute
<style>
.box1{
width: 300px;
height: 300px;
background-color: palegreen;
}
.parent-absolute{
width: 300px;
/* height: 300px; 3) */
background-color: antiquewhite;
position: relative; /*좌표(top)사용시 이동기준을
브라우저 -> 원위치
바꾸고 싶을 때
부모요소에 position: relative로 만든다.*/
}
.child-absolute{
position: absolute;
width: 100px;
height: 100px;
background-color: rebeccapurple;
/* margin-top: 100px; 1) */
top: 100px;
}
</style>
</head>
<body>
<!--position: absolute
-
-
[3가지 체크 사항]
1) 부모 자식 간 마진 병합? (발생하지 않음)
2) top, right, bottom, left 속성 사용 가능? (사용가능- 기준은 브라우저)
3) 자식 높이가 부모 높이에 영향? (영향없음)
-->
<div class="box1"></div>
<div class="parent-absolute">
<div class="child-absolute"></div>
</div>
<div class="box2"></div>
2. 어려웠던 점 및 해결방안
postition에서 relative 와 absolute의 가 설명이 이해하기 어려워 구글링해보았다.
relative는 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하여 이해가하면된다. 요소의 위치 지정은 top, bottom, left, right 속성을 이용해서, 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다.
absolute는 배치기준을 자신이 아닌 상위 요소에서 찾는다. 만약에 해당 요소 상위에 position 속성이 static이 아닌 요소가 없다면, DOM 트리에 최상위에 있는 body 요소가 배치 기준이 된다. 보통은 부모공간을 기준으로 이동하기 때문에, 부모공간 태그에 relative를 적고 자식태그에 absolute를 적어주는 편이다.
참고자료: https://www.daleseo.com/css-position/
레이아웃을 배우는 와중에 float와 clear에 대해 새롭게 배워서 아래에 작성했다.
<style>
#container{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 100px;
background-color: brown;
}
#contents{
width: 800px;
height: 500px;
background-color: blue;
float: left;
}
#sidebar{
width: 200px;
height: 500px;
background-color: aquamarine;
float: right;
}
.clearfix{clear: both;}
#footer{
width: 100%;
height: 100px;
background-color: brown;
}
</style>
</head>
<body id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<section id="contents">
<h2>본문</h2>
<p>대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다. 법관은 헌법과 법률에 의하여 그 양심에 따라 독립하여 심판한다. 공무원인 근로자는 법률이 정하는 자에 한하여 단결권·단체교섭권 및 단체행동권을 가진다.</p>
</section>
<aside id="sidebar">
<h2>사이드 바</h2>
<ul>
<li>사이드1</li>
<li>사이드1</li>
<li>사이드1</li>
</ul>
</aside>
<div class="clearfix"></div>
<footer id="footer">
<h2>푸터</h2>
<p>푸터 내용 ©</p>
</footer>
</body>보통 float를 상위 태그에 작성하면 바로 아래에 적는 태그는 내가 float요소를 적용하고 싶지 않은데도, 자동으로 적용되게 되어 있다. 만약 위에 float에 left요소를 넣었다면 아래의 태그의 스타일에 clear하고 left를 넣으면 된다. left와 right가 둘다 있다면 clear:both를 넣으면 적용되지 않는다.
보통 적용하고 싶지 않은 태그에 바로 써도 되지만, 위의 예시와 같이
<div class="clearfix"></div>
<footer id="footer">
<h2>푸터</h2>
<p>푸터 내용 ©</p>
</footer>라고 만약 footer에 float를 적용하고 싶지 않다면 그태그 위에 빈공간 태그를 쓰고 clear를 써주면 된다.
추가로 after로 적은 것들 중 마지막 after 내용을 없애는 방법
<style>
a:before{
content: '☆';
}
a:after{
content: " |";
}
/* 마지막 속성에 | 제거 */
.menu li:last-child :after{
content:"";
}
</style>
<nav class="menu">
<ul>
<li><a href="#">소개</a></li>
<li><a href="#">검색</a></li>
<li><a href="#">나의 페이지</a></li>
</ul>
</nav> 3. 학습소감
그냥 배열을 맞춰보고 쓰던 position에 대해 자세히 알수 있어 좋았고, clear에 대해 새롭게 배울수 있어서 편했다.
