CSS 개념 정리

POSI·2023년 9월 11일
CSSCodeit
1

WEB

목록 보기
1/2

CSS 시작하기

  • 색깔 표현 CSS 표준 문서의 컬러키워드 색상 코드 - 구글 ‘Color Picker’

  • style 태그에 style을 지정하는 속성

    <div style="background-color: #7542e0">

    • background-color 배경색

    • color 글자색

    • font-family 여러 폰트 설정

      폰트를 여러 개 적어두면 웹브라우저가 앞에서부터 확인하면서 가능한 폰트를 적용

    • font-size 글 크기 설정

    • font-weight 글자 굵기 설정

    • text-align 정렬

    • padding 태그 안쪽에 여백 (차례대로 세로 가로)

    • margin 바깥 여백

      margin: 0 auto

      세로는 0, 가로는 자동으로 채워짐

  • google fonts : 사이트를 접속하면 자동으로 폰트 파일을 다운받아서 보여줌

    • link 태그 활용 - head 안에 쓰고, 외부 링크를 가져오는 태그

    • 여러 폰트 다운로드 및 적용 (+ Regular, Bold 폰트 사이즈 지정)

       <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;600&display=swap" rel="stylesheet">

CSS 기본 개념

  • CSS 규칙
    h3 {
	color: #f56513;
}
    h3 CSS Selector (선택자)
    color: #f56513; CSS Declaration (선언) - 속성: 속성값;

  • 선택자

    • id # : 각 요소마다 고유한 이름을 지어주어야 함
    • class . : 여러 요소를 공통으로 묶음

  • 색상 단위

    • 색상 코드 #ffffff(RGB) - 16진수로 각 빛의 세기를 표시
    • RGB rgb(0, 255, 255) - 10진수로 각 빛의 세기를 표시
    • RGBA - Alpha(불투명도) 0~1 추가

  • 크기 단위

    • 절대적인 단위

      • 픽셀 (px)

    • 상대적인 단위

      • 퍼센트 (%) - 부모 태그에 대해서 상대적인 크기

      • em, rem - 글자 크기를 기준으로 상대적인 크기를 정함

        1em = 부모 태그의 font-size

        1rem = 최상위 태그( 태그)의 font-size

  • 코멘트 (주석)

    /* */

  • CSS는 하위 호환성(backwards compatibility) - 옛날 버전을 지원하면서 다음 버전으로 넘어

  • 텍스트 스타일링 속성

    <span class="속성"></span>

    글자 색 color

    글자 크기 font-size (large, medium, small)

    글자 굵기 font-weight (bbold, regular, light) - 100 ~ 900까지 100 단위로 씀

    줄 높이 line-height (loose, regular, tight) - 글자 크기에 상대적인 값

    텍스트 꾸미기 text-decoration (none, underline, line-through)

  • display 속성

    1. block

      • <h1>, <p>, <div> 같은 것

      • 위에서 아래로 배치

      • 너비와 높이를 지정 가능

    2. inline

      • <a>, <span>, <br>, <img> 같은 것

      • 평소에 글 쓰는 방향

      • 화면에 꽉 차면 다음 줄로 넘어감

      • 너비나 높이를 지정할 수 없음 (img 같은 건 가능)

      • 여백은 가로로만 가능

      → 크기가 없다고 생각하고 비켜주지 않음

    3. inline-block

      배치는 인라인처럼 하면서 크기도 정하고 싶을 때

  • float 속성

    요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치

  • Normal Flow : 블록이랑 인라인이 배치되는 방향

    • direction - 인라인의 방향을 정할 때 씀

    • writing-mode - 블록과 인라인의 방향을 정할 때 씀

      /* 블록은 오른쪽에서 왼쪽으로, 인라인은 위에서 아래로 배치 */
writing-mode: vertical-rl;

CSS 핵심 개념

  • 배경 이미지

    background-image: url('');
background-repeat: no-repeat;
background-position: center; /* 기본: left top */
background-size: cover; /* 비율 유지하면서 꽉 차게. 이미지 잘릴 수 있음 */
background-size: contain; /* 비율 유지하면서 최대한 크게. 이미지 잘리지 않음 */
background-size: 40px 30px; /* 가로 40px 세로 30px */

background-image:
	linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1)), /* 시작, 종료 색상 */
	url('');

/* 가로, 세로, 흐린 정도, 퍼지는 정도 */
box-shadow: 10px 15px 20px 5px rgba(0,0,0,0.4);

