[Web] 3주차 : CSS

seyxxn·2022년 4월 4일

web-study

목록 보기

2/4

id , Class

id	class
#ID명	.CLASS명
한 페이지에 하나의 정의 (하나의 id 태그만 사용)	반복적으로 사용되는 스타일을 정의
중복해서 적용 안됨	중복해서 적용 가능
우선순위 높음	우선순위 낮음

#Logo{
	background-color : blue;
	color : white;
}

.gray{
	background-color : gray;
}

.blueText{
	coloe : blue;
}

# id는 중복 X
<div id="Logo">Logo</div>

# class는 중복하여 적용 가능
<div class="gray blueText">Hello World</div>

margin , border , padding

< CSS 박스모델 >

내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
패딩(padding) : 내용과 테두리 사이의 간격 (패딩은 눈에 보이지 않음)
테두리(border) : 내용와 패딩 주변을 감싸는 테두리
마진(margin) : 테두리와 이웃하는 요소 사이의 간격 (마진은 눈에 보이지 않음)

display

div , span

요소(즉 태그)는inline요소와 block요소로 나눌 수 있음

inline
- 줄 속에 넣는 요소
- 대표적인 태그 <span>
- 특정 문자열을 선택할 때 사용
- 줄바꿈이 되지 않음 (즉, 한 블럭을 모두 차지 하는 것이 아님)
- width, height 지정 안됨
block
- 조금 더 넓은 범위를 지정할 때 사용
- 대표적인 태그 <div>
- block 요소를 사용하면, 가로화면 100%를 차지하기 때문에 자동으로 앞뒤 줄바꿈 됨

visibility

태그의 가시성을 결정
속성 값
- visible : 눈에 보임
- hidden : 숨김(자신의 영역은 계속 차지)
  - ‼️ display : none은 요소가 차지하고 있던 공간이 사라짐
- collapse : <table>태그에서만 사용 가능하며, 선택 테이블의 행과 열을 숨김 (테이블의 행과 열 요소만 지정할 수 있으며, 그 외 요소의 지정하면 hidden으로 해석)
- inherit : 부모 요소의 값을 상속(default)

기본 속성 (4가지)

요소를 어떻게 보여줄지 결정하는 속성
none : 보이지 않음
- 요소가 차지하고 있던 공간이 사라진다.
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태
- inline의 특징과 block의 특징을 모두 가진 요소
- 줄바꿈이 이루어지지 않음 → inline의 특징
- width와 height 지정 가능 → block의 특징
- 만약, width와 height지정하지 않으면, inline과 같이 컨텐츠만큼의 영역 차지
- 즉, 줄바꿈을 하고 싶진 않은데, 너비와 높이를 지정해주고 싶을 때 사용

flex

<div class="flex-container">
	<div class="flex-item">aaa</div>
	<div class="flex-item">bbbbbb</div>
	<div class="flex-item">ccccc</div>
</div>

참고 및 이미지 출처 ) https://studiomeal.com/archives/197
부모 요소 → flex-container, 자식 요소 → flex-items
컨테이너 : Flex의 영향을 받는 전체 공간
설정된 속성에 따라, 각각의 아이템들이 어떠한 형태로 배치되는 것
flex의 속성들은 2가지로 나뉨

컨테이너(부모)에 적용하는 속성
- display : flex; (기본)
- flex-direction : 아이템들이 배치되는 축의 방향을 결정
- flex-wrap : 아이템의 줄바꿈을 어떻게 할지 결정
- flex-flow : (flex-direction) (flex-wrap) : 2개의 속성을 한 번에 지정함
  
  💡 justify vs align : justify는 메인축 방향으로의 정렬, align은 수직축 방향으로의 정렬
- justify-content : 메인축 방향으로의 아이템 정렬
  - flex-start(default)
  - flex-end
  - center
  - space-between : 아이템들의 “사이(between)”에 균일한 간격
  - space-around : 아이템들의 “둘레(around)”에 균일한 간격
  - space-evenly : 아이템들의 사이와 양 끝에 균일한 간격
- align-items : 수직축 방향으로의 아이템 정렬
  - stretch(default)
  - flex-start
  - flex-end
  - center
  - baseline
