[2023 신입부원 기초 스터디] 한승훈 3주차

0.인사말

안녕하세요.

모두 즐거운 한 주 보내고 계신가요.

오늘은 안좋은 소식을 하나 전하드리게 되어 진지한 모습으로 찾아뵙게 되었습니다.

이미 아시는 분들은 알고 계시겠지만,

라인프렌즈 이모티콘이 네이버 블로그에 더이상 등장하지 못하게 되었습니다.

...

1.CSS Float, Clear

float 속성

float 의 사전적인 의미는 '뜨다"라는 뜻입니다.

만약 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 됩니다.

그리하여 인접한 텍스트 또는 인라인 요소가 그 주위를 자연스럽게 감싸게 합니다.

자주 사용하는 float 속성 값은 아래와 같습니다.

none - 기본값으로 요소를 띄우지 않음
left - 왼쪽에 띄움
right - 오른쪽에 띄움
inherit - 부모 요소로부터 상속함
initial - 기본값으로 설정함

clear 속성

clear는 취소하다 라는 뜻으로 float: left; 혹은 float: right; 값을 취소합니다.

clear: none; - 기봇값
clear: left; - 왼쪽을 취소
clear: right; - 오른쪽을 취소
clear: both; - 왼쪽 오른쪽 둘다 취소

2. CSS Position

position 속성

position 속성은 HTML 요소를 배치하는 방법을 지정합니다.

static
static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게하며, 기본값이다.
relative
static과 마찬가지로 요소가 문서의 일반적인 흐름에 따라 배치되게 합니다. static과 차이점은 요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다는 점입니다.
absolute
absolute는 요소가 문서의 일반적인 흐름을 따르지 않게한다. absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.
fixed<aside> 뷰포트(viewport)란? 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역이다.
</aside>
fixed 역시 absolute와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거됩니다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 됩니다.
sticky
- top속성을 적용해야 스크롤 임계점에서 고정이됨.
- left, right, bottom 속성을 사용할 수 없음.
sticky는 요소가 HTML 문서안에서 static과 같이 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성입니다.

위치 속성

position 속성이 배치하는 방법이라면 top left bottom right 속성은 요소를 원하는 곳으로 최종적으로 위치 시키는 속성이다. 이 속성은 position: static; 에서는 적용되지 않는다.

top
left
bottom
right

3.배경 이미지 스타일

background-color

HTML 요소의 배경 색을 지정합니다.

background-image

HTML요소에 배경 이미지를 한 개 또는 여러 개를 지정할 수 있습니다.

background-repeat

배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.

repeat - 가로, 세로 반복
no-repeat - 반복하지 않음
repeat-x - 가로 반복
repeat-y - 세로 반복

background-posiiton

배경 이미지의 초기 위치를 설정합니다.

background-attachment

배경 이미지를 뷰포트 내에서 고정할지 말지를 지정하는 속성입니다.

scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. (기본값)
fixed : 움직이지 않습니다.
local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

background

background-image background-repeat background-position background-attachment 속성을 한꺼번에 선언할 수 있습니다.

보통 이렇게 backgound 속성으로 많이 사용합니다.

background-size

요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.

contain - 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.
cover - 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정합니다. (많이 사용함)
auto - 배경 이미지의 원본 크기를 유지.
<length> - 원본 크기의 너비/높이를 주어진 값으로 늘리거나 줄임. 음수는 유효하지 않습니다.
<percentage> - 배경 위치 지정 영역의 지정된 백분율에 해당하는 크기로 이미지를 늘립니다.

4. 그라데이션

그라데이션은 두 가지 이상의 색상이 연결되면서 자연스럽게 보여주는 것을 말합니다. 그라데이션은 크게 선형 그라데이션과 원형 그라데이션이 있습니다.

선형 그라데이션

linear-gradient() 함수는 두 개 이상의 색상이 직선을 따라 점진적으로 변화하는 것을 말합니다.

