[데브코스/TIL] DAY4 - CSS(2)

Minha Ahn·2024년 10월 17일
데브코스프론트엔드
0

데브코스

목록 보기
1/24
post-thumbnail

💄 브라우저 기본 스타일

본격적인 CSS의 필수 개념과 속성을 알아보기 전에 브라우저 기본 스타일을 짚고 넘어가자.
어떠한 CSS 작업을 하지 않은, HTML 태그가 기본적으로 가지고 있는 스타일이 기본 스타일이다.

각 브라우저들의 기본 스타일은 조금씩 다르다.
브라우저마자 가지고 있는 기본 스타일 시트가 다르기 때문이다.

그래서 본인이 사용하고 있는 브라우저의 기본 스타일을 기반으로 CSS 작업을 한다면..!
그 결과물은 브라우저마다 다를 것이다.

그래서! 모든 브라우저의 디자인을 기본적으로 통일하고 CSS를 시작하는 것이 좋다.
에릭 마이어의 Reset CSS가 바로 이 CSS 통일을 도와준다.

Reset CSS를 확인하고 싶다면 이 링크를 클릭하면 되겠다.
예전에 다른 사람의 코드를 보다가 이렇게 잘 정리된 CSS 코드를 어디서 가져온거지 싶었는데 바로 이것이었다.



🔎 CSS 필수 개념

1. 적용 우선 순위

  • CSS는 똑같은 속성이 중복되어 있으면 중복된 값 중 하나만 선택해 적용
CSS 설정 방식설명점수
!important 핵!important최고 우선순위
인라인 스타일HTML 요소의 style 속성 적용1000
아이디 선택자#id100
클래스 선택자, 가상 클래스 선택자.class & :hover, :visited 등10
태그 선택자, 가상 요소 선택자div, p 등 & ::before, ::placeholer 등1
전체 선택자*0
일반 스타일초기 스타일 시트 규칙최저 우선순위
  • CSS 선택자 우선순위를 계산해주는 사이트 => 링크

2. 상속

  • 부모 요소의 스타일이 자식 요소에게 자동 적용되는 기능
  • 텍스트 관련 속성은 상속 가능
  • 박스 모델 속성은 상속 불가능
  • 상속 가능 여부를 확인할 수 있는 사이트 => 링크 (Inherited 확인)

3. 단위

절대 단위

  • 종류 : px
  • px : 기본적으로 웹 브라우저의 기본 단위는 16px

상대 단위

  • 종류 : %, em, rem, vw, vh
  • em : 부모 요소가 기준 (부모 요소의 폰트 크기에 따름)
    • ex) 부모 요소의 폰트 크기가 16px => 자식 요소에서 1em = 16px
    • 실무에서는 잘 쓰이지 않음 (em이 중첩되면 계산이 힘들어지기 때문)
  • rem : 최상위 요소(html 태그)가 기준 (항상 일정함)

4. 색상 표기법

색상 키워드

  • 색상을 영문 이름으로 지정하는 것 (vscode에서 cntrl + space)

