CSS

Jnary·2024년 4월 18일
CSSCSS LayoutCSS flexCSS 문법CSS 정의css - box modelcss gridcss 선택자

Web Application

목록 보기
3/15
post-thumbnail

CSS 정의

  • Cascading Style Sheet
  • 디자인 도구

적용 방법

문법

  • 선택자 { 속성명: 속성값; … }
  • 우선순위 : Inline > Internal > External > default
  • Mozilla CSS 속성 순서 적용

    • display 객체의 노출 여부 / 표현방식

    • list-style

    • overflow

    • position 위치 / 좌표

    • float

    • clear

    • width/height 크기 / 여백

    • padding/margin

    • border/background 윤곽 / 배경

    • color/font 글자 / 정렬

    • text-decoration

    • text-align/vertical-align

    • white-space

    • other text

    • content 내용

      → 위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피

Inline Style

  • 태그에 직접 style 속성 입력
  • <tag style="color: red; text-align: center;">
  • 장점
    • 직관적, 수정 간편
  • 단점
    • 정보, 디자인 분리 X → 일괄 변경 X
    • HTML 파일 사이즈 증가 → 웹페이지 로딩 시간 증가

Internal Style Sheet

  • 내부 스타일 시트
  • <head> </head> 사이에 <style> 태그로 지정
    <head> 
	<style>
		 **body {
			 color: blue;
		 }**
	 </style>
</head>
  • 현재 문서에만 적용할 때 유용

External Style Sheet

  • css 확장자를 가진 스타일 시트 파일 연결
    <head>
	<link rel="stylesheet" href="style.css" />
</head>
  • 장점
    • 분리된 디자인 파일로 관리
    • 일관성 있게 유지보수
  • 단점
    • 외부 스타일 시트가 지나치게 복잡해지지 않게 하기 위한 노하우 필요

CSS Box Model

  • Box 모양

    • width height content 대상

box-sizing

  • box-sizing: content-box 기본값
  • box-sizing: border-box

    • 테두리 영역 기준

    • margin 영역부터 포함 X

    • 직관적

    • {
      box-sizing: border-box;
      }

CSS 선택자

선택자 종류

  1. 전체 선택자

    * { color: gold; }

  2. HTML 요소 선택자

    h2 { color: gold; }

  3. id 선택자

    • id는 문서상에서 유일
    <h2 id="jnary">css 재미없어</h2>
    #jnary { color: gold; }

  4. class 선택자

    <h2 class="jnary">css 재미없어</h2>
    .jnary { color: gold; }
    https://www.notion.so/icons/light-bulb_gray.svg 여러 선택자 선택 : 쉼표로 구분 
    #jnary, .jnary { color: gold; }

  5. 결합(그룹) 선택자

    • 자손 선택자 (descendant selector) 공백
      div p { color: gold; }
    • 자식 선택자 (child selector) >
      div > p { color: gold; }

  6. 형제 선택자

    • 형제 선택자 (sibling selector) ~

      • 해당 요소보다 뒤에 존재

        div ~ p { color: gold; }
    • 인접 형제 선택자 (adjacent sibling selector) +

      • 해당 요소 바로 뒤에 존재

        div + p { color: gold; }

  7. 가상 클래스

    • 선택하고자 하는 HTML 요소의 특별한 상태를 명시
    • 종류 : :link :visited :hover :active :focus :checked :enabled :disabled :first-child :nth-child :first-of-type :nth-of-type :not :lang
    input:focus { color: gold; }

  8. 가상 요소

    • HTML 요소의 특정 부분만 선택
    • ex. 요소의 첫 글자, 콘텐츠 앞, 뒤
    • 종류: ::first-letter ::first-line ::before ::after ::selection ::marker ::placeholder
    input::placeholder { color: gold; }

  9. 속성 선택자

    • [attributename] 특정 속성을 가진 모든 요소
    • [attributename = "value"] 특정 속성, 속성값을 가진 모든 요소
    input[type="password"] { color: gold; }

