중간보고
배운 내용 정리
flex
flex는 css에 display 속성 중 하나로써 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법이다.
<body>
<div id="parent">
<div class="child">box1</div>
<div class="child">box2</div>
</div>
</body>* {
box-sizing: border-box;
margin : 10px;
padding : 10px;
}
#parent {
width : 300px;
height : 100px;
display: flex;
flex-direction: row;
border : 3px solid red;
}
.child {
flex: 1 0 auto;
border : 3px solid green;
}위 코드와 같이 부모 요소 안에서 비율의 맞추어서 크기를 지정해준다.
여기에 자식 요소가 추가 되더라도 알아서 크키를 맞춰준다.
flex-direction을 통해서 정렬을 해주는 위치를 정할 수 있다.
row는 가로, column은 세로 row, column에 -reverse를 붙혀주면 진행 방향의 반대로 정렬을 해준다.
그리고 부모 요소에 jsut-content, align-items를 통해서 각각 수평과 수직의 정렬 위치를 조정을 할 수 있다.
position
position은 요소의 위치를 지정해 주는 옵션이다.
이 position을 이용해서 요소를 중앙에 두기 위해서는
먼저, 부모 요소에 position:relative를 넣어주고
자식 요소에 position:absolute를 넣어준다.
<header>
<div class="inner">
<div class="box">box</div>
</div>
</header>body{
margin:0;
}
header{
background-color:yellow;
}
header .inner{
background-color:red;
width:100px;
margin:0 auto;
height:100px;
position:relative;
}
header .inner .box{
border:2px solid black;
position:absolute;
top:0;
bottom:0;
height:20px;
margin:auto 0;
}알게 된 점
flex와 position에 대해서 전에 배웠던 내용이 상기가 되었다.
flex를 통해서 부모 요소 안에서 자식 요소들이 어떻게 적용이 되는지 알게 되었다.
부모 요소 안에서 자식 요소를 정리되게 보이게 하고 싶을 때 사용하면 매우 좋을 것 같다.
또 position을 통해서 부모 요소와 자식요소를 브라우저에서 원하는 위치에 위치시키는 것에 대해서 잘 알 수 있었다.
회고
개발을 시작하고 처음 배웠던 내용을 복습할 수 있는 기회여서 좋았다.
앞으로 3주 동안 열심히 복습히며 공부하는 습관을 가져야겠다.
개발 공부 하기 위해 만든 블로그