[CSS] BEM, reset, not, inherit

[오늘의 공부]

1. HTML
   • index.html 사용 이유
2. CSS
   • css 방법론 - BEM
   • 아이콘 추가 방법
   • css hack - space-between 대체
   • reset css
   • :not() selector
   • inherit

---

index.html

대부분의 웹 서버는 디폴트로 index.html을 찾아보도록 설정되어 있음

영어에서 index는 첫 번째라는 의미

 

vscode 단축키

shift + alt + 방향키 위 아래 : 해당 라인 복붙

div class="name" → div.name
div id="id" → div#id

div 10개 → div*10

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

 

CSS 방법론

CSS의 class name을 어떻게 지으면 좋을지에 관한 것

 

CSS의 방법론 중 하나인 BEM(Block Element Modifier)

 

Block은 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트

Element는 블럭을 구성하는 단위

Modifier는 블럭이나 엘리먼트의 속성

 

Block, Element, Modifier → 이 세 가지로 구성된 이름 짓기

각각 __와 --로 구분 block__element--modifier

 

BEM은 기본적으로 id를 사용하지 않으며, class만을 사용

BEM을 사용함으로써 어떤 클래스가 어떤 책임을 가지는지,

서로 관계는 어떻게 되는지 쉽게 알 수 있음

 

BEM 정리 글

[CSS 방법론] BEM 방식

 

아이콘 추가 방법

1. 직접 이미지 아이콘 추가

2. SVG (픽셀이 아닌 path로 되어있는 이미지)

• Heroicons [Heroicons - Free Open Source SVG Icon Library] - https://heroicons.dev/
• Fontawesome [Font Awesome] - https://fontawesome.com/

 

css hack

space-between

justify-content: space-between을 사용하면 No Service가 길어서 중간 요소가 오른쪽으로 치우져서 보임

 

css hack 적용

이럴 때 사용할 수 있는 css hack (일종의 레시피)

1. 전체 요소들 모두 가운데 위치
justify-content:center; 

2. 각 div에 width: 33% 값을 주어 status-bar를 3등분
그러면 스크린을 줄이거나 늘이더라도 요소들은 div 안에서 왼쪽 정렬로 위치한 상태

3. 첫 번째 column은 가장 왼쪽(기본값), 2번째는 가운데(center) 그리고 3번째는 가장 끝(flex-end)으로 위치

 

reset css 

대부분의 태그에 margin: 0, padding: 0, border: 0 등을 가진 reset.css 파일

Eric Meyer’s “Reset CSS” 2.0 | CSS Reset

 

reset.css 파일 만들고 styles.css에서 @import "reset.css"

 

@import CSS 규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰임

@charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 함

 

:not() selector

부정 CSS 가상 클래스로 특정 선택자가 제외된 경우에 대한 스타일을 적용할 수 있음

 

input 타입이 submit이 아닐 때만 border-bottom과 transition이 적용

#login-form input:not([type="submit"]) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease-in-out;
}

 

inherit

CSS inherit 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 계산값을 받아 사용

CSS all 단축 속성을 포함한 모든 속성에 사용 가능

 /* 부모 요소의 color를 사용 */
 h2 { color: inherit; }