page. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

14일차 수업 - flex 이용 레이아웃 만들기, 폰트 적용 법

1. flex 이용한 레이아웃 만들기 예제

• html 의 마크업 작성을 잘 익혀야 한다.
  • 최상위 엘리먼트 div 에는 class 를 container 로 준다, 최상위이기 때문
  • 레이아웃의 보통 구성은 header, 중앙, footer 로 구성되어 있다.
  • 예제에서는 중앙 부분을 메뉴가 있는 section 과 메인 내용이 있는 main 그리고 추가적인 내용을 aside 로 구성했다.
  • 기본적인 사항은 생략하고 아래 내용에서 중요한 것은 flex 를 사용했다는 것인데, 모든 레이아웃의 정렬을 flex 를 통해 자동 레이아웃을 했다.
  • 그리고 CSS 의 100vh(동적으로 사용하기 위해 dvh 사용한 듯, 자세한 사항은 검색 후 추가 공부할 것 (추가 정보 링크클릭))로 .container 의 범위를 보이는 화면 전체로 잡았다.
  • .container 에 display 를 flex로 주고 방향인 flex-direction 을 세로방향(column, 기본 값은 row) 으로 설정한다. 그러면 header, section, footer 가 세로 방향으로 정렬된다.
  • .content 에도 display:flex 로 설정하고 flex-grow=1; 로 설정한다. 이것은 남은 범위를 분할로 차지하겠다는 의미인데 header 와 footer 에는 그 값이 0 으로 되어 있으니 남은 공간은 .content(=section)이 차지하게 된다. 여기서 flex-grow의 기본 값은 ‘0’ 이기 때문에 지워도 무방하다.
  • 그리고 flex-direction : row; 로 설정하여 가로방향으로 정렬 설정한다.
    • flex-grow 는 부모 엘리먼트의 .container 의 flex를 자식 입장에서 써진 것
    • flex-direction 은 flex 된 부모 입장에서 써진 것
  • .container>.content>main 을 남은 공간을 다 차지하기 위해 flex-grow:1; 을 준 것
  • nav 와 aside 에는 flex-shrink:0; 과 flex-basis= (숫자); 값을 줌 ⇒ 기본 크기를 주고 flex-shrink:0; 을 줌으로 창이 줄어도 크기를 고정시키기 위함
  • main 에는

1) Html

<div class="container">
  <header>
    <h1>레이아웃 배우기</h1>
  </header>
  <section class="content">
    <nav>
      <!-- ul>li*4>a[href="#"]{메뉴 아이템 $} -->
      <ul>
        <li><a href="#">메뉴 아이템 1</a></li>
        <li><a href="#">메뉴 아이템 2</a></li>
        <li><a href="#">메뉴 아이템 3</a></li>
        <li><a href="#">메뉴 아이템 4</a></li>
      </ul>
    </nav>
    <main>
      <!-- lorem*1 -->
      Lorem, ipsum dolor sit amet consectetur
    </main>
    <aside>
      추가적인 내용
    </aside>
  </section>
  <footer>
    <a href="<https://se.sbsart.com/>">SBS 아카데미</a>
  </footer>
</div>

3) 출력

2)CSS

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
  font-family: "Noto Sans KR", sans-serif;
}

body, h1 {
  margin:0;
}

.container {
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  background-color:darkcyan; /* 임시 */
}

.container > header {
  background-color:red; /* 임시 */
  flex-grow:0; /* 이 부분을 지워보세요.(기본값 0) */
}

/* 콘텐트 시작 */
.container > .content {
  display:flex;
  flex-direction:row;
  flex-grow:1;
}

.container > .content > nav {
  background-color:gold; /* 임시 */
  flex-basis:150px;
  flex-shrink:0; /* 이 부분을 지워보세요.(기본값 1) */
}

.container > .content > main {
  background-color:pink; /* 임시 */
  flex-grow:1;
  flex-shrink:1; /* 이 부분을 지워보세요.(기본값 1) */
}

.container > .content > aside {
  flex-basis:120px;
  flex-shrink:0; /* 이 부분을 지워보세요.(기본값 1) */
  background-color:purple; /* 임시 */
}
/* 콘텐트 끝 */

.container > footer {
  flex-grow:0; /* 이 부분을 지워보세요.(기본값 0) */
  background-color:green; /* 임시 */
  display:flex;
  justify-content:center;
}

2. 폰트 적용 방법

1) 구글폰트 적용 방법

• 폰트는 다운 받는 사이트에 들어가서 link 혹은 @import 에 있는 내용을 복사해서 항상 최상단에 붙여넣은 후 사용한다.

• link 로 적용하는 방법

  1. 구글폰트 다운 들어가서 link 에 있는 내용 복사

  

  1. html 최상단에 복붙

  

  1. 구글폰트에서 CSS 붙일 부분 복사

     

  2. CSS에 붙여넣기

     

  3. 적용됨

  

• @import 로 적용하는 방법

  1. import 내용복사

     

  2. CSS에 붙여넣기

     

  3. Tektur 내용 복사

     

  4. CSS에 붙여넣기

     

2) 눈누 폰트 적용 방법

1. 눈누에서 웹폰트 적용 복사

   

2. CSS 최상단에 복붙

   

3. CSS에 font-family 적용

   

3. 두가지 폰트 적용 방법

• 한 엘리먼트에 영어와 한글을 별도의 폰트로 적용하기 위해서는
• font-family에 두 가지를 넣는다, (앞에가 영어폰트, 뒤에가 한글 폰트 순으로 된다.)