CSS 기본(색상, 여백, 배경, 배치, 요소 등)

 

2023-03-10

 

색상 표현

- 색을 사용하는 모든 속성에 적용 가능하다

1.색상의 이름을 작성

- 브라우저에서 제공하는 색상 이름을 입력한다

- 간단한 색상 표현은 가능하지만 명확한 특정 색상 표현은 브라우저에 따라서 달라질 수 있다

 

2.Hex(Hexadecimal) : 16진수 색상 코드

- #으로 시작하며, 가장 많이 사용한다

 

3.RGB : 빛의 삼원색

-빛의 삼원색 : R G B

 

4.rgba : 빛의 삼원색 + 투명도

---

박스 모델

-html 요소의 기본적인 모양을 만드는 속성

-요소의 너비, 높이, 내부 여백, 외부 여백 등

 

1.요소의 너비와 높이 width, height

기본값 : auto - 브라우저가 너비를 계산

2.요소의 최대 너비 : max-width, max-heigh

3.요소의 최소 너비 : min-width, min-heightt

 

4.요소의 테두리 선을 지정하는 border

-두께 : border-width

-종류 : border-style

-색상 : border-color

작성 방법 : (border : 두께 종류 색상;)

자주 사용 : 실선, 파선, 점선

*보더를 사용하면 요소의 크기가 커진다

 

5.모서리 둥글게 만들기 border-radius

---

여백을 지정하는 속성들

 

1.요소의 외부(주변)에 여백을 지정하는 margin

-margin 값을 주면, 요소와 요소 사이의 간격을 조정할 수 있다.

기본값 : 0

-margin을 주면, 요소 바깥에 공간을 만들어서 주변 요소들을 밀어내는 개념이다

 

2.요소의 내부에 여백을 지정하는 padding

기본값: 0

*padding을 사용하면 요소의 크기가 커진다

 

3.박스 모델의 크기 계산

box-sizing : border-box;

border-box : 요소에 지정한 너비를 작성한 수치 그대로 사용하고 싶으면 border-box 값을 사용

border-box> 요소의 내용 + padding + border를 합쳐서 계산해 준다

---

배경

-요소의 배경 색상을 지정하는 bgc

-색상의 적용 범위를 설정 가능 : background-clip

값

border-box : 가장 외곽(테두리)까지 적용. 기본값

padding-box : 테두리를 제외한 padding 범위까지

content-box : 내용 부분에만 적용

 

배경 이미지

background-image : url("경로")

??이미지를 하나만 넣었는데, 이미지가 삽입될 요소의 크기가

이미지보다 더 크면, 반복해서 보여준다

 

배경 이미지 반복 제어

background-repeat

값

no-repeat : 반복 없음

repeat : 수평, 수직 반복

repeat-x : 수평 반복

repeat-y : 수직 반복

 

background-position

수평 : left, center,right

수직 : top, center, bottom

사용 예시

background-position : 50% 50%;

-->가로 방향에서 50%만큼, 세로 방향에서 50%만큼

 

구체적으로 위치와 수치 적용 가능

background-position : bottom 20px right 100px;

--> 바닥에서 위로 20px 만큼, 오른쪽으로 왼쪽 방향으로 100px만큼

 

배경이미지의 크기 background-size

값

auto : 이미지의 실제 크기

cover : 배경이미지로 요소를 모두 덮도록 확대 또는 축소한다

contain : 요소안에 배경이미지가 다 들어오도록 이미지를 확대 또는 축소한다

 

배경이미지 고정

background-attachment

값

scoll : 이미지가 함께 스크롤

fixed : 이미지가 뷰 포트에 고정

 

한번에 작성하기

background : url("") no-repeat left top fixed;

-속성과 값이 모두 다르기 때문에 입력 순서는 무관

-단 background-size는 별도로 작성해야 한다

---

CSS배치, position

-웹 문서에서 이미지나 글자를 원하는 위치에 넣고 싶을 때 사용한다

 

사용방법

1.기준을 먼저 정한다.

2.값을 사용한다-left, right, top, bottom

 

요소의 위치를 지정 할 때, 기준을 설정한다

값

요소 자기 자신 기준 : relative

위치 상 부모 요소 기준 : absolute

뷰 포트(화면 전체) 기준 : fixed

 

위치 설정

값

left, right, top, bottom, z-index

 

*relative를 사용하면 정상적인 배치에 어긋나기 때문에 relative를 사용해서 배치하는 경우는 드물다

 

absolute

-부모 요소를 기준으로 배치

-무조건 부모 요소가 아니고 내 위치 상 부모 요소기준으로 배치

1)위치 상 부모 요소를 먼저 인식

2)absolute로 기준을 잡고

3)방향 설정

 

뷰 포트(화면 전체) 기준 : fixed

 

실습예시)

.container를 position : relative(기준)

.container .item:first-child를 position : absolute(부모 요소 기준 배치)

 

---

요소가 쌓이는 순서

-우리가 화면에서 볼 수 있는 요소중 어떤 요소가 사용자와 더 가깝게 있는지(더 위에 있는지) 결정하는 것

 

조건

1.요소에 position 속성과 값이 있는 경우, 더 위에 쌓인다

2. 모든 요소에 position 속성과 값이 있는 경우, z-index 속성의 값이 더 높으면 위에 쌓인다

3. 1번과 2번까지 조건이 같은 경우, 나중에 작성된 경우, 위에 쌓인다

 

z-index