선택자 우선순위

  1. !important 지양
  2. Inline
  3. id
  4. class / 가상 선택자
  5. 태그 선택자
  6. 상속된 스타일

Layout

  • position property, 위치를 결정하는 방식
  1. static
    • 기본값
    • top, right, botton, left, z-index 속성값에 영향 X
  2. relative
    • static 요소 기준으로 위치 설정
    • top, right, bottom, left
    • 다른 위치 요소에 영향 X
    • stacking context를 벗어나지 X → z-index 관련
  3. absolute
    • 부모 중 static 이 아닌 요소 기준으로 위치 설정
    • top, right, bottom, left
    • 일반적인 흐름에서 제거 → 요소 겹치기 가능
  4. fixed
    • viewport 기준으로 위치 설정
    • 스크롤 시에도 절대적인 위치에 고정 → 일반적인 흐름에서 제거
  5. sticky
    • 스크롤 위치에 따라 relative fixed 속성으로 변경
    • top, bottom, left, right 속성 중 하나 반드시 필요
    • 조건 : 부모태그에 height 필요O, overflow 필요X
    • 레이아웃에 공간 차지

  • z-index 속성

    • stacking context에서 자신의 위치 지정

      → 부모의 쌓임 맥락을 벗어날 수 X

    • 정수 값 사용

    • position ≠ static 일 때 동작

flex

  • 1차원 레이아웃 모델
  • 부모 자식 관계 존재 필요

Flex container → 부모

display: flex;

  1. flex-direction

    • 요소 배치 방향 선택
    • row 기본값 / column row-reverse / column-reverse

  2. flex-wrap

    • 컨테이너 너비보다 아이템 너비가 클 때 줄바꿈 결정
    • nowrap 기본값, 줄바꿈X, overflow 할 수도 wrap 줄바꿈 / wrap-reverse 역순 줄바꿈

  3. justify-content

    • 메인축 방향 정렬
    • flex-start 기본값 / flex-end / center space-between / space-around / space-evenly

  4. align-items

    • 교차축 방향 정렬 (block-axis)
    • normal 기본값 / flex-start / flex-end center / baseline / stretch 컨테이너에 맞춰서 늘림

  5. align-content

    • 교차축 방향 여러 행 정렬
    • flex-wrap 을 통해 Items가 두 줄 이상이고 여백 있을 때 사용 → 한 줄에서 사용시 무의미
    • align-items 와 속성값 동일

  6. gap

    • item 간 간격 설정

Flex items → 자식

  1. order

    • item 시각적 나열 순서 변경 → 검색 엔진에는 반영 X
    • 작은 숫자 먼저 배치

  2. flex-basis

    • 기본적인 item의 크기값
    • min-width와 달리 flex-shrink, flex-grow 영향 받음
    • auto 기본값 / content 컨텐츠의 크기 / px

  3. flex-grow

    • 증가 너비 비율 (ex. 1:2:1)
    • item의 flex-basis를 제외한 여백 부분을 지정된 숫자 비율로 나누어 가짐
    • 기본값 0
    • 0보다 큰 값 → flexible box로 변하면서 빈공간 채움

  4. flex-shrink

    • flex-item 요소의 크기가 컨테이너보다 클 때 사용
    • flex-basis의 값보다 작아질 수 있는지 결정
    • 고정 폭의 컬럼에 유용 → 고정 크기는 width로 설정
    • 기본값 1 0보다 큰 값 → flexible box로 변하면서 flex-basis보다 작아짐

  5. flex

    • 너비 증가, 감소, 기본 설정
    • flex: (flex-grow) (flex-shrink) (flex-basis)
    • 생략 시, flex-basis = 0
      • 여백의 비가 아닌 영역 자체 비율로 분할하고 싶을 때

  6. align-self

    • item 각각에 대한 속성 적용
    • 기본적으로 align-items 설정 상속 받음 → 개별 설정 우선
    • auto 기본값 / stretch flex-start flex-end center baseline

