2023.12.27(수) 슈퍼코딩 부트캠프 신입연수원 Day 2 중간보고 + 일일보고

이상혁·2023년 12월 27일

1:1관리형부트캠프,Backend 개발공부 백엔드 백엔드 개발자 백엔드공부 슈퍼코딩

supercoding

목록 보기

1/9

중간보고

배운 내용 정리

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;
}