to 키워드를 사용하여 방향을 결정 할 수 있다.
deg 키워드를 사용하여 각도값을 지정할 수 있다.
background: linear-gradient(#e66465, #9198e5); background: linear-gradient(to bottom, white, blue); background: linear-gradient(45deg, white, blue); background: linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%);

원형 그라데이션

타원형
radial-gradient() 함수를 사용하여 타원형 그라데이션을 만들 수 있다.
정원
radial-gradient(circle) 함수를 사용하여 타원형 그라데이션을 만들 수 있다.

5. 가상 클래스/요소

가상 클래스 (Pseudo class)

가상 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다.

문법
선택자:가상클래스이름 {속성: 속성값;}
예제
a:hover { color: orange; } input:focus { color: red; }
대표적인 CSS 가상 클래스
- :link - 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 <a> <area> <link> 중 방문하지 않은 모든 요소를 선택합니다.
- :visited - 사용자가 방문한 적이 있는 링크를 나타냅니다
- :active - 사용자가 활성화한 요소(버튼 등)를 나타냅니다.
- :hover - 사용자의 마우스 포인터가 요소 위에 올라가 있으면 선택됩니다
- :focus - 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
- :nth-child - 형제 사이에서의 순서에 따라 요소를 선택합니다.
- :not(selector) - not(selector) 안에 포함된 요소를 제외시키겠다는 뜻입니다.

대표적인 가상 클래스를 사용할 때는 link → visited → hover → active 순으로 선언하여 사용하길 권장합니다. 왜냐하면 순서가 달라지면 적용이 안될 수도 있습니다.

가상 클래스 MDN

가상 요소 (Pseudo element)

가상 요소(pseudo-element)는 해당 HTML 요소의 특정 부분만을 선택할 때 사용합니다.

문법
선택자::가상요소이름 {속성: 속성값;}
예시
/* 모든 p 요소의 첫 번째 줄. */ p::first-line { color: blue; text-transform: uppercase; }
대표적인 CSS 가상 요소
- ::first-letter - 텍스트의 첫 글자만을 선택합니다. 단, 블록 레벨 요소(block-level-element)에만 사용할 수 있습니다.
- ::first-line - 텍스트의 첫 라인만을 선택합니다. 단, 블록 레벨 요소(block-level-element)에만 사용할 수 있습니다.
- ::before - 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다.
- ::after - 특정 요소의 내용(content) 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다.
- ::selection - 해당 요소에서 사용자가 선택
- 한 부분만을 선택할 때 사용합니다.

6. 반응형 웹 디자인

반응형 웹 사이트란?

웹 사이트에서 PC화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 각각에 맞는 최적의 화면을 보여주는 홈페이지 입니다.

뷰포트(viewport)

뷰포트란 웹 브라우저에서 실제 내용이 표시되는 영역입니다. 모바일 viewport와 PC의 viewport는 그 크기가 다릅니다. 그렇기 때문에 반응형 웹 에서는 viewport에 맞게 화면을 보여줘야 할 필요가 있습니다.

이럴때 사용하는 메타태그가 뷰포트 메타태그 입니다.

메타 뷰포트 태그 지정하는 법

메타 뷰포트 태그 속성

width : 뷰포트 가로
height : 뷰포트 세로
user-scalable : 사용자 확대/축소 가능 여부
initial-scale : 초기 화면 비율
maximum-scale : 최대 화면 비율
minimum-scale : 최소 화면 비율

일반적인 사용법

뷰포트의 너비를 디바이스(스마트폰) 화면 너비에 맞추고 초기화면 배율을 1로 지정

뷰포트 단위

vw(viewport width): 뷰포트 너비. 100vw = 뷰포트 width 의 100%
vh(viewport height): 뷰포트 높이. 100vh = 뷰포트 height 의 100%
vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값.
vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값.

미디어 쿼리

접속하는 디바이스나 뷰포트에 따라 특정 CSS 스타일을 사용하는 방법이다.

미디어 쿼리 문법

@media 키워드를 사용해 특정 미디어(디바이스)에서 어떤 CSS를 적용할 것인지 지정함. 이때 그 특정 구간을 중단점(breakpoint)이라고도 한다.

기본형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

only : 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다. (거의 사용 안함)
not : not 다음에 지정하는 미디어 유형을 제외합니다.
and : 조건을 여러개 연결해서 추가할 수 있습니다.@media screen and (min-width: 768px) and (max-width: 1439px)
예) 미디어 유형이 screen이면서 최소 너비가 768px 이고 최대 너비는 1439px일 경우에 적용할 CSS

미디어 유형

all : 모든 장치에 적합합니다.
print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
screen : 주로 화면이 대상입니다.
speech : 음성 합성장치 대상입니다.

자주 사용하는 미디어쿼리 조건

min-width : 웹 뷰포트의 최소 너비
max-width: 웹 뷰포트의 최대 너비

7.FlexBox

과거에는 웹 페이지 레이아웃은 CSS의 display float position 등과 같은 속성을 사용해 구현했습니다.하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 많은 한계가 있습니다.

