[CSS] MDN 정리2

계단식 및 상속

계단식

• Cascading Style Sheet : 계단식
• 동일한 우선순위의 두 규칙 -> 마지막 규칙 적용

 

우선순위

• 선택자의 선택이 얼마나 중요한가
  • 요소 선택자는 덜 구체적 -> 중요도↓
  • class 선택자는 구체적 -> 중요도↑

 

상속

• 부모 요소에 적용된 CSS 속성은 자식요소에게 상속
  • width와 같은 일부 속성은 상속X

 

작동방식

1. 상속
   • 색상 : 직접 자식 + 간접 자식에 적용
   • special class  추가
   • 상식적으로 상속됨
2. 상속 제어
   • inherit : 상속에 영향O
   • initial : 속성값이 상속 대신 기본 스타일시트 속성값 inherit
   • unset : natural 값으로 재설정 (상속되면 inherit, 상속안되면 initial)
3. 모든 속성 값 재설정
   • all : 상속 값을 모든 속성에 한번에 적용하는 속성

body {
    color: green;
}
          
.my-class-1 a {
    color: inherit;
}
          
.my-class-2 a {
    color: initial;
}
          
.my-class-3 a {
    all: unset;
}

 

 

계단식 이해하기

1. 소스 순서 : 마지막 규칙이 우선 (속성 덮어쓰기)
2. 우선순위
   • 구체적인 선택자일수록 우선시 (자릿수로 가산점)
     
     1. style 속성 (인라인 스타일)
     2. ID 선택자
     3. class 선택자, 속성 선택자, pseudo-class 선택자
     4. 요소 선택자, pseudo-elemnet 선택자
   • 덮어쓰기가 이루어지는 것은 규칙이 아닌 속성
   • 모든 요소에 공통 스타일 적용 -> class로 일부 요소만 스타일 변경

<div id="outer" class="container">
    <div id="inner" class="container">
        <ul>
          <li class="nav"><a href="#">One</a></li>
          <li class="nav"><a href="#">Two</a></li>
        </ul>
    </div>
</div>

/* 1. specificity: 1-0-1 */
#outer a {
  background-color: red;
}
      
/* 2. specificity: 2-0-1 */
#outer #inner a {
  background-color: blue;
}

/* 3. specificity: 1-0-4 */
#outer div ul li a {
  color: yellow;
}

/* 4. specificity: 1-1-3 */
#outer div ul .nav a {
  color: white;
}

/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
  border: 10px solid black;
}

/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
  border: 10px dashed black;
}

/* 7. specificity: 0-3-3 */
div div .nav:nth-child(2) a:hover {
  border: 10px double black;
}

a {
  display: inline-block;
  line-height: 40px;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  width: 200px;
  margin-bottom: 10px;
}

ul {
  padding: 0;
}

li {
  list-style-type: none;
}

• 1 < 2 : id(1) vs id(2)
• 3 < 4 : id(1) class(0) vs id(1) class(1)
• 7 > 5 > 6

3.  !important

• 일반적인 계단식 규칙 무시
• 선언에 !important 덧붙이면 모든 규칙보다 우선함
• 사용 권장 X

border: none !important;

 

총정리

1. 작성자 스타일 시트 선언
2. 사용자 스타일 시트 선언
3. 브라우저 기본 스타일

 

---

선택자

기본 선택자

• 전체 선택자 (*): 문서 내의 모든 요소
  • 스타일 제거시
  • 더 쉽게 읽을 수 있도록
• 유형 선택자 (elementname) : 주어진 이름을 가진 모든 요소
• 클래스 선택자(.classname) : class 가진 모든 요소
  • .highlight
  • h1.highlight
  • 하나의 요소에 여러개 지정 가능 (<p class="notebox danger">)
