CSS 알아보기

ho_IT·2022년 9월 8일

CSS

HTML & CSS

목록 보기

4/4

🔔 CSS

1) CSS 란?

HTML이 웹의 뼈대 / CSS는 HTML을 꾸며주는 가죽, 피부에 해당
Cascading Style Sheets
- Cascading : 폭포가 되어 떨어지다 / CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용 / 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양
- Style Sheets : 웹 페이지의 스타일을 정리해둔 문서

2) 기본 구조


p {
	font-size: 20px;
    color: red;   
}

p : Selector
font-size / color : property
20px; / red; : value

3) RESET CSS

브라우저 제작사들마다 각각 브라우저가 제공하는 요소의 기본 스타일이 모두 다름
따라서 해결 방법들이 등장
- 에릭 마이어의 reset CSS / 2011년 이후 업데이트 중단
  https://meyerweb.com/eric/tools/css/reset/
- normalize.css / 브라우저 고유의 스타일을 존중하면서 거기에 스타일을 첨가
  https://necolas.github.io/normalize.css/
- CSS Remedy / 차세대 CSS reset 프로젝트
  https://github.com/jensimmons/cssremedy

4) Vendor-Prefix

벤더(브라우저 제조사)와 프리픽스(접두어)의 합성어
아직 비표준이거나 실험적인 CSS 속성을 특정 브라우저에서 실행할 수 있도록 CSS 속성 앞에 브라우저 제조사 만의 접두어(prefix)를 붙이는 문법을 의미
종류 : -webkit- -moz- -ms- -o-

자동화 : https://autoprefixer.github.io/

5) CSS Selector

1. 전체 선택자 (Universal Selector)

* {
    margin: 0 auto;
}

전체 선택자를 통해서 모든 HTML 요소에 접근

2. 타입 선택자 (Type Selector)

h1 {
    color: red;
}

해당 태그의 이름에 해당하는 모든 태그에 속성을 적용

3. 아이디 선택자 (ID Selector)

<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    #green { color : green;}
  </style>
</head>
<body>
  <p id="green">이 문단은 green id를 부여하였습니다.</p>
</body>

페이지에 있는 해당 요소를 유일하게 식별할 때 사용
같은 페이지 안에 id 값은 유일해야 함
id 이름을 최대한 직관적이고 간단명료하게 지어주는 것도 중요
<a> 태그의 href 속성과 연결하여 다른 페이지로 이동하는 링크가 아닌 현재 페이지에서 이동하는 해쉬 링크를 만들 수도 있다

4. 클래스 선택자 (Class Selector)

.green { 
    	color: green;     
}

class 속성은 한 페이지에 여러 개가 존재할 수 있기 때문에 동일한 class 속성이 들어간 요소들을 동시에 식별할 수 있음
직관적이고 간단명료하게 적어주는 것이 중요
중복이 가능하다는 특징 때문에 유니크한 class를 생성하여 자주 쓰는 스타일을 정의해두고 재사용하는것이 가능

5. 선택자 목록 (Selector list)

h1, h2, h3, h4, h5, h6 {color: red;}

콤마(,) 로 선택자를 연결하여 일치하는 모든 요소를 선택

6) 선택자 우선순위

1. 후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선 / 덮어씌워진다

2. Specificity (명시도, 구체성)

한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선 / 가중치를 기준으로 판단
가중치 : id > class > 타입 순으로 style 적용
브라우저 입장에서 가장 가치 있는 정보가 무엇일까?
메달로 생각해보자. / (금, 은, 동)
(0, 1, 0)이 (0, 0, 2)보다 우선순위
동점이면 나중에 코딩 된 것이 우선순위
https://specifishity.com/

3. 중요성의 원칙

다른 속성보다 더 우선적으로 적용되어야할 중요한 스타일 속성이 있다면 !important 를 속성값 다음에 추가
가중치 점수를 무시하고 무조건적인 우선 순위를 가진다
지양

🔔 마무리

디자인을 위한 이미지에는 보통 대체텍스트를 사용하지 않는다 / 사용자에게 무조건 많은 정보를 제공하기보다는, 이 이미지가 사용자에게 필요한 정보인가? 하고 판단하는 자세가 필요
혼란한 상태에서 자리를 지키고 있다는 것만으로도 잘하고 있는 것
과정이 목적 자체가 되는 것

ho_IT

호잇

이전 포스트