그래서 구현이 어려운 레이아웃을 간단하게 구현할 수 있게 CSS3에 추가된 레이아웃 방식이 flexbox입니다.

웹 레이아웃이란? HTML 요소를 효과적으로 배치, 구성 하는 것을 말합니다.

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS의 새로운 레이아웃 방식이다.

flexbox의 장점을 한 마디로 표현하면 **'복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다'**라고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

flexbox 구성

flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸고 있는 상위 부모 요소인 flex container로 구성된다.

flex container : flex item 을 감싸고 있는 부모 요소
flex item : flex container 안에 있는 여러개의 자식 요소

flexbox 만들기

flexbox를 만드는 방법은 간단하다. **정렬하려는 요소(flex item)**의 **부모 요소(flex container)**에 display: flex속성을 지정하면 된다.

/* 일반적으로 display: flex를 지정한다. */
.flex-container {
	display: flex;
}

위 코드처럼 display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다. flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다.

부모 요소가 inline 요소인 경우 inline-flex을 지정한다.

flexbox 주축

flex item은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정된다. flex-direction 속성의 기본값은 row이다.

row : 주축의 방향이 왼쪽에서 오륵쪽 방향이며, 주축의 방량에 따라 flex item이 정렬된다.
column : 주축의 방향이 위에서 아래 방향이며, 주축의 방량에 따라 flex item이 정렬된다.

flexbox 속성 분류

flexbox에서 정렬이나 배치에 사용하는 속성은 부모 요소인 flex container에 지정하는 속성과 자식 요소인 flex item에 지정하는 속성으로 나누어진다.

flex container

전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의한다.

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex item

자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다.

flex
flex-grow
flex-shrink
flex-basis
order
align-self

8.flex container 속성

flex-direction

flex-direction 속성은 flex container 의 주축(main axis) 방향을 설정한다.

row : 좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다.
row-reverse : 우에서 좌로(rtl) 수평 배치된다.
column : 위에서 아래로 수직 배치된다.
column-reverse : 아래에서 위로 수직 배치된다.

flex-wrap

flex-wrap 속성은 flex container 자식 요소인 여러개의 flex item을 한 줄로 또는 여러줄로 배치한다. flex-wrap 속성은 flex container의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.

nowrap : flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값이다. 각 flex item의 폭은 flex container에 들어갈 수 있는 크기로 축소된다.
하지만 flex item 들의 width의 합계가 flex container의 width 보다 큰 경우 flex container를 넘치게 된다. 이때 overflow: auto;를 지정하면 가로 스크롤이 생기며 컨테이너는 넘치지 않는다.
wrap : flex item들의 width의 합계가 flex container의 width보다 큰 경우, flex item을 개행하여 배치한다. 기본적으로 좌에서 우로, 위에서 아래로 배치된다.
wrap-reverse : wrap 과 동일하나 아래에서 위로 배치된다.

flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 단축속성 이다. 기본값은 row nowrap이다.

justify-content

flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

flex-start : main start(좌측)를 기준으로 정렬한다. 기본값이다.
flex-end : main end(우측)를 기준으로 정렬한다.
center : flex container의 중앙에 정렬한다.
space-between : 첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지 flex item은 균등한 간격으로 정렬된다.
space-around : 모든 flex item은 균등한 간격으로 정렬된다.

align-content

flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.

참고로 justify-content 속성은 flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

stretch : 모든 flex item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. align-content 속성의 기본값이다.
flex-start : 모든 flex item은 flex container의 cross start 기준으로 stack 정렬된다.
flex-end : 모든 flex item은 flex container의 cross end 기준으로 stack 정렬된다.
center : 모든 flex item은 flex container의 cross axis의 중앙에 stack 정렬된다.
space-between : 첫번째 flex item의 행은 flex container의 상단에 마지막 flex item의 행은 flex container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.
space-around : 모든 flex item은 균등 분할된 공간 내에 배치 정렬된다.

align-items

flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. align-items 속성은 모든 flex item에 적용된다.

stretch : 모든 flex item은 flex container의 높이(cross start에서 cross end까지의 높이)에 꽉찬 높이를 갖는다. align-items 속성의 기본값이다.
flex-start : 모든 flex item은 flex container의 cross start 기준으로 정렬된다.
flex-end : 모든 flex item은 flex container의 cross end 기준으로 정렬된다.
center : 모든 flex item은 flex container의 cross axis의 중앙에 저열된다.
baseline : 모든 flex item은 flex container의 baseline을 기준으로 정렬된다.

