[메가바이트 스쿨] 핀테크 서비스 프론트엔드 취업 완성 과정 3기 online - CSS 개요, 속성

seokji·2022년 9월 17일
1
post-thumbnail

CSS 개요, 속성


🎨 기본 문법

선택자 { 속성: 값; }
  • 선택자는 스타일(CSS)을 적용할 대상(selector)을 의미합니다.

  • 속성은 스타일(CSS)의 종류(property)를 의미합니다.

  • 은 스타일(CSS)의 값(value)을 의미합니다.
    ❗ 세미콜론이 누락되지 않도록 주의

-> 코드를 작성할 때는 예쁘게 작성하는 게 중요합니다!


🎨 선언 방식

1. 내장 방식 : 태그 안에 스타일을 작성하는 방식입니다. (권장 ❌)

<style>
	div	{
		color: blue;
        padding: 1rem;
	}
</style>

2. 인라인 방식 : HTML의 전역 속성인 style을 이용해 직접 스타일을 작성하는 방식입니다. (권장 ❌)

<div style="color: blue; padding: 1rem;"></div>

3. 링크 방식 : link 태그를 이용해서 외부 CSS 파일을 가져오는 방식입니다. (병렬)

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

4. import 방식 : CSS의 @import 규칙을 이용해서 CSS 문서 안에 또 다른 CSS 문서를 연결하는 방식입니다. (직렬)

@import url("./header.css");

🎨 선택자

CSS는 크게 5가지선택자를 갖습니다.

  1. 기본

    • * 전체 선택자(Universal Selector) : 모든 요소를 선택합니다.

    • 태그 선택자(Type Selector) : 태그 이름을 선택합니다.

    • 클래스 선택자(Class Selector) : HTML class 속성의 값 .을 이용해 선택합니다.

    • 아이디 선택자(ID Selector) : HTML id 속성의 값 #을 이용해 선택합니다.


	/* 전체 선택자 */
	* {
		color: blue;
	}
    
    /* 태그 선택자 */
    div {
		padding: 16px;
    }
    
    /* 클래스 선택자 */
    .wrap {
    	display: flex;
    }
    
    /* 아이디 선택자 */
    #wrap {
    	display: block;
    }

  1. 복합

    • 일치 선택자(Basic Combinator) : 선택자를 동시에 만족하는 요소를 선택합니다.

    • 자식 선택자(Child Combinator) : 선택자의 자식 요소를 선택합니다.

    • 하위(후손) 선택자(Descendant Combinator) : 선택자의 하위 요소를 선택합니다.

    • 인접 형제 선택자(Adjacent Sibling Combinator) : 부모 요소를 공유하는 형제 요소 하나를 선택합니다.

    • 일반 형제 선택자(General Sibling Combinator) : 부모 요소를 공유하는 모든 형제 요소를 선택합니다.


	/* 일치 선택자 */
	div.wrap {
		color: blue;
	}
    
    /* 자식 선택자 */
    div > span{
		color: white;
    }
    
    /* 하위 선택자 */
    .wrap .btn {
    	padding: 16px;
    }
    
    /* 인접 형제 선택자 */
    ul + li {
    	color: olive;
    }
    
    /* 일반 형제 선택자 */
    ul ~ li {
    	color: olive;
    }

  1. 가상 클래스 (Pseudo-Classes)

    • :hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택됩니다.

    • :active : 선택자 요소에 마우스가 클릭된 상태에서 선택됩니다.

    • :focus : 선택자 요소에 포커스가 되면 선택됩니다. (HTML의 대화형 콘텐츠 요소에 적용 가능합니다.)

    • :first-child : 선택자 요소 중 첫 번째 요소가 선택됩니다.

    • :last-child : 선택자 요소 중 마지막 요소가 선택됩니다.

    • :nth-child(n) : 선택자의 형제 요소 중 (n)째 요소가 선택됩니다.

    • :not() : 선택자가 아닌 요소를 선택합니다.



  1. 가상 요소 (Pseudo-Elements)

    • ::before : 선택자 요소의 내부 앞에 내용을 삽입합니다.

    • ::after : 선택자 요소의 내부 뒤에 내용을 삽입합니다.



  1. 속성 (Attribute) : 속성을 포함한 요소를 선택합니다.


🎨 스타일 상속

스타일 상속은 부모 요소의 스타일이 자식 요소의 스타일에 상속되는 것을 의미합니다.
(💥 글자/문자 관련 속성들이 상속)

inherit 속성 값을 사용하면 강제적으로 부모의 스타일을 상속받을 수 있습니다.



🎨 선택자 우선순위

우선순위란 같은 요소가 여러 선언의 대상의 된 경우, 어떤 선언의 CSS 속성을 우선으로 적용할지 결정하는 방법을 의미합니다.

  1. 점수가 높은 선언이 우선이 됩니다.
  2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선이 됩니다.