- align-content ⭐⭐
  - flex-wrap : wrap 인 상태에서 아이템들의 행이 2줄 이상일 때, 수직축 방향 정렬
  - stretch(default)
  - flex-start
  - flex-end
  - center
  - space-between
  - space-around
  - space-evenly
  아이템(자식)에 적용하는 속성
  - flex-basis : flex 아이템들의 기본 크기를 설정
    - flex-direction이 row일때는 너비, column일때는 높이를 설정
    - auto(default)
    - 값으로는 width, height 등에 사용되는 각종 단위의 수가 들어갈 수 있음
    - ✔️ flex-basis의 속성에 값을 지정하고, width는 설정하지 않았을 때
      - flex-basis의 값 < 기존 크기(content) → 그대로 유지
      - flex-basis의 값 > 기존 크기(content) → flex-basis의 값의 크기를 가짐
  - flex-grow : 유연하게 늘리기
    - 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성
    - 값으로는 숫자가 들어감
    - 0(default)
    - 1
      - content를 제외한 ❗여백❗의 크기를 1:1:1 로 한다는 뜻임
      - 따라서, 글자의 길이가 길면 자식 요소 박스 크기가 비교적 큼
    - 이 숫자가 의미가 있어 지기 위해서는 자식 각각의 요소에 적용시켜줘야함
```
  /* 1:2:1의 비율로 세팅할 경우 */
  .item:nth-child(1) { flex-grow: 1; }
  .item:nth-child(2) { flex-grow: 2; }
  .item:nth-child(3) { flex-grow: 1; }
```
  - flex-shrink : 유연하게 줄이기 ⭐⭐
    - 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정
    - 값으로는 숫자가 들어감
    - 1(default)
      - 기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있음
    - 0
      - flex-shrink를 0으로 세팅하면, 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있음
      - 고정 크기는 width로 설정
  - flex : (flex-grow) (flex-shrink) (flex-basis) : 3개의 속성을 한번에 설정
grid
- grid는 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월
- 참고 ) https://studiomeal.com/archives/533

position, z-index, hover, overflow

position

HTML 문서 상에서 요소가 배치되는 방식을 결정
position 속성은 요소의 정확한 위치 지정을 위해 top, left, bottom, right 속성과 함께 사용

`static`

기본값
HTML문서상 원래 있어야 하는 위치에 배치
position 속성이 static이면, top, left, bottom, right속성 무시

`relative`

static을 기준으로 상대적인 위치를 잡음
top, left, bottom, right 속성으로 현재 위치에서 얼마나 떨어지게 할지를 지정
다른 아이템들에게는 영향을 끼치지는 않고 덮어 씌워짐
덮어 씌워지는 것이 싫다면 z-index를 사용

`absolute`

static이 아닌 다른 position값을 가진 부모를 기준으로 한다.
top, left, bottom, right 속성으로 현재 위치에서 얼마나 떨어지게 할지를 지정
부모 element 중, static이 아닌 다른 position값을 가진 것이 없다면 root element인 body를 기준으로 움직이다.
관례 ) 어떤 요소의 display 속성을 absolute로 설정하면, 부모 요소의 display 속성을 relative로 지정함

`fixed`

요소를 항상 고정된 위치에 배치
속성값의 배치 기준은 자신이나 부모 요소가 아닌 뷰포트

`sticky`

요소가 스크롤링될 때 효과가 나타남
sitcky로 설정된 영역은 설정된 위치에 도달하기 전까지는 static 속성처럼 행동하다가 설정된 위치에 다다르면 fixed 속성처럼 행동함

z-index

요소들의 수직 위치
position 속성을 이용하면 요소를 겹치게 놓을 수 있음
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려감

hover

마우스를 올렸을 때
가상 클래스(:pseudo-class)의 종류로, 해당 요소에 키보드 포커스가 맞춰졌을 때
가상 클래스, 가상 요소 참고 : https://mber.tistory.com/35
```
a:hover {
        color: red;
    }
```

overflow

특정 요소의 자식 요소가 부모 요소의 범위를 초과 할 때 어떻게 처리 할지를 결정
요소 내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들 때, 그것을 어떻게 보여줄지를 지정
기본적으로 컨텐츠를 포함하고 있는 요소의 크기가 고정되어 있지 않다면, 컨텐츠를 모두 포함할 수 있도록 요소의 크기가 커짐
크기가 고정 되어 있다면 overflow 프로퍼티에 지정된 값에 따라 보여짐

`visible` : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

`hidden`: 넘치는 부분은 잘려서 보여지지 않음

`scroll` : 스크롤바가 추가되어 스크롤 가능(가로, 세로 모두 추가)

`auto` : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정

    div.container {
        overflow: visible;
        border:solid 1px green;
        height: 200px;
        width: 200px;
    }