opacity: 0.5;

    css gradient를 사용하자!

    90deg 는 그라데이션 각도를 조절

  • 박스 모델

    웹페이지에서 모든 요소들은 박스 모델을 따름

    margin (바깥 여백) > border (박스의 테두리) > padding (안쪽 여백) > content (내용)

  • Padding

    영역 안쪽에 여백을 넣을 때 사용

    숫자의 순서는 시계 방향 (상 우 하 좌)

    /* 상하좌우 한 번에 */
padding: 8px;

/* 상하, 좌우 각각 */
padding: 16px 8px;

/* 상, 좌우, 하 */
padding: 16px 8px 24px;

/* 상, 우, 하, 좌 */
padding: 16px 8px 24px 10px;

/* 패딩 값을 각각 주고 싶을 때 쓰는 속성들*/
padding-top: 16px;
padding-right: 8px;
padding-bottom: 24px;
padding-left: 10px;

  • Margin

    영역 바깥쪽 여백을 넣을 때 사용

    좌우 바깥 여백의 경우에는 auto라는 걸 사용해서 자동으로 채울 수 있다

    → 이때, 요소의 width 속성이 정해져 있어야 자동으로 채울 수 있다

    /* 상하좌우 */
margin: 8px;

/* 상하, 좌우 */
margin: 16px 8px;

/* 자동으로 채우기 */
width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */
margin: 16px auto;

/* 상, 좌우, 하 */
margin: 16px 8px 24px;

/* 상, 우, 하, 좌 */
margin: 16px 8px 24px 10px;

/* 값을 각각 주고 싶을 때 쓰는 속성들 */
margin-top: 16px;
margin-right: 8px;
margin-bottom: 24px;
margin-left: 10px;

  • border와 border-radius

    border: 1px solid #dedede;
border-radius: 8px;

    border - 굵기 테두리 종류 색상

    border-radius - border 속성 없이도 쓸 수 있음

  • box-sizing

    content의 크기를 border에 맞춰서 계산해줌

    → 테두리까지 모두 합친 값으로 지정

    box-sizing: border-box;

    모든 요소에 border-box 적용

    * {
	box-sizing: border-box;
}
  • overflow 대처하기
    overflow: hidden;
overflow: scroll;
overflow: auto; /* 넘치면 스크롤 하게 만들기 */
    white-space: nowrap; /* 줄바꿈을 하지 않겠다 -> 가로 스크롤 */

  • 마진 상쇄 margin collapsing

    태그 사이의 간격은 태그들의 마진을 합친 게 아닌, 둘을 겹쳐서 더 큰 마을 적용 → 세로 마진은 서로 겹친다!

    부모 자식 사이의 padding이나 border가 있으면 서로 겹치지 않지만, 그렇지 않을 경우 겹칠 수 있음.

  • CSS 선택자 (CSS Selector)
    선택자 {
	선언;
}

  • CSS 선택자 목록, Selector List

    콤마,로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있음

    .book-description, .book-info {

}

.book-info {

}

  • 선택자 붙여쓰기

    여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 사용 가능

    class="선택자1 선택자2";
class="delay book-info";
    /* 아이디 + 클래스 */
#mongolia.title

/* 클래스 + 클래스 */
.large.title

/* 태그 + 아이디 + 클래스 */
h2#mongolia.large.title

  • 자식, 자손 선택하기

    • 자식 결합자 (Child Combinator) >
      .book-container > .title {
	 /* book-container라는 클래스를 가진 태그의 자식이면서
			title이라는 클래스를 갖고 있는 요소 선택 */
}
    • 자손 결합자 (Descendant Combinator) - 스페이스로 구분해서 사용
      .book .date {

}

  • 가상 클래스 (Pseudo Class) - 콜론 : 사용

    a:hover {
	text-decoration: underline;
}

    :active 클릭했을 때 상태

    :hover 마우스를 올린 상태

    :focus 포커싱 됐을 때

    :visited 이미 방문한 링크 표시

    :focus-within

    :focus-visible

  • 전체 선택자 (Universal Selector)
    * {

}
    /* .gallery의 모든 자식 요소 선택하기 */
.gallery > * {

}
  • n번째 자식 선택자(n-th child Selector) :nth-child() 사용 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있음 n은 1부터 시작 (첫번째 자식이 1)
    /* .gallery의 세 번째 자식 */
.gallery :nth-child(3) { ... }

/* .gallery의 짝수 번째 자식 */
.gallery :nth-child(even) { ... }
.gallery :nth-child(2n) { ... }