align-items는 flex line을 기준으로 정렬하는 반면, align-content는 flex line을 정렬한다.

9. flex item 속성

order

flex item의 배치 순서를 지정한다. HTML 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히 재배치할 수 있다. 기본 배치 순서는 flex container에 추가된 순서이다. 기본값은 0이다.

flex-grow

flex item의 너비에 대한 확대 인자를 지정한다. 기본값은 0이고 음수값은 무효하다.

모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖는다.

두번째 flex item의 flex-grow 속성값은 3으로 지정하면 다른 flex item보다 더 넓은 너비를 갖는다.

flex-shrink

flex item의 너비에 대한 축소 인자를 지정한다. 기본값은 1이고 음수값은 무효하다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지한다.

기본적으로 모든 flex item은 축소된 상태로 지정하고 두번째 flex item만 축소를 해제(flex-shrink: 0;)하면 원래의 너비를 유지한다.

flex-basis

flex item의 너비 기본값은 px, % 등의 단위로 지정한다. 기본값은 auto이다.

flex

flex-grow flex-shrink flex-basis 속성의 단축속성(shorthand)이다. 기본값은 0 1 auto 이다.

align-self

align-items 속성(flex container 속성으로 flex item을 flex container의 수직 방향(cross axis)으로 정렬한다.)보다 우선하여 개별 flex item을 정렬한다. 기본값은 auto이다.

10. FlexBox

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이다.

flexbox 구성

flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸고 있는 상위 부모 요소인 flex container로 구성된다.

flex container : flex item 을 감싸고 있는 부모 요소
flex item : flex container 안에 있는 여러개의 자식 요소

flexbox 만들기

flexbox를 만드는 방법은 간단하다. **정렬하려는 요소(flex item)**의 **부모 요소(flex container)**에 display: flex속성을 지정하면 된다.

/* 일반적으로 display: flex를 지정한다. */
.flex-container {
	display: flex;
}

위 코드처럼 display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다. flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li를 생각하면 쉽게 이해할 수 있다. 부모 요소가 inline 요소인 경우 inline-flex을 지정한다.

flexbox 주축

flex item은 주축(main axis)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정된다. flex-direction 속성의 기본값은 row이다.

row : 주축의 방향이 왼쪽에서 오륵쪽 방향이며, 주축의 방량에 따라 flex item이 정렬된다.
column : 주축의 방향이 위에서 아래 방향이며, 주축의 방량에 따라 flex item이 정렬된다.

flexbox 속성 분류

flexbox에서 정렬이나 배치에 사용하는 속성은 부모 요소인 flex container에 지정하는 속성과 자식 요소인 flex item에 지정하는 속성으로 나누어진다.

flex container

전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의한다.

display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex item

자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다.

flex
flex-grow
flex-shrink
flex-basis
order
align-self

11. flex container 속성

flex-direction

flex-direction 속성은 flex container 의 주축(main axis) 방향을 설정한다.

row : 좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다.
row-reverse : 우에서 좌로(rtl) 수평 배치된다.
column : 위에서 아래로 수직 배치된다.
column-reverse : 아래에서 위로 수직 배치된다.

flex-wrap

nowrap : flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값이다. 각 flex item의 폭은 flex container에 들어갈 수 있는 크기로 축소된다.
하지만 flex item 들의 width의 합계가 flex container의 width 보다 큰 경우 flex container를 넘치게 된다. 이때 overflow: auto;를 지정하면 가로 스크롤이 생기며 컨테이너는 넘치지 않는다.
wrap : flex item들의 width의 합계가 flex container의 width보다 큰 경우, flex item을 개행하여 배치한다. 기본적으로 좌에서 우로, 위에서 아래로 배치된다.
wrap-reverse : wrap 과 동일하나 아래에서 위로 배치된다.

flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 단축속성 이다. 기본값은 row nowrap이다.

justify-content

flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

flex-start : main start(좌측)를 기준으로 정렬한다. 기본값이다.
flex-end : main end(우측)를 기준으로 정렬한다.
center : flex container의 중앙에 정렬한다.
space-between : 첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지 flex item은 균등한 간격으로 정렬된다.
space-around : 모든 flex item은 균등한 간격으로 정렬된다.

align-content

flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.

참고로 justify-content 속성은 flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