반응형 웹

@media : CSS 미디어 쿼리

미디어 쿼리 는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성
표현식은 width, height, color와 같은 미디어 특성들을 이용

@media screen and (max-width: 768px){
	body { background-color: lightgreen; }
}

rem : 상대단위

CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위
최상위 요소의 font-size 속성 값을 기준으로 함
HTML에서 최상위 요소는## <html>
따라서, rem 은 **html 요소의 font-size 속성 값을 기준**으로 함
- html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기(보통 16px)

em : 상대단위

CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위
해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준

% : 상대단위

부모 요소의 사이즈를 기준으로 계산

vh VS vw

vh : Viewport Height
vw : Viewport Width
뷰포트(화면의 크기)의 높이와 너비에 비례
1vh는 실제 높이값의 1/100을 나타냄.
즉 눈에 보이는 화면 높이가 1000px일 때, 1vh는 10px

px : 절대단위

max(min)-width(height)

반응형 웹에서 크기를 조절할 때 사용

img {
	width: 20%
	max-width: 500px;
}

/* 
	 화면이 엄청 커지면 20%로 설정해 놨던 이미지나 부분도 커짐
	 근데 그 부분은 크게 키우고 싶지 않을 때
	 전체 화면의 20%이지만 500px이상으로 더이상 커지게 하고 싶지 않을 때
	 max-width 속성을 사용해 최대 너비를 지정해줌
*/

CSS 초기화

웹 브라우저마다 기본 태그에 대한 스타일링이 모두 다르기 때문에
동일한 CSS스타일을 보여주기 위해서는 스타일 default값을 초기화 해야함
참고 ) https://meyerweb.com/eric/tools/css/reset/

CSS의 발전

참고 ) https://www.youtube.com/watch?v=Eim11QYLfEY

CSS 전처리기
- SASS (가장많이사용)
- postCSS (만족도1등)
CSS 프레임워크
- 부트스트랩 (가장많이사용)
- Tailwind CSS (만족도 높음, 엄청난 상승세)
CSS-in-JS (JS에서 CSS를 정의)
- Styled component
순수 CSS
- flexbox
- grid

seyxxn

✨

이전 포스트

[Web] 2주차 : Web, html 이란

다음 포스트

[Web] 3주차 : CSS

web-study

id , Class

margin , border , padding

display

div , span

visibility

기본 속성 (4가지)

flex

컨테이너(부모)에 적용하는 속성

아이템(자식)에 적용하는 속성

grid

position, z-index, hover, overflow

position

`static`

`relative`

`absolute`

`fixed`

`sticky`

z-index

hover

overflow

`visible` : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

`hidden`: 넘치는 부분은 잘려서 보여지지 않음

`scroll` : 스크롤바가 추가되어 스크롤 가능(가로, 세로 모두 추가)

`auto` : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정

반응형 웹

@media : CSS 미디어 쿼리

rem : 상대단위

em : 상대단위

% : 상대단위

vh VS vw

px : 절대단위

max(min)-width(height)

CSS 초기화

CSS의 발전

[Web] 2주차 : Web, html 이란

[Web] 4주차 : Javascript 기본 문법

0개의 댓글

[Web] 3주차 : CSS

web-study

id , Class

margin , border , padding

display

div , span

visibility

기본 속성 (4가지)

flex

컨테이너(부모)에 적용하는 속성

아이템(자식)에 적용하는 속성

grid

position, z-index, hover, overflow

position

static

relative

absolute

fixed

sticky

z-index

hover

overflow

visible : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

hidden: 넘치는 부분은 잘려서 보여지지 않음

scroll : 스크롤바가 추가되어 스크롤 가능(가로, 세로 모두 추가)

auto : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정

반응형 웹

@media : CSS 미디어 쿼리

rem : 상대단위

em : 상대단위

% : 상대단위

vh VS vw

px : 절대단위

max(min)-width(height)

CSS 초기화

CSS의 발전

[Web] 2주차 : Web, html 이란

[Web] 4주차 : Javascript 기본 문법

0개의 댓글

`static`

`relative`

`absolute`

`fixed`

`sticky`

`visible` : 기본 값. 넘칠 경우 컨텐츠가 상자 밖으로 보여짐

`hidden`: 넘치는 부분은 잘려서 보여지지 않음

`scroll` : 스크롤바가 추가되어 스크롤 가능(가로, 세로 모두 추가)

`auto` : 컨텐츠 량에 따라 스크롤바를 추가할지 자동으로 결정