[드림코딩] CSS 기초 : padding, display, position, flexbox, justify, align

기본 사이트

CSS 참고서 - CSS: Cascading Style Sheets | MDN

기존 CSS 정리 목록

---

CSS의 구성

 

 

모든 태그에 green 색상 적용하기

 

 

 

 

div태그는 빈박스라서 색상을 넣어도 반영이 되지 않는다.

하지만 width, height를 지정하면 색상이 반영된다.

 

 

버튼 태그 위에 마우스를 올리면 클자는 빨간색, 배경은 베이지로 보이도록 만들자

 

 

a태그 중 naver로 시작되는 href 속성값만 보라색으로 보이게 만들자

 

 

a태그 중 .com으로 끝나는 href 속성값만 보라색으로 보이게 만들자

 

 

---

padding, border, margin

 

 

 

padding 20px를 추가해보자

 

 

 

 

margin 20px를 추가하자

 

 

padding 위쪽, 오른쪾에 100px 반영하자

 

 

이를 padding에 한번에 작성할 수 있다.

바로 시계방향으로 작성하는 것(위,오른쪽,아래,왼쪽)

padding : 100px 100px 20px 20px

 

padding 위, 아래 20px만 반영하고 싶다면?

 

 

 

border를 반영해보자

 

 

 

한줄에 두께, 선종류, 색상을 지정할 수 있다.

boder : 1px solid black;

 

 

 

---

CSS 레이아웃 정리 display, position 완성

CSS에선 display, position(레이아웃)이 가장 중요함!

 

display

- inline : 텍스트. 한줄 여러개

- block : 상자. 한줄 하나.

- inline-block : inline특징(한줄여러개) 가진 상자로 변환됨

 

position (강의 볼 것을 추천)

- static (기본값)

- relative

- absolute

- sticky

 

---

CSS Flexbox 완전 정리

박스를 행열로 자유자재로 배치가능

 

Flextbox를 통해 position, float, table보다 더 쉽게 레이아웃 적용이 가능하다.

 

float으로 나눠서 배치했었다.

 

 

 

Flextbox의 핵심2가지

특징 1 : Container, item에 적용할 수 있는 속성값이 존재

 

 

특징 2 : 중심축과 반대축이 존재한다.

x,y축 중 하나가 중심축이 되면 나머지 축은 반대축이 된다.

 

하단에선 열을 기준으로 나열이 되므로

수직축(y축)이 중심축이고

수평축(x축)은 반대축이 된다.

 

 

 

100vh vs 100%

영상의 07:30 참고

body>div.container에서

 

 

container의 높이값이

100vh이라면?

최상위 부모태그인 html을 기준으로 100% 채운다는 의미

100%이라면?

클래스명 container의 태그인 div의 100%를 채운다는 의미

 

flexbox사용하기

먼저 flex사용을 선언해야 한다.

display : flex;

 

flexbox : 수평,행 방향

- 수평,행 방향(왼->오) : flex-direction : row

 

 

- 수평,행 방향(오->왼) : flex-direction : row-reverse

 

 

flexbox : 수직, 열 방향

위 -> 아래 : column

아래 -> 위 : column-reverse

 

 

 

한줄에 있는 아이템의 라인을 자동으로 변경하기

flex-wrap : nowrap (기본값) // 아이템들이 한줄에 빼곡하게 붙음

flex-wrap : wrap // 아이템들이 브라우저 사이즈에 따라 줄을 바꿈. 순서를 거꾸로 하고 싶다면 wrap-reverse

 

 

flex-direction, flex-wrap을 한번에 작성해보자

flex-flow : column wrap;

 

flew-grow로 박스를 키웠을 때의 값을 설정해보자

컨테이너가 커졌을 때 어떻게 움직일까를 설정

flew-grow : 기본값은 0

 

 

flex-shrink : 박스를 줄였을 때

기본 값은 0

만약

박스 1의 값이 2이고

박스 2,3,의 값이 1이면

줄였을 때 박스1은 2배 더 작아진다.

 

 

flex-basis : 아이템들의 공간활용

flex-basis : auto; // 기본값. flex-grow, flex-shrink에 지정된 값으로 변형

지정을 하면 지정된 사이즈만큼 차지함

 

 

 

---

 

중심축 아이템 배치 : justify-content

justify-content : flex-start; // 중심충(수평,수직)을 중심으로 왼쪽에서 시작 혹은 위에서 시작

justify-content : flex-end; // 순서는 유지하되 오른쪽에서 시작 혹은 아래에서 시작

 

 

 

justify-content : center;

justify-content : space-around; // 처음, 끝만 간격이 좁음

 

 

justify-content : space-evenly; // 동일 간격

 

 

justify-content : space-between; // 처음,끝은 화면에 딱 맞게 배치

 

 

반대축 아이템 배치 속성값 : align-items

align-items : center; // 중간에 배치

align-items : baseline; // 텍스트 라인에 맞게 수정

현재 1번 아이템 박스의 크기만 다른데 여기에 적용하면 동일한 텍스트 라인을 가지게 된다.

 

 

반대축 아이템 배치 : align-content (중심축의 justify-content 속성값 그대로 사용가능)

 

 

위 상태에서

align-contetnt : space-between; // 위 아래가 딱 붙게 된다.

 

 

※ 단, 브라우저에 따라 지원이 되는 곳이 있고 안되는 곳이 있다.

지원이 되는지 안되는지를 미리 확인해둘 것

 

 

align-self : 아이템별로 아이템 배치 가능함!

컨테이너에 지정된 것에서 벗어나서 아이템 하나(박스1)만 센터로 맞추고 싶다면?

 

 

Item 속성값들

flex의 defalut값(row 정렬)이 적용됨 

 

 

순서를 바꿔보자

 

 

flex-grow

---

게임을 통해 CSS 실력을 키워보자

flukeout.github.io/

 

Can I use 사이트 : 각 브라우저에서 각 속성값이 얼마나 잘 적용되고 쓰고 있는지 확인가능

Can I use... Support tables for HTML5, CSS3, etc

 

CSS 색상 지정시 도움 주는 사이트 : Color Tool

 

플렉스 박스 연습하기 flexboxfroggy.com/#ko