stretch : 모든 flex item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. align-content 속성의 기본값이다.
flex-start : 모든 flex item은 flex container의 cross start 기준으로 stack 정렬된다.
flex-end : 모든 flex item은 flex container의 cross end 기준으로 stack 정렬된다.
center : 모든 flex item은 flex container의 cross axis의 중앙에 stack 정렬된다.
space-between : 첫번째 flex item의 행은 flex container의 상단에 마지막 flex item의 행은 flex container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.
space-around : 모든 flex item은 균등 분할된 공간 내에 배치 정렬된다.

align-items

flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. align-items 속성은 모든 flex item에 적용된다.

stretch : 모든 flex item은 flex container의 높이(cross start에서 cross end까지의 높이)에 꽉찬 높이를 갖는다. align-items 속성의 기본값이다.
flex-start : 모든 flex item은 flex container의 cross start 기준으로 정렬된다.
flex-end : 모든 flex item은 flex container의 cross end 기준으로 정렬된다.
center : 모든 flex item은 flex container의 cross axis의 중앙에 저열된다.
baseline : 모든 flex item은 flex container의 baseline을 기준으로 정렬된다.

align-items는 flex line을 기준으로 정렬하는 반면, align-content는 flex line을 정렬한다.

12. flex item 속성

order

flex-grow

flex item의 너비에 대한 확대 인자를 지정한다. 기본값은 0이고 음수값은 무효하다.

모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖는다.

두번째 flex item의 flex-grow 속성값은 3으로 지정하면 다른 flex item보다 더 넓은 너비를 갖는다.

flex-shrink

flex item의 너비에 대한 축소 인자를 지정한다. 기본값은 1이고 음수값은 무효하다. 0을 지정하면 축소가 해제되어 원래의 너비를 유지한다.

기본적으로 모든 flex item은 축소된 상태로 지정(기본값 1)하고 두번째 flex item만 축소를 해제(flex-shrink: 0;)하면 원래의 너비를 유지한다.

flex-basis

flex item의 너비 기본값은 px, % 등의 단위로 지정한다. 기본값은 auto이다.

flex

flex-grow flex-shrink flex-basis 속성의 단축속성(shorthand)이다. 기본값은 0 1 auto 이다.

align-self

13. 끝맺으며

WINK 어린이 여러분,

모두 즐거운 어린이날 보내시기 바랍니다.

저작자표시 동일조건

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

[2023 신입부원 심화 스터디] 김윤희 #3주차 - Part 4, Part 5 (0)	2023.05.07
[2023 신입부원 기초 스터디] 도승준 3주차 기리보이의 flexbox (1)	2023.05.05
[2023 신입부원 기초 스터디] 정찬우 3주차 - css 너 정말... (1)	2023.05.05
[2023 신입부원 기초 스터디] 박민규 #3주차 - 기초부터 화악시일히이잉 (1)	2023.05.05
[2023 신입부원 기초 스터디] 최종은 #3주차 - CSS 딥-하게 학습하기 (0)	2023.05.05

[2023 신입부원 기초 스터디] 한승훈 3주차 - CSS

0.인사말

...

1.CSS Float, Clear

float 속성

clear 속성

2. CSS Position

position 속성

위치 속성

관련속성

3.배경 이미지 스타일

background-color

background-image

background-repeat

background-posiiton

background-attachment

background

background-size

4. 그라데이션

선형 그라데이션

원형 그라데이션

5. 가상 클래스/요소

가상 클래스 (Pseudo class)

가상 요소 (Pseudo element)

6. 반응형 웹 디자인

반응형 웹 사이트란?

뷰포트(viewport)

메타 뷰포트 태그 지정하는 법

메타 뷰포트 태그 속성

일반적인 사용법

뷰포트 단위

미디어 쿼리

미디어 쿼리 문법

미디어 유형

자주 사용하는 미디어쿼리 조건

7.FlexBox

flexbox란?

flexbox 구성

flexbox 만들기

flexbox 주축

flexbox 속성 분류

flex container

flex item

8.flex container 속성

flex-direction

flex-wrap

flex-flow

justify-content

align-content

align-items

9. flex item 속성

order

flex-grow

flex-shrink

flex-basis

flex

align-self

10. FlexBox

flexbox란?

flexbox 구성

flexbox 만들기

flexbox 주축

flexbox 속성 분류

flex container

flex item

11. flex container 속성

flex-direction

flex-wrap

flex-flow

justify-content

align-content

align-items

12. flex item 속성

order

flex-grow

flex-shrink

flex-basis

flex

align-self

13. 끝맺으며