css - 기본개념

🎨CSS

Cascading Style Sheets
html, xml등으로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어
디자인에 최적화된 웹페이지 마크업 언어

기본구조

인라인 추가 방식

<div style="border:1px;"></div>

내부 선언 방식

<style>
  div {
    border: 1px solid grey;
  }
</style>

import (외부 선언)방식

<link rel="stylesheet" href="style.css" />

element

웹 디자인의 최소 단위
하나의 객체를 의미함
보통은 태그 하나를 지칭하기 위해 쓰지만 반드시 태그만을 의미하지는 않음

selector

css혹은 js로 변화시킬 대상을 지칭함
선택할 때 태그, 클래스, 네임, 아이디 이용

class

개발 언어에서의 클래스와는 달리 태그를 그룹으로 묶을 때 사용
학년, 부서 같은 개념

id

하나의 엘리먼트를 지칭. 하나의 고유한 id만 가능
주민등록번호 같은 개념

name

클래스보다 소수이지만 단수 또는 복수가 가능한 단위
form에서는 쓰임이 조금 다름
이름같은 개념

🎨CSS 속성

display

요소의 레이아웃 방식과 디스플레이 유형을 설정함

none : 해당 요소가 나오지 않게 함
block : 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭으로 영역 차지

1. Flow Layout

레이아웃 변화가 있기 전까지 페이지 안의 블록요소와 인라인 요소가 보여지는 방식

CSS Flow Layout

block : width 속성을 적용하더라도 실제 크기는 한 라인을 모두 차지하는 방식
inline : width 속성을 적용하더라도 실제로는 자기 자신의 콘텐츠만큼의 크기를 가짐
inline-block : inline 속성을 가지면서도 width나 height 설정시 그 크기를 따름

2. Flexible Box Layout

사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 css모듈

CSS Flexible Box Layout

Basic concepts of flexbox

flex : 자식 요소에 flex 속성을 주기
정렬속성
- justify-content : 전체 콘텐츠 정렬 방식 설정 (좌-우)
- align-content : 전체 콘텐츠 정렬 방식 설정 (상-하)
- align-items : 각 아이템의 정렬 방식
CSS 속성
- flex : 컨테이너 공간에서, 하나의 플렉스 아이템을 크기를 키우거나 줄이면서 공간에 맞추는 방법을 설정하는 속성. flex-grow, flex-shrink, flex-basis의 단축속성
- flex-direction : 컨테이너 내에서, 아이템의 배치할 때 방향을 지정(정방향, 역방향 등)
- flex-wrap : 아이템 요소들이 강제로 한 줄에 배치되게 할 건지, 가능한 영역에서 여러 행으로 나누어 표현할 것인지 등을 결정

3. Grid Layout

테이블처럼 세로 열과 가로 행을 기준으로 요소를 정렬하는 방식

CSS 그리드 레이아웃

visibility

레이아웃을 변경하지 않고 요소를 보이거나 숨김. table 행이나 열도 숨길 수 있음

visible : 요소가 보임
hidden : 요소가 숨겨지지만 해당 공간은 존재함. visible로 설정한 자손은 화면에 보임.
collapse
- table의 tr, td, colgroup, rowgroup에 적용하면 display: none과 동일하게 요소를 숨기고 차지하던 공간도 제거.
- 단, tr, td의 크기는 collapse된 tr, td가 보이는 것처럼 취급해서 계산함.
- display: flex된 아이템에 적용하면 요소가 숨겨지고 차지하던 공간도 제거됨

media query

단말기의 유형과, 화면 해상도, 뷰포트 너비 등에 따라 웹 사이트나 앱의 스타일을 수정할 때 적용

not, and, only같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있음

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

overflow

요소가 overflow를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법

visible : 기본값. 모든 콘텐츠가 보임
hidden : overflow한 콘텐츠를 숨김
scroll : 스크롤 막대가 표시됨
auto : 콘텐츠 크기에 따라 스크롤 막대가 필요한지 여부를 판단하고 스크롤 막대를 나타냄

position

문서 상에 요소를 배치하는 방법을 지정

static : 일반적인 문서 흐름에 따라 요소 배치
relative : 자기자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용
absolute : 가장 가까운 위치의 지정된 조상 요소(없다면 컨테이닝 블록을 기준으로)에 대해 상대적으로 배치함. z-index사용 가능
fixed : 뷰포트의 초기 컨테이닝 블록을 기준삼아 배치됨
sticky : 가장 가까운, 스크롤되는 조상과 컨테이닝 블록을 기준으로 오프셋 적용
webkit : 크롬과 사파리가 채용한 웹 브라우저 엔진 이름 - 브라우저별 지정을 위해 접두사로 씀
- mox : 파이어폭스
- ms : 익스플로러

z-index

위치지정요소와 그 자손또는 하위 플렉스 아이템의 z축 순서를 지정.

더 큰 z-index값을 가진 요소가 위로 감.

참고자료 mdn짱