패스트캠퍼스 챌린지 04일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online

 

 챌린지 04일차. 스타벅스 예제를 진행하였고 헤더와 드롭다운 메뉴들을 만들었다. 그간 position 개념에 대해서 조금 헷갈렸었던 부분이 있었는데 로고를 가운데로 배치하는 과정에서 position에 대해 조금 더 자세하게 배울 수 있었다. 

 

position : relative;

position: relative 속성일 경우 상대적으로 위치를 지정할 수 있다.

<div style="
    position: relative;
    top: 100px;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: grey;
  "
></div>

position: relative;의 top: 100px; left: 100px; 속성 때문에 원래 위치보다 위에서 100px, 왼쪽에서 100px 떨어진 위치에 배치된다.

 

position: absolute;

position: absolute 값일 경우 position: relative 속성인 상위(부모) 요소를 기준으로 상대 위치를 지정할 수 있다.

.container{
    width: 450px;
    height: 250px;
    background-color: royalblue;
    position: relative;
}
.item {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

결과값

 

 상위속성의 container를 기준으로 상대적인(absolute의 위치) 위치를 지정할 수 있다. 위(top)에서 0인 지점, 아래(bottom)에서 0인 지점에 margin값을 auto(상하) 0(좌우);로 주었기에 브라우저가 직접 계산을 하여 상하의 너비가 같게 자동으로 배치해준다.

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는프론트엔드개발초격차패키지online