오늘은 부트캠프 4일차.
어제 TIL 작성하다가 팀원들끼리 회의를 했는데 금요일 제출 전까지 댓글 기능 구현이 어려울 것 같다는 의견이 나와서 부랴부랴 코드 짜느라 마무리도 못하고 갔다.
아무튼 1일차 뼈대코드를 작성하면서
display: flex 에 대해 조금 더 이해할 수 있었다.
flex-direction: column; // 개체를 세로로 정렬
justify-content: space-between; // 개체간 간격을 일정하게 (시작점, 끝점 여백X)특히 이 두 가지 속성? 은 이번에 다이어리 페이지를 만들면서 너무 쏠쏠하게 썼다.
컨셉이나 디자인 관련해 가운데 정렬 할 일이 많아서 자주 쓰게 된 것 같다.
그리고 이번 다이어리 꾸미기에 제~일 많이 사용한 속성.
position: relative; // 부모 개체에게 적용
position: absolute; // 자식 개체에게 적용이 코드를 어떻게 썼냐면
이렇게 썼다. 컨셉이 다이어리다 보니 다꾸 하듯이 내 페이지를 꾸미고 싶어서 스티커를 붙인 것 처럼 만들고 싶었다. 두 개체를 어떻게 겹쳐야하는지 몰라서 검색도 해보고 튜터님께 여쭤봤는데 position을 사용하면 된다고 조언해주셨다.
position: relative; top: 10px; // 개체를 원래 위치(기본 위치)에서 위로 10px 이동
position absolute; top: 10px; // 부모 개체(relative가 적용된)의 top 위치에서 아래로 10px 이동
style="position: absolute; bottom: 0px; right: 30px; transform: rotate(-5deg);"
// 다롱이 사진 위 텍스트에 적용한 코드relative는 속성만 적용하고 이동값은 주지 않았고, absolute 개체에만 이동값을 줬다!
relative 안에 텍스트가 들어가야해서 사진과 텍스트를 div로 감싼 뒤 div에 relative 속성을 줬고, bottom 0px 을 넣어서 텍스트를 밑으로 정렬하고 right 30px로 div의 오른쪽에서 왼쪽으로 30px 이동시켰다.
그리고 덤으로 z-index 값도 배워왔는데 만약 개체가 여러개 있고 모두 position이 static이 아닐 때 개체를 겹치면 가장 밑에 코드를 적은 개체가 자동으로 맨 위에 노출된다.
<div class="a">
<div class="b"></div>
<div class="c"></div>
</div>지금은 c가 가장 아래에 적혀져 있으니까 자동으로 c가 맨 앞으로 왔다. 그런데 c에 z-index 값을 주면
<div class="a">
<div class="b"></div>
<div class="c" style="z-index: -1;"></div>
</div>이렇게 red 보다 뒤로 가는 걸 볼 수 있다!