• ID 선택자(#idname) : id를 가진 모든 요소
  • 클래스 선택자와 같은 방식
  • 하나의 요소에는 하나의 id만 적용 가능
• 속성 선택자 ([attr])
  • [attr] : 속성 존재하면 선택
  • [attr=value] : 속성값 정확히 일치하면 선택
  • [ ~= ] : 속성값이 일치하거나 값 목록에 있으면 선택
  • [ |=] : 속성값이 일치하거나 value로 시작하는 속성이 있으면 선택
• 하위 문자열 일치 선택자
  • [ ^= ] : value로 시작하는 속성이 있으면 선택
  • [ $= ] : value로 끝나는 속성이 있으면 선택
  • [ *= ] : value를 포함하는 속성이 있으면 선택
  • 닫는 괄호 앞에 i를 붙이면 대소문자구분X

 

그룹 선택자

• 선택자 목록 (,) : 하나의 선택자라도 유효하지 않으면 전체 규칙 무시

 

결합자

• 자손 결합자 (A B) : 첫번째 요소의 모든 자손 노드 선택
• 자식 결합자 (A > B) : 첫번째 요소의 바로 아래 자식 노드 선택
• 일반 형제 결합자 (A ~ B) : 첫번째 요소를 뒤따르는 부모가 같은 요소 모두 선택
• 인접 형제 결합자 (A + B) : 첫번째 요소를 뒤따르는 부모가 같은 바로 뒤의 요소만선택

 

의사 클래스/요소

• 의사 클래스 (:) : 상태 정보에 기반하여 요소 선택
  • a:visited/hover/focus
  • p:first-child/last-child/only-child/invalid
  • :nth-child/
• 의사 요소 (::) : HTML이 포함하지 않는 개체 선택
  • p::first-line : 모든 p의 첫 줄
  • ::before/after { content: "▶" } : 콘텐츠 생성 가능

---

상자 모델

외부 디스플레이 유형

• 블록 박스
  
  • 줄바꿈
  • width와 height 적용
  • padding, margin, border이 다른 요소들 밀어냄
  • 사용 가능한 공간 채움 
    • <h1>, <p>
• 인라인 박스
  • 줄바꿈X
  • width, height 적용X
  • padding, margin, border이 다른 요소 밀어내지 않음
    • <a>, <span>, <em>, <strong>

 

내부 디스플레이 유형

• 상자의 내부 요소가 배치되는 방식 표시
• flow : 플로우 레이아웃을 사용해 배치
• table : HTML <table> 처럼 동작
• flex : 플렉스박스 모델에 따라 배치
• grid : 그리드 모델에 따라 배치

 

기본 Box Model

• content
• padding
• border
• margin : 박스의 크기에 포함X
• 너비/높이 = content + padding * 2 + border * 2

 

대체 Box Model

• box-sizing: border-box
• 너비/높이 = content 크기
• 모든 요소에 대체 박스모델 사용

html {
  box-sizing: border-box;
}

 

여백

• 박스 주변에 보이지 않는 공간
• 음수값 : 공백 겹칠 수 있음
• 여백 축소 : 맞닿은 여백은 하나의 여백이 되고, 가장 큰 크기로 결정
• margin-top/right/bottom/left

 

테두리

• 표준 박스모델의 경우 테두리 추가 -> 크기 증가
• 대체 박스모델의 경우 테두리 추가 -> 크기 감소
• border-top/right/bottom/left
• border-width/style/color : solid/dotted/double

 

패딩

• 음수를 가질 수 없음
• 테두리에서 콘텐츠를 밀어내는 용도
• padding-top/right/bottom/left

 

박스 모델과 인라인 박스

• 일부 적용
• width, height 무시
• margin, padding, border 적용되지만, 밀어내지 않아 겹쳐짐

 

inline-block : 중립적인 외부 디스플레이 유형

• 줄바꿈X
• width, height 적용
• padding, margin, border 적용, 다른 요소 밀어냄

---

배경 및 테두리

배경 스타일링

배경 색상

• background-color
• content & padding에 적용

 

배경 이미지

• background-image: url( )
• 이미지가 로드되지 않을 상황을 고려하여 적절한 배경색 지정 필요
• 이미지 반복 배열 제어
  • 기본값 : 바둑판 반복
  • background-repeat: 바둑판 배열 제어
  • no-repeat/repeat
  • repeat-x/y : 수평/수직 반복
• 이미지 크기 조정
  • 기본값 : 잘림
  • background-size: 길이, 백분율 사용
  • cover : 박스를 덮으면서 비율 유지, 일부 잘릴 수 있음
  • contain : 박스 안으로 비율 유지, 간격 생길 수 있음
• 이미지 배치
  • 기본값 : (0,0)
  • background-position: 좌표계, 길이, 백분율, 키워드 (혼용가능)
  • top / right / center
• 그라데이션 배경
  • background-image: linear/radial-gradient(각도(deg), 색상 %, 색상%)
•  여러개의 이미지
  • 콤마로 구분
  • 코드가 앞서면 앞에 배치
  • 배경 속성도 콤마로 구분 가능 (순환 적용)

background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px,  top right;

 

배경 고정

• 스크롤 방법 지정
• scroll : 페이지가 스크롤되면 요소의 배경도 스크롤, 요소의 콘텐츠에서는 고정
• fixed : viewport에 고정시켜 배경이 항상 화면에서 동일한 위치에 유지
• local : 페이지가 스크롤되면 요소의 배경도 스크롤, 요소의 콘텐츠에서도 함께 스크롤
• https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html

Background attachment example

 

배경 shorthand 사용

• background-color는 마지막 쉼표 뒤에만 지정
• backgrount-position / background-size

 

테두리

• border
  • top/right/bottom/left
  • width/style/color : dashed, dotted, solid, double
• 둥근 테두리
  • border-radius
  • 길이, 백분율
  • top/bottom-right/left-radius

---

텍스트 표시 방향

쓰기 모드

• writing-mode
• vertical-rl : 수직, 오->왼
• vertical-lr : 수직, 왼->오
• horizontal-tb : 수평, 위->아래

 

논리적 속성

• 쓰기모드 변경으로 인한 콘텐츠 오버플로우 발생
• width -> inline-size
• height -> block-size
• top/bottom -> block-start/end
• left/right -> inline-start/end

---

콘텐츠 overflow

CSS 기본 동작

• 데이터 손실을 피한다
• 콘텐츠 손실은 손실되었음을 알 수 없음
• 눈에 띄게 overflow

 

overflow 속성

• overflow
  • 기본값: visible
  • hidden
  • scroll
    • 한 축만 스크롤바를 표시하려면 overflow-x/y: scroll
  • auto : 넘칠 경우에만 스크롤 막대 표시
• 긴 단어 처리 : word-break; overflow-wrap;

 

BFC (Block Formatting Context)

• overflow 값을 사용할 때 BFC 생성함
• overflow 값을 변경한 박스의 내용이 미니 레이아웃이 됨
• 일관된 스크롤 환경을 만들기 위해

 

 

---

CSS 값

CSS 값

• 데이터 유형
• 특정 속성에 유효한 값
  • color(속성): <color>(데이터형식);

 

숫자, 길이, 백분율

• <integer> : 정수
• <number> : 10진수, 소수점 가능
  • opacity(투명도): 0-1
• <dimension> : 단위가 있는 <number>
  • <length>, <angle>, <time>, <resolution>(해상도)
  • 절대 길이 단위 : px
  • 상대 길이 단위
    • em : 부모 요소의 글꼴 크기 -> 중첩
    • rem : 루트 요소의 글꼴 크기 -> 중첩X
    • lh : 요소의 라인 높이
    • 1 vw : viewport 너비의 1%
    • 1 vh : viewport 높이의 1%
• <percentage> : 다른 값의 일부
  • 부모 요소의 길이 기준
  • 허용된 값에 <length>만 포함된 경우 사용불가

 

색상

• 색상 키워드
• 16진수 RGB 값 (#000000)
• 10진수 RGB값 (rgb(0, 0, 0))
  • rgba(0, 0, 0, 0) : 불투명도까지 조절
• HSL (hsl(360, 100%, 100%))
  • 색조(Hue) : 색상 0~360
  • 채도(Saturation) : 0~100%
  • 명도(Lightness) : 0~100% (검은색 -> 흰색)
  • hsla(360, 100% 100% / 0) : 불투명도까지 조절

 

이미지

• 실제 이미지 파일
• url( )
• gradient( )

 

위치

• 2D좌표
• 위치 키워드
• 가로 위치 값
• 세로 위치 값

 

문자열과 식별자

• 식별자 : 문자열로 취급X
• 문자열 : content: " "

 

---

CSS 항목 크기 조정

고유 크기

• HTML이 CSS의 영향을 받기 전에 설정한 자연스러운 크기
• 빈 div는 크기가 없음

크기 설정

• 외적인 크기 : 디자인 요소에 크기를 지정
• overflow 발생 위험
• 백분율 : 부모 container 너비의 백분율
  • 여백을 백분율로 설정하면 인라인(수평) 크기에서 계산

 

최대/최소 크기

• min-height : 박스는 항상 이 높이 이상
  • overflow 피함
  • 가변적인 양의 콘텐츠에 적합
• max-height : 이미지 공간 충분하지 않을 때 사용

 

Viewport 단위

• viewport : 페이지의 가시영역
• vw : 너비(%)
• vh : 높이(%)

 

---

이미지, 미디어

대체요소

• <iframe>, <video>, <embed>, <img>
• CSS로 해당 요소의 내부 레이아웃 변경 불가
• 크기 조정
  • max-width : 박스 크기에 맞게 축소
  • object-fit: cover/contain/fit
    • cover : 잘라서 채움
    • contain : 비율 유지하고 채우지 않음
    • fit : 비율 유지하지 않고 채움
• 레이아웃 사용 : 대체 요소들은 확장되지 않고 시작부분에 정렬
  • flex/grid에서 기본 요소들은 채우면서 확장

 

양식 요소

• <input> : 텍스트 입력 등과 같은 간단한 양식 컨트롤
• <textarea> : 여러줄 텍스트 입력하는 추가 요소
• <fieldset>
• <legend>

 

 

텍스트 입력 요소 스타일링

• <input type="text/email">, <textarea> : 다른 박스처럼 동작

input[type="text"],
input[type="email"],
textarea {
  border: 2px dotted #000;
  margin: 0 0 1em 0;
  padding: 10px;
  width: 100%;
  background-color: orange;
}

input[type="submit"] {
  border: 3px solid #333;
  background-color: #999;
  border-radius: 5px;
  padding: 10px 2em;
  font-weight: bold;
  color: #fff;
}

input[type="submit"]:hover, input[type="submit"]:focus {
  background-color: #333;
}

<form>
  <div><label for="name">Name</label>
  <input type="text" id="name"></div>
  <div><label for="email">Email</label>
  <input type="email" id="email"></div>
<div><label for="textarea">Textarea</label>
  <textarea></div>

  <div class="buttons"><input type="submit" value="Submit"></div>
</form>

 

양식요소의 상속

• 기적으로 글꼴 스타일 상속하지 않음
• 상위 요소에 정의된 글꼴을 사용하려면 CSS에 명시적으로 작성 필요
  • font-family: inherit;

 

양식요소 크기 조정

• 마진과 패딩을 0으로 설정하여 일관성 유지
• 특정 컨트롤만 마진 추가

 

다른 설정

• <textarea> overflow: auto : 스크롤막대 자동숨김

 

재설정

• 일관된 작업기반 제공

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}

textarea {
  overflow: auto;
}

 

---

표 스타일링

간격 및 레이아웃

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th, td {
  padding: 20px;
}

• table-layout: fixed;
  • 표가 예측 가능하게 작동
  • 내용의 양에 따라 크기 조정되어 이상한 결과가 발생하는 걸 막음
  • 제목의 너비에 따라 열의 크기 지정
  • thead th: nth-child(n); : 요소로 제목 너비 지정
• border-collapse: collapse;
  
  • 표 스타일 작업의 표준 모범 사례
  • 테두리 사이 간격을 하나로 축소

 

 

간단한 typography

• font-family : 글꼴 설정
• letter-spacing : 주로 가로 여백 설정

 

줄무늬 행

• tr: nth-child(odd/even)
• 2n, 2n-1

 

caption

• caption-side : 배치 위치 설정

 

표 스타일링 빠르게

• table-layout : fixed 사용하여 열 너비 쉽게 설정
• border-collapse: collapse 사용하여 테두리 서로 겹치게 만들어 깔끔하게
• <thead>, <tbody>, <tfoot> 으로 논리적 덩어리 나누기

---

CSS 디버깅

DOM

• 렌더링된 DOM에서 잘못 작성된 HTML 수정
• HTML 표준화
• JavaScript로 변경된 내용도 표시

 

소스보기

• 서버에 저장된 HTML 소스 코드
• 특정 시점에 브라우저가 렌더링하는 내용을 정확하게 보여줌
• 진행상황 확인

 

DevTools

• 적용된 CSS 검사
• 값 편집
• 새 속성 추가

 

---

CSS 구성

CSS 깔끔하게 유지하는 팁

• 일관성 유지
  • class에 동일한 이름 지정 규칙
  • 색상 설명하는 규칙
• 읽기 쉬운 CSS 서식
  • 한줄 or 줄구분
• 주석 추가
• 논리 섹션 만들기
  • 모든 공통 스타일 만들어두기 (body, p, h1, ul, table)
• 지나치게 구체적인 선택자 피하기
• 여러개의 작은 스타일시트로 나누기

 

기타 도구

• CSS방법론 : CSS 코딩 가이드
• OOCSS : 객체지향에 기반한 CSS, 재사용 가능
• BEM : Block Element Modifier
  • 블록 : 버튼, 메뉴, 로고와 같은 독립적인 것
  • 요소 : 리스트, 제목과 같은 블록이 연결되는 것
  • Modifier : 스타일이나 동작을 변경하는 플래그
• 그외 SMACSS, ITCSS, Atomic CSS
• 전처리기 : 실행 -> 스타일시트로 변환
• 후처리기 : 완성된 스타일시트 불러옴 -> 최적화, 더 빠른 로드

 

Sass

• 가장 유명한 전처리기
• 변수 사용
  • 모든 색상과 글꼴을 설정으로 정의
  • 프로젝트 전체에 해당 변수 사용

$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}

/* 최종 스타일 시트에서 */
.alert {
  border: 1px solid #c6538c;
}