/* .gallery의 홀수 번째 자식 */
.gallery :first-child { ... }

/* 첫번째 자식, 마지막 자식 */
.gallery :last-child { ... }
  • Cascade, 종속 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS 규칙을 순서에 따라 합쳐서 적용하는 것

    • 코드 상의 순서

      아래 쪽에 쓴 코드일수록 우선순위가 높음

    • 명시도

      아이디 개수, 클래스 개수, 요소 개수를 순서대로 숫자를 나열해서 점수를 비교

      a.order { /* 아이디 0, 클래스 1, 태그 1 = 명시도 0 1 1 */
  ...
}

a#info { /* 아이디 1, 클래스 0, 태그 1 = 명시도 1 0 1 */
  ...
}

    • 상속

      • 상속된 속성의 우선순위 - 가까운 조상에게 물려받을수록 높음

    • 상속되는 속성: color, font-family, font-size, font-weight, line-height, text-align, …


CSS 레이아웃

Position

  • position 속성

    static, relative, absolute, fixed, sticky

    • static : position 속성의 기본 값

      • 원래 있어야 할 위치에 배치

      • 일반적인 글의 흐름을 따름

    일반적인 흐름에서 벗어난 배치를 하기 위해서는

    1. position으로 위치의 기준을 정한 다음

    2. top, right, bottom, left 같은 속성을 써서 구체적인 위치를 정함

  • relative 포지션

    원래 위치를 기준으로 한 상대적인 위치

    position: relative;
top: 30px;
left: 50px;

  • absolute 포지션

    • 가장 가까운 포지셔닝이 된 조상 요소를 기준으로 한 상대적인 위치
      → 포지셔닝이 되다 : static이 아닌 relative를 사용

    • 원래 배치에서 완전히 빠져버림

      → 크기를 정해주지 않으면 안에 있는 내용만큼의 크기를 가짐

    • inset: 3px;

      모든 방향에 대해서 위치를 3px

  • fixed 포지션

    브라우저 화면을 기준으로 한 위치

    원래 배치에서 완전히 빠져버림

  • sticky 포지션

    원래 위치에서 공간을 차지

    스크롤을 하다가 웹 브라우저의 상단에 닿으면 화면에 고정

    position: sticky;
top: 0;

    부모 요소 안에 갇혀 있음

  • z-index

    앞뒤의 순서를 정함

    숫자가 높을수록 더 앞에 보임


Flexbox

  • flexbox : 1차원으로 요소를 배치하는 방법

    • 배치할 방향 flex-direction (기본적으로 row)

    • 정렬하기
      1. justify-content 기본 축 정렬 - flex-start, flex-end, center, space-between
      2. align-items 교차 축 정렬 - stretch(늘려서 배치하기), flex-start, center, flex-end
      3. 요소가 넘칠 때 flex-wrap: wrap - 교차 축 방향으로 넘어가서 배치
      4. 요소 간격 gap - 모든 방향의 간격 지정
      5. 크기 늘이거나 줄이기

      • flex-grow 요소 늘려서 채우기 (기본 값은 0)
      • flew-shrink 요소 줄여서 채우기 (기본 값은 1)
      • flex-basis 요소의 시작 크기 지정 (기본 값은 auto)

  • 인라인 요소 안에서 flexbox 쓰기

    display: inline-flex;
  • flexbox 안에서 포지셔닝 static, relative, sticky를 제외하고는 flexbox의 흐름에서 벗어남

Grid

display: grid;
grid-template-columns: 100px 200px 100px;
grid-template-rows: 150px 200px;

  • 유연한 크기 단위 fr

  • 반복되는 값 한 번에 쓰기 repeat()

    grid-template-columns: repear(3, 1fr);
  • 최소, 최대값으로 크기 정하기
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    → min에는 fr 사용 불가

  • 간격 넣기 gap

  • grid line 번호로 배치하기

    /* 2번 column line에서 시작해서 44번 column line에서 끝남 */
grid-column: 2/4;
    /* 1에서 시작해서 2개 차지 */
grid-row: 1/span 2;
  • 이름으로 배치하기
    /* 영역에 이름 붙이기 */
grid-area: a; 

grid-template-areas:
	's m'
	'p p';
    비워 놓고 싶을 땐 마침표 . 사용
profile
POSI
고양이가 운영하는 테크블로그
다음 포스트

HTML 개념 정리

0개의 댓글

관련 채용 정보