# Flexbox

133개의 포스트
post-thumbnail

CSS에 대해 몰랐던 내용 정리-5

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.요소의 사이즈가 불명확하거나 동적으로 변화할 때도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간

2022년 9월 28일
·
0개의 댓글
·
post-thumbnail

CSS flexbox

flexbox는 행과 열 형태로 자식 요소를 배치하기 위한 레이아웃 속성이다.테스트 페이지 바로가기flex container: 정렬할 요소들을 감싸는 부모 요소flex item: flex container의 자식 요소(정렬할 요소) 간단한 예제로 <ul> 안의

2022년 9월 23일
·
0개의 댓글
·

CSS Item Flexbox

드림코딩앨리님의 유튜브 강의를 보고 정리!!!!🤣!youtube7neASrWEFEM

2022년 9월 14일
·
0개의 댓글
·
post-thumbnail

CSS Container Flexbox

드림코딩 앨리님 유튜브 강의를 보고 내가 나중에 참고하려구 정리해놓는 글!!!!🤣!youtube7neASrWEFEM1\. display: flex;일단 flexbox를 사용하기 위해선 item 을 감싸고 있는 container를 display: flex; 로 지정해줘

2022년 9월 13일
·
0개의 댓글
·

flex & Grid

flex & Grid에 대한 공부 자료 정리

2022년 9월 10일
·
0개의 댓글
·

flexbox: justify-content와 align-items의 차이

기본적으로 justify-content는 가로로 움직이고, align-items는 세로로 움직이게 한다. flex-direction이 column일 때는 justify-content는 세로로 움직이고 align-items는 가로로 움직이게 한다.

2022년 9월 8일
·
0개의 댓글
·
post-thumbnail

CSS Flexbox - Container 속성값

$\\rightarrow$ default는 row이고, row-reverse, column, column-reverse가 있다. $\\rightarrow$ default는 nowrap(빼곡하게 쭉 정렬)이고, wrap(다음 라인으로 넘어감), wrap-reverse(

2022년 9월 7일
·
0개의 댓글
·
post-thumbnail

[HTML/CSS] Flex 속성에 대해 알아보자

오늘 블로깅할 FLEX 는 '플렉스 해버렸지 뭐얌' 에 FLEX 가 아닙니다. flex는 css에 display 속성 중 하나로써 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법입니다. flexible (유연한) 에서 따온 대로 sizing (엘리먼트의 width

2022년 8월 30일
·
0개의 댓글
·
post-thumbnail

Unit 6 회고

저번주 조금 어려웠던 자바스크립트를 지나 html, css를 거치며 계산기의 mock-up을 만드는 과제를 수행했다. html과 css는 직관적으로 눈으로 볼 수 있다는 점이 재미있다보니 다양하게 시도해보며 나만의 계산기 목업을 만드는 과정이 너무 즐거웠다. 이를 바탕

2022년 8월 30일
·
0개의 댓글
·
post-thumbnail

Unit6 - [HTML/CSS] 활용

🔥 레이아웃 : 각각의 요소를 목적에 맞게 배치하는 것 1. 와이어프레임(Wireframe) : 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계 와이어프레임을 보고, 어떤 목적을 가진 프로그램인지 유추할 수 있도록 해야한다. 목업(Mock-up)

2022년 8월 29일
·
0개의 댓글
·
post-thumbnail

S1 Unit 6. [심화] flexbox

이 포스트는 S1 Unit 6. HTML/CSS 활용에서 다뤘던 flexbox의 내용을 보다 자세히 정리하기 위하여 작성했습니다.

2022년 8월 29일
·
0개의 댓글
·

Flexbox

flexbox = Flexible Box Moduleflexbox 내의 아이템 간의 공간 배분과, 정렬 기능을 제공하는 레이아웃 모델레이아웃을 다룰 때 한 번에 하나의 차원(행 or 열)만을 다룬다. = 1차원 모델display: flex 부모 박스 요소에 적용해, 자

2022년 8월 29일
·
1개의 댓글
·

[CSS]flexbox,display,flex-direction,flex-flow,flex-warp

컨테이너안에 item들이 있어야 하는 즉, 부모와 자식간의 관계를 가지고 있어야 성립2차원의 평면이 아닌 1차원의 요소들을 정렬하기 위해 나온 개념felx containeritem의 부모felx item부모의 자식간의 관계에서 자식의 해당 main axis행의 축, 주

2022년 8월 24일
·
0개의 댓글
·
post-thumbnail

Day 4. Flexbox

Flexbox를 사용하여 박스를 늘리거나 줄여 레이아웃을 구성할 수 있다. Flex 레이아웃을 만들기 위한 HTML 구조는 다음과 같다.

2022년 8월 24일
·
0개의 댓글
·
post-thumbnail

Flexbox Froggy 24

두세 번만 더 써보면 완벽하게 체득될 듯ㄷㄷㄷ

2022년 8월 9일
·
0개의 댓글
·
post-thumbnail

CSS Flexbox

CSS Flexbox에 대한 공부

2022년 8월 8일
·
0개의 댓글
·

TIL #20 flexbox에서는 hidden 속성이 안먹힌다...?!! [22.07.22]

정말 계속 삽질하다가 알게 된 뜻밖의 사실이럴 경우 hidden이 전혀 안먹힌다....?!처음에는 css flexbox속성 때문인지 모르고, 오타나 자바스크립트 코드만 계속 보고 있었다... 근데 개발자도구에서 element를 봐도 hidden이 잘 부여가 되고 아무리

2022년 7월 22일
·
0개의 댓글
·