grid

  • 세로 열과 가로 행을 기준으로 요소 정렬
  • 부모, 자식 관계 필요

grid 용어

  • Grid Container : grid 영역 부모 요소
  • Grid Item : grid 영역 자식 요소들
  • Grid Track : 행 또는 열
  • Grid Cell : 한 칸
  • Grid Line : 셀 구분선
  • Grid Number : 라인의 각 번호
  • Grid Gap : 셀 사이 간격
  • Grid Area : 라인으로 둘러싸인 사각형 영역 (셀 집합)

Grid container → 부모

display: grid;

  1. grid-template-rows grid-template-columns

    • Grid Track 크기 지정
    • 고정, 가변 섞어서 사용 가능
      /* 고정 크기 */
grid-template-columns: 200px 200px 500px;
/* 가변 크기 (비율대로 나누기) */
grid-template-columns: 1fr 1fr 1fr;
    • 70px auto = 70px 1fr
    • repeat(반복횟수, 반복값)
      grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
    • minmax(최솟값, 최댓값)
      grid-template-rows: repeat(3, minmax(100px, auto));
    • auto-fill 개수가 적을 때 공간 남기기 auto-fit 남는 공간 채우기
      grid-template-columns: repeat(auto-fill, minmax(20%, auto));

  2. row-gap column-gap

    • 셀 사이 간격 설정
    • gap: (row-gap) (column-gap);

  3. grid-auto-columns grid-auto-rows

    • 그리드 형태 자동으로 정의
    • grid-template-columns(rows)의 통제를 벗어난 위치에 있는 트랙 크기 지정
    grid-template-rows: repeat(3, minmax(100px, auto));
/* row 개수 모를 때 */
grid-auto-rows: minmax(100px, auto);

  4. grid-template-areas

    • 각 영역에 붙인 이름 이용해서 배치 (직관적)
      grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
    • 빈칸 . none
    • 해당 item 요소에 grid-area 속성으로 이름 지정
      .header { grid-area: header; }

  5. align-items

    • 교차축 방향 정렬
    • start center end stretch

  6. justify-items

    • 메인축 방향 정렬

  7. place-items

    • place-items: (align-items) (justify-items)
    • 값이 하나 → 두 속성 모두 적용

  8. align-content

    • 아이템 그룹 교차축 정렬
    • start center end stretch space-between space-around space-evenly

  9. justify-content

    • 아이템 그룹 메인축 정렬

  10. place-content

    • place-content: (align-content) (justify-content)
    • 값이 하나 → 두 속성 모두 적용

Grid items → 자식

  1. grid-column-start grid-column-end grid-column

    grid-row-start grid-row-end grid-row

    • 각 셀의 영역 지정
    • Grid Number의 시작번호 / 끝번호
      grid-column-start: 1;
grid-column-end: 3;
/* grid-column: 1 / 3; */

grid-row-start: 1;
grid-row-end: 2;
/* grid-row: 1 / 2; */
    • 차지할 셀의 개수 지정
      /* 1번 라인에서 2칸 */
grid-column: 1 / span 2;
grid-column: auto / span2;   /* 시작지점 auto 가능 */
    • grid-column: 2; end 생략 시 한 칸

  2. grid-auto-flow

    • 아이템이 자동 배치되는 흐름 결정
    • row 순서대로 배치 후 들어갈 자리 없으면 칸 비워두고 개행 column 아래로 배치 dense 빈 셀을 채우는 알고리즘 (row dense column dense)

  3. align-self

    • 개별 아이템 교차축 정렬

  4. justify-self

    • 개별 아이템 메인축 정렬

  5. place-self

    • place-self: (align-self) (justify-self)
    • 값이 하나 → 두 속성 모두 적용

  6. order

  7. z-index

profile
Jnary
숭실대학교 컴퓨터학부 21
이전 포스트

HTML

다음 포스트

Airbnb JavaScript Style Guide

0개의 댓글