CSS-1) CSS 기초 정리 1

[CSS 문법 정리 - 1]

flex container는 바로 붙어 있는 children한테만 적용이 된다.

<div class="first-parent">

    <div class="first-children">

        <div class="second-children" />

    </div>

</div>

 이런 html 코드 구성이 있을 때, css에서 first-parent에 flex container를 적용하면, 해당 내용은 first-children한테만 적용되고, second-children에는 적용이 되지 않는다. 즉, display : flex 와 같은 배치를 원할 경우, 우리가 지정하고 싶은 children의 parent요소에 display : flex 값을 적용해야 한다. 

 main axis는 배치 방향에서 가로 방향의 축을 나타내고, cross axis는 세로 방향의 축을 나타낸다. 만약 내가 가로(main axis)로 요소를 움직이고 싶다면 justify-content를 사용하고, 세로(cross axis)로 요소를 움직이고 싶다면 align-items를 사용한다.

 

[justify-content]

justify-content : center; 

-> 지정된 요소를 반응형으로 계속해서 브라우저의 중앙으로 위치하게 조정한다.

justify-content : space-between;

-> 말 그대로 지정된 요소의 사이에 공간을 준다.

justify-content : space-around;

-> 지정된 요소의 좌우 공간에 동일한 여백을 만들어 준다.

[align-items]

align-items : center;

-> children을 parent의 세로 축의 중앙에 위치하게 해준다.

align-items : stretch;

-> children을 parent의 height만큼 늘려준다.

align-items : flex-end;

-> children을 parent의 맨 아랫부분에 위치하게 해준다.

[flex-diraction]

flex-diraction : row;

-> item을 가로로 정렬해주는 default 값이다.

flex-diraction : column;

-> item 정렬 기준을 세로로 변경한다. 이 속성을 사용하면, justify-content와 align-items의 적용 기준이 서로 바뀌게 된다.

[children 요소를 지정해서 속성을 주는 법]

class="parent"라는 요소 안에 class="children" 이라는 요소가 3개(다수)가 있을 경우

{align-self}

.children:nth-child(2) {

    align-self : center;

}

이렇게 코드를 짜면 class="children" 중 2번째에 위치한 요소가 center 라는 속성을 받는다.

{order}

.children:nth-child(2) {

    order: 1;

}

 이렇게 코드를 짜면 class="children" 중 2번째에 위치한 요소가 3번째에 위치한 요소의 자리로 넘어간다. 즉, 1 2 3 에서 1 3 2 로 변경되는 것이다. 모든 요소의 default는 order=0이기 때문에 nth-child(2)만 order=1로 변경되면 1 3 2로 변경되는 것이다.

 만약 nth-child(3)도 order=1로 변경하면, 다시 1 2 3 순으로 돌아온다. 그 상태로 nth-child(2)를 order=2로 변경하면, 다시 1 3 2 순으로 변경된다. 이 정도면 이해에 도움이 됐을 거다. 

 더 많은 내용을 정리하고 싶었는데, 저번에 작성한 Momentum2 프로젝트에서 apikey를 숨기는 걸 깜빡하고 github에 push 해버렸다는 걸 gitguardian을 통해서 알게 됐다. git과 github을 처음 다뤄보는 터라 어떻게 해결해야 하는지 꽤 장시간 헤맸고, 시간이 많이 지나버렸다. 이런 경우 해결 방법들과 그 중간중간 나오는 오류들에 대해서도 한 번 블로그 글에서 다뤄봐야겠다.

"기록은 기억을 이길 수 없다" 

이제 막 시작해서 그런지 아직 너무 재미있다. 계속 정진하자!