🎨 width, height

  • width : 요소의 너비를 설정합니다.
    - 기본값: auto

  • max-width : 요소의 최대 너비를 설정합니다.
    - 기본값: none

  • min-width : 요소의 최소 너비를 설정합니다.
    - 기본값: 0


  • height : 요소의 높이를 설정합니다.
    - 기본값: auto

  • max-height : 요소의 최대 높이를 설정합니다.
    - 기본값: none

  • min-height : 요소의 최소 높이를 설정합니다.
    - 기본값: 0


🎨 단위

  • px : 픽셀

  • % : 상대적 백분율

  • em : 요소의 글꼴 크기
    -> 요소 글꼴 크기 16px, 1.5em = 24px

  • rem : 루트 요소의 글꼴 크기
    -> 루트 요소 글꼴 크기 16px, 1.5rem = 24px

  • vw : 뷰포트 가로 너비의 백분율

  • vh : 뷰포트 세로 너비의 백분율


🎨 box-sizing

box-sizing는 요소의 크기를 계산하는 기준을 지정해 주는 속성입니다.

  • content-box : box-sizing의 기본 값으로 요소의 내용으로 크기를 계산합니다.
  • border-box : 요소의 내용, padding, border의 총합을 크기로 계산합니다. -> 총합이 자동으로 계산 되어서 편리


🎨 overflow

overflow는 요소의 크기 이상으로 내용이 넘쳤을 경우, 보이는 내용을 제어하는 단축 속성입니다.

  • visible : overflow의 기본값으로 넘친 내용을 그대로 보여줍니다.
  • hidden : 넘친 내용을 잘라내는 속성값입니다.
  • scroll : 넘친 내용을 잘라내고 스크롤바를 생성합니다.
  • auto : 넘친 내용이 있을 경우에만 내용을 잘라내고 스크롤바를 생성합니다.

overflow-y, overflow-x를 이용해 개별적으로 스타일을 줄 수 있습니다.



🎨 position

position은 요소의 위치를 지정해 주는 속성입니다.

  • static : 기본값으로 기준이 없음을 의미합니다.
  • relative : 요소 자신을 기준으로 위치를 지정합니다.
  • absolute : 위치 상 부모 요소를 기준으로 위치를 지정합니다.
  • fixed : 뷰포트를 기준으로 위치를 지정합니다.
  • static : 스크롤 영역을 기준으로 위치를 지정합니다.


❗ z-index를 사용하려면 우선적으로 position을 지정


🎨 flex

flex는 요소를 주축을 기준으로 정렬하는 속성입니다.
flex를 선언하면 요소들은 flex-container(부모)flex-item(자식)이 됩니다.

containeritem에 각각 다른 속성이 적용됩니다.

📍 container에 적용되는 속성 & 값

  • display :
    - flex -> 블록 요소 container
    - inline-flex -> 인라인 요소 container

  • flex-direction :
    - row -> 기본 값 행(수평)을 기준으로 정렬
    - column -> 열(수직)을 기준으로 정렬

  • flex-wrap :
    - nowrap -> 기본 값 줄 바꿈 ❌
    - wrap -> 줄 바꿈 ⭕️

  • justify-content : 주 축을 기준 정렬
    - flex-start -> 기본 값 items를 시작점으로 정렬
    - flex-end -> items를 끝점으로 정렬
    - center -> items를 가운데 정렬
    - space-between -> 각 items 사이를 균등하게 정렬(양 끝은 공백 ❌)
    - space-around -> 각 items의 외부 여백을 균등하게 정렬
    - space-evenly -> 각 itmes에 동일한 여백을 생성해 정렬

  • align-content : 교차 축 기준 여러 줄 정렬 -> 이 속성은 flex-wrap이 wrap일 경우에만 적용
    - stretch -> 기본 값
    - 이외 속성 값은 justify-content와 같습니다.

  • align-items : 교차 축 기준 한 줄 정렬
    - align-content와 동일하게 stretch, flex-start, flex-end, center 속성 값을 갖습니다.
    • baseline -> items를 각 줄의 문자 기준선에 정렬

❗ flex의 justify-content: center;와 align-items: center;를 사용하면 요소를 쉽게 가운데 정렬을 시킬 수 있습니다.





📍 item에 적용되는 속성 & 값

  • order : 각 item들의 나열 순서를 결정하는 속성 -> HTML 구조는 바뀌지 않습니다.

  • flex-grow : item의 증가 너비 비율을 설정
    - 기본값: 0

  • flex-shrink : item의 감소 너비 비율을 설정
    - 기본값: 1

  • flex-basis : item의 기본 크기를 설정
    - 기본값: auto

    • basis 값을 0으로 지정하면 깔끔한 비율로 요소의 너비를 설정할 수 있습니다.
  • flex : flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 단축 속성입니다.

  • align-self : align-items의 item 버전으로 item을 교차 축 기준으로 정렬합니다.



2개의 댓글

comment-user-thumbnail
2022년 9월 17일

앞으로 css 막히면 이 집 찾아오면 되겠어요🤭
지석님 마크다운 실력이 나날이 늘어가시네요👍🏻 !!
저도 차분히 레벨업 해보겠습니다🏃🏻‍♀️

1개의 답글