HEX

  • 16진수로 #RRGGBB 형식으로 지정하는 것
  • HEX로는 투명도 지정을 못하는가? => Alpha까지 붙여 6자리가 아닌 8자리로 표현 가능 `#RRGGBBAA

RGB

  • 0 ~ 255 사이의 숫자로 rgb(R, G, B) 형식으로 지정하는 것
  • 왜 0 ~ 255인가? => 1byte = 8bit

RGBA

  • RGB에서 투명도만 추가되어 rgba(R, G, B, A) 형식으로 지정하는 것
  • Alpha는 0부터 1까지의 값으로


💡 CSS 필수 속성

1. 텍스트 관련 속성

color

  • pass ~

font-family

  • 폰트 설정
  • 사용할 폰트와 함께 대체 폰트도 함께 지정함
    • 앞의 폰트 불러오기에 실패하면 다음 폰트를 불러오는 방식
    • 근데 앞의 폰트가 안 불러와졌다? 이미 그건 고쳐야 할 일
h2 {
  font-family: "Edu AU VIC WA NT Guides", cursive;
}

font-size

  • 텍스트 크기 설정
  • 단위는 위에 있으니까 pass ~

font-weight

  • 텍스트 굵기 설정
  • 방법1. 기본적으로 100 ~ 900까지 100단위의 숫자로 지정
  • 방법2. bold, bolder 같은 키워드로 지정
    • normal == 400, bold == 700
    • 내가 사용하는 폰트에서 해당 굵기를 제공하는지 확인 필요

font-style

  • 텍스트 스타일 설정
  • normal(일반), italic(이탤릭체), oblique(비스듬한 이탤릭체)
  • 내가 사용하는 폰트에서 해당 스타일 지원하는지 확인 필요

font-variant

  • 영문을 크기가 작은 대문자로 변경할 때 사용

text-align

  • 텍스트 정렬 방식 선택
  • left, center, right, justify(양쪽 정렬)

text-decoration

  • 텍스트에 장식 추가
  • none, underline, overline, line-trough

line-height

  • 텍스트의 줄 간격 설정
  • 숫자만 작성하면 비율
    • line-height: 1; : 폰트 크기와 line-height를 일치 시키는 것
  • px, em, %와 같은 단위 사용 가능
  • 따로 설정하지 않는다면, 폰트가 16px이어도 전체 높이는 16px보다 클 수 있음

letter-spacing

  • 문자 간의 간격 설정
  • px, em, rem 단위 사용

2. 박스 모델 관련 속성

  • 모든 HTML 요소는 사각형 모양의 박스로 구성
  • margin, border, padding, content 영역으로 구분
  • 기본적으로 width와 height 설정은 content 영역에만 적용
    • 기본값이 box-sizing: content-box이기 때문
    • 나는 border까지 적용시키고 싶다! => box-sizing: border-box;로 설정

margin

  • 요소와 주변 요소 사이의 공간 설정
  • 마진 겹침 현상
    • CSS에서 두 개 이상의 블록 요소가 인접해 있을 때, 서로의 마진이 겹치면서 발생하는 현상
    • 보통 마진이 더 큰 쪽으로 설정됨

border

  • 요소의 경계선 설정
  • 두께, 스타일, 색상 설정

padding

  • 콘텐츠와 요소의 경계 사이의 공간 설정

content

  • 요소의 실제 내용이 표시되는 영역

3. 박스 모델 성격 & display 속성

박스 모델 성격

  • 박스 모델에는 여러가지 성격 존재: block, inline, inline-block
    • HTML 태그에서 block 요소, inline 요소가 있듯이
  • block 성격
    • 요소의 너비가 콘텐츠 유무와 상관없이 가로 한 줄을 다 차지하는 것
    • hn, p, div 태그
    • margin: 0 auto;: 블록 속성에만 적용 가능
  • inline 성격
    • 요소의 너비를 콘텐츠 크기만큼 차지하는 것
    • a, span, strong 태그
    • width와 height 지정이 안됨
  • inline-block 성격
    • 요소의 너비가 콘텐츠의 크기만큼 차지하는 인라인 성격 + 그 외는 블록 성격
    • 한줄로 차지하지만 width와 height 지정 가능

display 속성

  • 박스 모델의 성격을 바꾸려면 display 속성 사용
  • block, inline, inline-block, none(제거된 것처럼), flex, grid

4. 배경 이미지

background-image

  • 배경 이미지 설정
  • url 속성과 함께 사용
  • 여러 이미지 사용 가능
    • url('image1.jpg'), url('image2.png')
  • 기본적으로 왼쪽 상단부터 보여짐
  • 이미지 크기 > 보여지는 영역 : 잘려서 보임 (crop)
  • 이미지 크기 < 보여지는 영역 : 기본적으로 반복해서 보여줌
  • background-image를 사용하면 웹접근성은? => 포기해야 함. 단, ARIA 사용 가능

background-repeat

  • 배경 이미지의 반복 방식 설정
  • repeat(기본값), repeat-x, repeat-y, no-repeat, space, round

background-position

  • 배경 이미지의 위치 설정 (x축, y축 지정 가능)
  • top, right, bottom, left, center
  • px, % 단위 가능
  • 보통 실무에서는 1920보다 큰 이미지 준비해서 가운데를 보여주도록 설정

background-size

  • 배경 이미지의 크기 설정
  • auto(기본값), cover(요소의 배경 완전히 덮기), contain(비율 유지하여 요소안에 맞게 조정)
  • px, % 단위 가능

background-attachment

  • 배경 이미지의 스크롤 방식 설정
  • scroll : 페이지 스크롤에 따라 배경 이미지가 움직임 (기본)
  • fixed : 스크롤 시 배경 이미지 고정됨
  • local : 요소의 스크롤에 따라 배경 이미지가 움직임
  • 수업은 안하셨지만 내가 몰랐던 거라 추가
  • 이해가 잘 안됐는데 이거 보니까 도움됨 => 유튜브 링크

background

  • 여러 배경 관련 속성을 한 줄로 설정
  • background-image, background-repeat, background-position, background-size, background-color
  • 근데 추천하지는 않음
background: url('./images/london.png') no-repeat center/cover;


✏️ 메모

  • 코테 문제 은행
  • 태그 선택자로는 CSS 작업을 잘 안한다
    • 모든 태그에 적용되는 문제
    • 중간에 태그가 바뀌면 다 깨짐
  • 아이디 선태가조로도 CSS 작업을 잘 안한다
  • 중요한 건 아래에 따로 정리함

ARIA

  • 웹 접근성을 위해 추가적인 정보를 전달하기 위한 속성
  • 여러가지 존재 (ex. aria-hidden, aria-label, aria-expanded)
  • 효과적인지는 모르겠으나 없는 것보단 낫겠지...?
<div aria-label="~~한 이미지가 들어가 있음"></div>

BEM 방법론

  • 역할 구분하기 위한 네이밍 방법론
  • Block__Element--Modifier
    • Block : 영역을 대표할 수 있는 대표 이름
    • Element : 어떤 이름을 차지하는지 알려주는 이름
    • Modifier : 같은 요소이나 스타일을 다르게 정할 때 붙여주는 이름
  • Block안에 Block 이름은 어떻게 정할까? => 새로운 블록으로 다시 시작하는 게 낫다.
  • BEM 이름은 구조를 보고 정하는 것이 아니라 요소를 보고 정하는 것
    • 구조가 같다고 같은 블록으로 치면 안된다는 것

CSS 작업할 때 이 정도는 reset하자

margin: 0;
padding: 0;
box-sizing: border-box

블록 요소를 inline-block으로 변경시 생기는 CSS 버그

  • 어떤 버그냐
    • 요소들 사이에 미세한 간격이 생기는 문제
  • 어떻게 해결하냐
    • 부모 요소에 font-size: 0; 적용
    • 해당 요소들에 정확한 font-size 부여
  • 원리는 아직 잘 모르겠다 => 내일 설명 들어야쥐
    • 강사님은 아니고 gpt에게 물어본 결과... 진짜 놀랐다.

HTML에서 요소들 사이에 공백(줄바꿈, 스페이스 등)이 있으면 브라우저는 이를 공백 문자로 처리한다고 한다. 즉, 프리티어 적용 등으로 태그 종료 시 줄바꿈이 생기는 데 이를 공백으로 인식하여 한 칸 씩 요소들이 떨어져 있던 것이다. (미세한 간격은 공백 문자였던 것)
그래서 공백을 없애기 위해 폰트 크기를 0px로 지정하고 요소들에게 다시 폰트 크기를 원상복구 시키는 것이다.

Role

  • HTML의 속성으로, 웹 접근성을 개선하는 역할
  • 좀 더 명확한 HTML 요소와 구조와 의미 부여 역할
  • button, link, checkbox, dialog, alert, list 등
  • 종류가 너무 많다! 기억 못해!
    • 사이트가 있지요
    • 5 ~ 5.4까지 role에 관련된 내용
<a href="#" role="button" onClick="goCourse()">Button</a>





📌 출처

수코딩(https://www.sucoding.kr)

profile
Minha Ahn
프론트엔드를 공부하고 있는 학생입니다🐌
다음 포스트

[데브코스/TIL] DAY3 - HTML(3) & CSS(1)

post-custom-banner

0개의 댓글