끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들? 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들?

쓰리별 2021. 3. 2. 21:29

5-4. flex : holy grail(성배) layout // 

대략 이래 생김.

얘들은 화면 전체를 사용. 화면의 크기가 작아질수록 main의 크기만 작아지는 형태.

오늘의 목표 : holy grail layout 만들어보기! 일단 다음과 같이 코드를 짜보자.

 

<!DOCTYPE html>

<html>

  <head>

 

  </head>

  <body>

    <div class="container">

      <header>

         <h1>생활코딩</h1>

      </header>

      <section class="content">

         <nav>

             <ul>

               <li>html</li>

               <li>css</li>

               <li>javascript</li>

             </ul>

         </nav>

         <main>

             생활코딩은 일반인을 위한 코딩 수업입니다.

        </main>

         <aside>

            AD

        </aside>

    </section>

    <footer>

        <a href="https://opentutorials.org">홈페이지</a>

    </footer>

  </div>

</body>

</html>

 

일단 보기 편하게 container 밑에 header, section, footer를 줄여서 보자.

우린 이제 이 3가지 태그를 어떻게 하고 싶나? 수평으로 나란히 보여주고 싶어! 얘네 3 아이템들의 부모의 역할을 하는 컨테이너 즉, 바깥에 있는 컨테이너라는 클래스 값을 갖는 녀석에게 display값을 flex;로 줘야한다! 이게 시작! 

 

일단, 우리가 flex를 주기 위해선 item들의 부모인 container에게 출발점인 display값을 flex로 줘야 한다.

.container{display:flex;}

flex값을 주면 홈페이지는 위처럼 ‘수평’으로 이동하게 된다!

왜냐? flex-direction의 기본값 ‘row’가 지정되어 있기 때문. 값을 ‘column’으로 바꾸면,

flex값을 지정하지 않았을 때처럼 header, section, footer가 수직으로 된 것을 볼 수가 있다.

 

flex-direction값을 column으로 바꾼 후, 헤더에 border 값을 주기 위해 다음과 같이 코드를 추가 해보겠다.

header{

border-bottom:1px solid gray;

}

또, 푸터에 대해선 다음과 같이

footer{

border-top:1px solid gray;

} 속성값을 부여한다.

 

그럼 이젠, section에서 nav, main, aside 태그를 가로방향으로 차곡 차곡 쌓이게끔 하려면 어떻게 해야 할까?

class의 속성값이 content인 엘리먼트 즉, nav, main, aside의 바깥에 있는 부모의 역할을 하는 content에 display값으로 flex를 줘야 시작!

.content{display:flex;}

즉, nav, main, aside 태그가 얼추 나란히 있게 되는 것을 볼 수가 있다.

여기서 네비게이션의 오른쪽과 어사이드의 왼쪽에 줄을 그어보자.

그러려면 코드로는 컨텐트 내부에 있는 내비게이션과 어사이드니까 다음과 같이 된다.

 

.content nav{

border-right: 1px solid gray;

}

.content aside{

border-left: 1px solid gray;

}

.content nav{ border-right: 1px solid gray; } .content aside{ border-left: 1px solid gray; }

이제 이 화면을 좌우로 줄이면 main 크기만 줄어드는 것을 확인할 수가 있다.

 

여기서 이제 nav와 aside에게 flex-basis 값을 주겠다.

nav, aside{

flex-basis: 150px;

}

화면의 여백이 없어지는 부분부터 3개의 태그 즉, 아이템 모두의 화면이 줄어들게 된다. (★ main에 내용이 좀 많아야 티가 난다. ★)

화면의 ‘줄어듬’과 관련된 flex의 속성은 shrink이다. 그래서 nav, aside에게 shrink값을 0으로 주자. 그러면 배웠듯이, nav와 aside 부분의 컨텐츠 크기는 고정되어 고통을 분담하지 않고 main만의 크기가 줄어드는 것을 확인할 수가 있다!! ★

 

이제 여기에 header라는 태그에 padding-left: 20px;을 추가하고,

footer라는 태그엔 padding:20px; text-align: center; 값을,

main에는 padding:10px; 값을 줘보자.

 

★★★ 당연히 어려운 내용이지만, 익숙해지면 된다! ★★★

 

5-5. flex : 기타 속성들

https://opentutorials.org/course/2418/13526 페이지 하단에 가면 ‘코드펜’으로 된 예제 활용.

이거로 어떤 속성들이 있는지 공부하기 ★ ★ ★ ★

컨테이너에 주는 속성인지 아이템에 주는 속성인지는 속성 이름 옆에 파란박스, 빨강박스 있응께!

 