숫자가 : 높을수록 위에 쌓인다

1번부터 순차적으로 사용가능

*유지보수를 위해서 순차적으로 사용하면 좋다

---

변환

요소를 변환하는 속성, transform

항목

-원근법, 이동, 크기, 회전, 기울임 등

translate(); : 함수는 요소를 이동시킨다

rotate(); : 함수는 요소를 회전시킨다

deg = degree 각도

---

전환

전환이란, 사각형 > 원형 하나의 스타일을 완전히 다른 스타일로 바꾸는 것

 

transition

속성목록

transition-proprerty : 대상을 지정, css속성과 이름 명시

transition-duration : 필수 속성, 전환 효과가 일어날 시간을 명시한다

작성하지 않으면, 문법에 어긋나며, 정상적으로 작동하지 않는다

transition-timing-function : 타이밍 함수 지정

transition-delay : 대기 시간 지정

 

transition-proprerty

transition-proprerty : bgc

transition-proprerty : width, height

 

transition-duration

0s : 전환 효과 없음

값

시간을 작성, 소수점 작성가능하다 0 생략가능

0.5 > 5

 

transition-timing-function

-전환 교화의 타이밍 함수를 지정한다.

값

ease(기본값)느리게 > 빠르게 > 느리게

lineear : 일정하게

ease-in : 느리게 > 빠르게

ease-out 빠르게 > 느리게

 

시간을 지정하는 속성 2개

 

transition : 3s 2s linear,

앞에 작성한 시간 : duration

뒤에 작성한 시간 : delay

---

Flex

1차원 레이아웃을 만드는 Flex 정렬

조건

-부모가 자식요소가 필요하다

-부모 요소 : flex 지정

용어

부모 요소 : 컨테이너 - 플렉스 컨테이너

자식 요소 : 아이템 - 플렉스 아이

메인축(main axis)

교차축(cross axis)

*메인축은 항상 수평축이다 X

 

1.컨테이너에 적용하는 속성

*플렉스 아이템에 작성하면 동작하지 않는다

값

1)dsplay : flex;

-->부모 요소에 display : flex; 작성하는 것이 flex의 시작

 

2)flex-direction

-아이템들이 배치되는 주 축을 결정한다

 

3)flex-wrap

-flex item의 줄 바꿈 여부를 결정한다

값

nowarp : 줄 바꿈 없음, 한 줄에 item을 끼워 넣으려고 시도하며, 밖으로 빠져나간다

wrap : 여러 줄로 묶는다. 자리가 없으면 다음줄로 넘어간다

wrap-reverse : 여러줄로 묶는다. 자리가 없으면 다음줄로 넘어간다. 시작점 끝점이 바뀐다

 

3)배치방향과 줄바꿈을 한번에 지정하는

flex-flow : row wrap; --> 수평정렬, 여러줄 배치

 

4)주축 정렬 방법을 지정하는

justify-content

주축 = 메인축

값(예시 : 주 축이 수평죽일 경우)

flex-star : flex item시작점(왼쪽)으로 정렬한다

flex-end : flex item끝점(오른쪽)으로 정렬한다

center : flex item가운데 정렬한다

 

2.flex item에 적용하는 속성

1)order

- flex itme 순서

값

0 : 순서 없음

숫지 : 숫자가 작을 수록 순서가 빠르다

 

3)flex-basis

item의 기본 크기를 설정한다

 

4)flex-grow

-아이템이 늘어날 비율을 작성한다

예 : div요소 A B C

A :flex-grow : 0;

B :flex-grow : 2;

C :flex-grow : 1;

-->B와 C가 2:1 비율로 늘어난다

 

css의 미디어 쿼리

반응형 웹 디자인의 기본이 되는 미디어 쿼리

css에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. 프로그래밍 언어의 if(조건문)

과 유사한 개념이다.

@media(조건){

css스타일 규칙

}

---

Grid

flex는 1차원 (수평 또는 수직)으로 레이아웃 배치

Grid는 두 방향 (수평과 수직)레이아웃 시스템

-가로 : row

-세로 : column

 

사용방법

-부모 컨테이너에 display grid를 작성하는 것이 시작

용어

부모 요소 : 그리드 컨테이너

자식 요소 : 그리드 아이템

속성

컨테이너에 적용하는 속성이 따로 있고, 아이템에 적용하는 속성이 따로 있다

 

헬퍼 클래스

.css--> 공통으로 적용되는 스타일 규칙들

 

flex는 값을 주면, div들이 수평 정렬 되었다.

grid는 아니다.

왜 몇 개의 컬럼 또는 로우를 만들지, 각각의 사이즈는 어떻게 할지 정해줘야 한다.

 

repeat() 함수

 

하지만, 반응형 px 고정 단위

% 또는 fr 이라는 단위 사용

fr : fraction = 비율, 분수

 

grid-auto-rows : 100px;

몇 줄이 나올지 모르는 상황에서 그냥 100px로 고정하겠다

 

만약에, item에 작성되어 있는 콘텐츠 사이즈가 다양할 경우, minmax(최소높이, 최대높이);

grid cell 사이의 간격을 조정하는 grid gap

grid item의 배치 순서, order

-작은 숫자일 수록 먼저 배치

A B C

 

grid-area : 지정할 영역의 이름;

-grid 사용 시, 영역에 이름을 만들어서 배치할 수 있다.

-한 줄에 들어갈 영역은 ""(큰 따옴표)로 묶어 준다.