Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

REturn 0;

후롱트 2주차 세션 회고 본문

멋쟁이 사자처럼 in cau

후롱트 2주차 세션 회고

zza.___.lng 2023. 4. 4. 23:38

후롱트 두 번째 세션(Flex)

Flex

레이아웃 배치 전용 기능
수직 구성 & 수평 구성

<div class="container">
      <div class="items">1</div>
      <div class="items">2</div>
      <div class="items">3</div>
      <div class="items">4</div>
      <div class="items">5</div>
      <div class="items">6</div>
    </div>

.container

Flex라는 속성의 영향을 받는 전체 공간
부모 요소

.items

Container 내에 적용된 설정에 따라 배치되는 요소들
자식 요소

Flex의 속성

Container에 적용하는 속성
Items에 적용하는 속성

Flex container 속성

<body>
    <div class="container">
      <div class="items">1</div>
      <div class="items">2</div>
      <div class="items">3</div>
      <div class="items">4</div>
      <div class="items">5</div>
      <div class="items">6</div>
    </div>
 </body>

container라는 class를 가진 div 안에 6개의 요소를 div로 감싸서 넣은 후 속성들을 넣으며 확인 하면

.container {
  display: flex;
}

먼저 display: flex;를 줬을 때는

이런 식으로 요소들이 수평(➡️) 방향으로 정렬된다.

.container {
  display: flex;
  flex-direction: column;
}

display: flex;와 flex-direction: column;을 줄 경우에는

이런 식으로 요소들이 수직(⬇️) 방향으로 정렬된다. (flex-direction: row;는 수평 방향으로 정렬하는 속성으로 default 값이기 때문에 flex-direction을 설정하지 않으면 위처럼 요소들이 수평 방향으로 정렬되는 것이다.)

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; or nowrap;
  width: 50%;
  height: 10%;
  background-color: rosybrown;
}

다음은 요소들을 column으로 정렬하고 높이를 설정 한 것이다. flex-wrap: wrap; 과 flex: nowrap; 속성은 요소들을 한 줄로 정렬했을 시, 설정한 높이를 벗어나면 줄 바꿈을 할 것인지, 높이에서 벗어나게 출력 할 것인지 결정하는 속성이다. 이해를 돕기 위해 배경색을 설정하고 실행해보면,

flex-wrap을 wrap으로 설정했기 때문에 높이를 벗어나면 줄 바꿈이 돼서 2줄로 출력되는 것을 확인할 수 있다.

위는 nowrap으로 설정했을 때 높이를 벗어나서 출력되는 것을 확인 한 모습이다.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 50%;
  height: 30%;
  background-color: rosybrown;
  justify-content: space-between;
}

새로 추가한 속성은 justify-content인데, flex-direction에서 설정한 중심축 방향으로 container 내에 요소들을 정렬 할 방식을 설정하는 속성이다. 위처럼 space-between을 주면 요소들 사이에 균일한 간격을 만들어서 정렬한다.

위처럼 container에 높이에 맞춰 설정한 중심축 방향(flex-direction이 column이기 때문에 수직(⬇️)방향)으로 요소들 사이에 균일한 간격을 만들어서 정렬된다.

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 50%;
  height: 30%;
  background-color: rosybrown;
  justify-content: space-between;
  align-items: center;
}

새로 추가한 속성은 align-items 인데, 앞서 설명한 justify-content와는 반대로 중심축의 교차축 방향으로 정렬한다.

위와 같은 코드 내에서는 중심축 방향이 flex-direction: column;이기 때문에 align-items는 수평(➡️) 방향 정렬 방법을 설정한다. center로 설정했기 때문에 요소들이 중앙으로 정렬된다.

Flex Item 속성

<body>
    <div class="container">
      <div class="basis">
        <div>1</div>
      </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>

1이라는 요소만 div로 감싸서 새로운 class를 부여하고

.basis {
  flex-basis: 31%; 
}

basis라는 class에 flex-basis를 설정하면,

이런 식으로 특정 요소에만 중심축을 기준으로 기본 길이를 설정할 수 있다. 현재는 flex-direction이 column이기 때문에 위처럼 중심축 기준 길이가 height로 설정되지만,

flex-direction을 row로 바꿔주면 위처럼 중심축 기준 길이가 width로 설정된다.

더 자세한 설명과 다양한 속성들이 잘 정리된 글이 있어 공유합니당

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com

반응형 웹 & 미디어 쿼리

반응형 웹

하나의 웹 사이트를 PC, 스마트폰, 태블릿 등 다양한 해상도의 디스플레이에 대응하도록 하는 것

반응형 웹 만드는 법

Viewport meta tag
- 내가 가지고가는 화면에 viewport를 설정하는 것
- 정말 간단하게 할 수 있음
grid
flexbox
media query
가변 단위(em, rem, % …) 페이지에 맞게 변할 수 있는 단위를 사용해서 적용

min-width: 1000px —> 1000픽셀 이상이면 다 해당

max-width: 1399px —> 1399픽셀 이하면 다 해당

데스크톱이나 테블릿에 맞게 덜어내는 것보다 붙이는게 더 쉽다

우리 서비스가 모바일 레이아웃이 기본인데 데스크탑에 대응하고 싶다하면 min-width를 쓰고 우리 서비스가 데스크탑 기준인데 모바일에 대응하고 싶다면max-width를 쓴다

과제

느낀점

운영진님께서 설명을 정말 잘해주셔서 강의를 듣는 순간에는 이해가 잘 됐지만 막상 과제를 하면서 써보려니 헷갈리고 기억이 잘 안났다. 회고를 작성하고 강의 내용을 복습하다보니 이해하는데 도움이 되었고, 더 사용해보면 손에 익을 것 같다는 생각이 들었다.

선택과제와 필수과제로 나뉘었지만 나한테는 다 필수 과제로 보였기 때문에 과제에 페이지들을 flex로도 만들어보고 grid로도 만들어 보았는데, 둘 다 이것저것 넣어보니 요소들이 원하는대로 배치 된 경우가 더 많았고, 제대로 이해하지 못하고 사용하려고 해서 그런지 시간이 원하는대로 배치하는데 시간이 굉장히 오래 걸렸다. (목요일부터 월요일까지...)

grid를 공부하여 과제를 어떤 식으로 만들지 구상은 화려하게 했지만 구상에 비해 이해력과 실력 부족으로 인해 grid로 만든 페이지가 마음에 들지 않았다. 나중에 팀으로 진행하는 프로젝트에서 디자이너가 요구하는 사항들을 들어주려면 이 정도로는 부족하겠다는 생각이 들었다.

grid공부하는데 많은 도움을 받았고 정리가 잘 된 글이 있어서 공유합니당.

https://velog.io/@2seorang/CSS-Grid-layout

[css] CSS Grid layout

CSS Grid layout 선택이유 개인 포트폴리오 홈페이지를 만들기 시작했는데 기존에 웹프로그램만 다뤄보다 모바일 환경에도 보기 적합한 구조를 위해 그리드 레이아웃을 적용하기로 했다. 다단칼럽

velog.io

https://studiomeal.com/archives/533

이번에야말로 CSS Grid를 익혀보자

이 포스트에는 실제 코드가 적용된 부분들이 있으므로, 해당 기능을 잘 지원하는 최신 웹 브라우저로 보시는게 좋습니다. (대충 인터넷 익스플로러로만 안보면 된다는 이야기) 이 튜토리얼은 “