컨테이너)

1) flex-direction

2) flex-wrap의 기본값 : nowrap;

nowrap과 wrap의 차이는 wrap을 하면 컨테이너의 크기보다 아이템들의 합이 크다면, 자동으로 줄바꿈이 되어 아래 줄로 내려 간다.

3) align-items의 기본값 : stretch;

컨테이너가 flex되는 순간 아이템들은 컨테이너의 높이 값과 같아진다. 그건, 아이템들이 stretch 상태이기 때문. 자신들의 컨텐츠 값만큼 변하게 하고 싶다면 flex-start, end나 center, baseline 값을 주면 된다. 그럼 얘는 언제 사용하느냐?

 

저번에 우리가 만든 사이트에서 보여지는 값을 화면 가운데서 시작하게 만들고 싶다! 라고 한다면,

body{

display: flex;

align-items: center;

} ※ 이렇게 추가해주면 된다고 나와있는데, 그렇게 해도 되질 않아서 찾아보니,

html의 규칙인 DTD에서 html을 지우고 <!DOCTYPE>만 치니 적용되었다..왜 그런진 모르겠다..※

 

즉, align-items는 수직과 관련한 정렬을 결정한다고 한다.(flex-direction의 기본값인 row인 경우, 열 방향의 정렬 상태를 지정한다는 것이다!)

 

4) justify-content

: 수평의 정렬과 관련되어 있다. (헷갈리면 flex-direction의 기본값인 row로 설정되어 있을 때, justify-content는 행 방향의 정렬 상태를 지정한다.) 기본값은 flex-start이다.

 

우리가 만든 사이트가 현재 화면 전체를 쓰니까, 폭을 줄여서 화면의 가운데에 위치시켜보자!

컨테이너에 width값을 줘보자. ex) width:800px;

근데 이러면 오른쪽에 여백이 생기니까 가운데에 위치시켜야겠지? 어떻게?

컨테이너의 부모인 <body>에 justify-content:center; 라고 준다. 아래 그림처럼.

 

body{justify-content:center;}

그리고 컨테이너에 추가로 border:1px solid gray; 값 주자.

 

 

5) align-content

기본값은 flex-start.를 하면 위로 쭉 올라간다. end하면 아래로 쭉 내려간다. align-items처럼!! 그럼 무슨 차이가 있느냐??

 

align-items는 컨테이너 밑에 있는 아이템 전체를 정렬시킨다!

align-content는 space-between값을 주게 되면, 한 줄 한 줄 되어있는 것을 볼 수가 있는데, 즉 그 한 줄을 그룹이라 한다. 이 그룹과 그룹 사이를 정렬시켜주는 것이 align-content라고 할 수 있다! ★

 

아이템)

1) align-self

align-items로 지정된 상태에서 특정 아이템만 다르게 지정하고 싶을 때 사용하는 속성이다.

2) flex-grow

3) flex-shrink

4) 우리가 배운 flex-basis와 grow, shrink를 축약한 것.

(약간 font-property와 같은 개념인 듯)

ex) .item{

flex: 1 0 100%

}

1은 grow 2는 shrink 3은 basis의 값이라고 생각.

 

5) order

: 아이템들의 순서를 바꾸고 싶을 때 사용.

ex) 우리가 만든 에디터 코드에서 nav, main, aside 순이지만, 만약 에디터에 main이 먼저 오도록 하고 싶다면 main만 nav 위로 올린다고 해서 웹브라우저에도 순서가 바뀐 결과가 적용되진 않는다. 그럼에도 에디터에서 main을 nav위로 올린 상태에서 웹브라우저에서 순서는 nav, main, aside 원래 순서로 나오게 하고 싶다면! 다음과 같이 영역에 order값을 추가하면 된다. ★

nav{

order:0;

}

main{

order: 1;

}

aside{

order: 2;

}

이러면 화면에 나오는 건 똑같다.

 

쥰나 어렵네

저작자표시 (새창열림)

'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글

[인프런/생활코딩] 섹션5. Multi column(다단) 기능  (0) 2021.03.04
[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인  (0) 2021.03.04
[인프런/생활코딩] 섹션5-1~3. flex_diplay 속성? flex-direction? flex-grow & shrink??  (0) 2021.03.02
[인프런/생활코딩] 섹션4. 레이아웃 기본 (3) position-fixed?  (0) 2021.02.26
[인프런/생활코딩] 섹션4. 레이아웃 기본(2) position - relative VS static? absolute? (얘! 정신차리렴)  (0) 2021.02.26
'프로그래밍 언어/CSS 공부' Related Articles more
Comments