[220902] CSS 초기값 / 사용자 정의 스타일 등등

✏️ 오늘 배운 내용

• HTML, 태그와 요소의 차이
• CSS 선택자 종류
• CSS 선택자 우선순위
• 초기값(initial value)이란?
• 사용자 정의 스타일(user agent styelsheet)이란?
• CSS 작업단계

---

 

 

 

 

CSS 에서의 100%는 어떤 의미인지 엄밀히 따져야하고, 전문성을 띄려면 정확히 말해야한다.
- grandmaster of css

 

 

 

 

 

 

 

📖 HTML, 태그와 요소의 차이

 

• 태그(Tag)

<div>    <!-- div 시작 태그 -->
</div>   <!-- div 종료 태그 -->
<img>    <!-- img 태그 -->

태그는 단순히 <  > 로 묶인 명령어로, 요소의 시작과 끝을 알리는 문법 기호이다.

위의 <div>는 시작 또는 여는 태그,  </div>는 종료 또는 닫는 태그.

<h1>나 <p>도 마찬가지이다.

<img>나 <br>과 같이 종료태그 없이 하나로 이루어진 태그도 있다.

 

 

• 요소(Element)

<div>hello</div>
<h1>안뇽</h1>

위와 같이 태그 안에 텍스트를 넣어 만들어낸 형태를 요소라고 한다.
이것들이 모여 웹페이지를 이루는 것이다.

<div> 요소, <h1>요소 라고 부른다.

 

 

 

 

📖 CSS 선택자 종류

 

• 전체 선택자(Universal Selector): HTML 페이지 내부의 모든 태그를 선택한다.

* {
  margin: 0;
  padding: 0;
}

 

 

• 태그 선택자(Type Selector): 유형 선택자라고도 부른다. 특정 태그를 선택한다.

p {
  background-color: green;
  font-size: 14px;
}

 

• 클래스 선택자(Class Selector): HTML에 입력한 class명과 일치하는 요소를 선택한다.

/* HTML */
<div class="hello">안뇽</div>


/* CSS */
.hello {
  color: green;
}

 

• ID 선택자(ID Selector): HTML에 입력한 id명과 일치하는 요소를 선택한다.

  - identity의 약자로 주민등록증과 같이, 어떤 요소에 대해 유일한 특성으로 오직 하나만 사용할 수 있다.

/* HTML */
<div id="hello">안뇽22</div>


/* CSS */
#hello {
  color: green;
}

 

 

 

 

📖 CSS 선택자 우선순위

1. !important → !important를 속성값 옆에 작성하면 우선순위가 가장 높에 부여된다.
2. 인라인 선언방식 → HTML의 시작태그에 style 속성을 직접 때려넣어주는 방식으로, 등짝을 맞을 수도 있다고 한다.
3. id 선택자
4. class 선택자
5. 유형 선택자
6. 전체 선택자

<ul>
  <li class="sns blue">facebook</li>
  <li class="sns black">GitHub</li>
  <li class="sns purple pink">instagram</li>
</ul>

위의 경우에서 우선순위는 이러하다.

구체적인 선택자의 우선순위가 높다(selector specificity)

 

1.    sns.purple.pink

2.    sns.blue / sns.black / sns.purple

3.    sns

 

 

 

 

📖 초기값(initial value)이란?

• property에 할당된 초기값으로, 요소가 아닌 property 기준으로 부여가 된다.
• 모든 프로퍼티에는 초기값이 존재하고, 값의 형태가 다르다.
• 속성 값을 initial 로 입력하면 initial value로 설정된다.

div {
  background-color: transparent;
  width: auto;       /* initial value(초기값) ← 부모 기준 */
  height: auto;      /* initial value(초기값) ← 자식 기준 */
  box-sizing: content-box;
  background-color: transparent;
  margin: 0 auto;
}

 

• width와 height의 초기값
  •  width: auto;    →  부모 기준으로 너비를 설정한다.
  •  height: auto;   →  자식 기준으로 높이를 설정한다.
    
    
•  box-sizing   CSS의 테두리 영역의 크기를 결정
  
  •  content-box; 
    → 지정한 CSS width 및 height를 컨텐츠 영역에만 적용합니다.
    → padding, border, margin은 따로 계산되어 전체 영역이 설정값보다 커질 수 있습니다.
    
    
  •  border-box; 
    → 지정한 CSS width 및 height를 전체 영역에 적용합니다.
    → padding, border, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 적어질 수 있습니다.
    → padding을 크게 설정해도 width에 입력한 너비만큼 컨텐츠 크기 고정된다.
    

 

• 사용 가능한 공간 (available space)
  • block-level 요소는 컨텐츠의 너비가 작아도 부모 요소의 최대 너비를 가진다.
  • 남는 여백 공간을 사용 가능한 공간으로 여긴다.

 

• margin: auto;
  • 초기값이 0으로 된다.
  • margin는 좌우 만 가능하다.
  • 상하 공간은 다른 컨텐츠의 공간이다.

 

 

 

 

📖 사용자 정의 스타일(user agent stylesheet)이란?

 

• 각 브라우저마다 정해놓은 CSS 기본 규칙으로,
  크롬 브라우저에 여백이 생기거나 하는 이유이다.
  예) body 요소에 적용되어 있는 margin: 8px;

 

 

 

 

 

 

 

 

 

 

 

 

 

📖 CSS 작업단계

1. 크게 레이아웃을 나눈다.

2. 사용자 유저 스타일을 리셋한다.(→ CSS reset)

3. 언제나 레이아웃이 먼저이다. 폰트사이즈, 컬러 같은 것은 그 이후 디테일 작업에서 한다.

* 배경 이미지는 덩어리로 포함하지 않는다.

 

 

 

❓헷갈렸던 점

 

✏️ <div> 요소의 width 값을 입력하지 않았을 때, <div>가 브라우저를 가득 채운 이유는?

• 이유는 width: auto; 로 설정되어 부모 요소로부터 주어진 가용 너비의 최대 너비를 가진졌기 때문이다.
  
•  width: auto; 
  • 브라우저가 자동 계산해서 padding, border, margin 값을 부모 요소 너비의 가능한 최대 너비로 설정한다.
•  width: 100%; (!= width: auto) 
  
  • padding, margin 값을 계산하지 않고 부모 요소의 가용 너비 px값을 그대로 가져오기 때문에
    body의 크기를 벗어날 수 있다.

참고: https://ishadeed.com/article/auto-css/?ref=sidebar

 

 

 

✏️ box model

• block-level
  → block-level 요소 안에 있는 컨텐츠는 inline 요소이다.
  → div / ul / li / h1~6 / p 요소 등이 있다.
  
  
• inline-level
  → width, height의 개념이 없고, 길이라는 개념을 사용한다.
  → padding, margin은 좌, 우만 적용 된다.
  → a / span / strong 요소 등이 있다.
  → 인라인 요소에 공백이 있는 이유:
        태그기준으로 분류를 하니 검색엔진은 상관없지만, 인간이 읽기 위해(마크업 개행)
  

 

 

✏️ margin: 0 auto; 와 text-align: center;의 차이점

/* CSS */
h1 {
  width: 200px;
  background-color: #9acd32;
}


/* HTML */
<div>
  <h1>뭐가 움직인거야?</h1>
</div>

• margin: 0 auto;
  → <h1> 요소 블럭 자체가 브라우저의 가운데로 배치된다.

• text-align: center;
  → <h1> 안에 있는 인라인 요소(텍스트, 이미지)가 가운데로 온 것이지, <h1>이 움직인 것이 아니다.

 

 

✏️ 상속(inherit)

• 부모로부터 자식이 프로퍼티 값을 받는다(프로퍼티마다 상속 유무 정해져 있음)
• 상속 != width: initial;
  • 상속: 프로퍼티 값을 그대로 받는 것
  • initial: auto로 설정되어 부모 요소에 영향을 받는 것

 

 

✏️ <img>와 background-image, 언제 뭘 써야할까?

• background-image는 문맥적으로 중요하지 않고,
  단순히 꾸며주는 요소일 때 사용한다.
• 문맥에 필요한 상황이면 <img> 요소를 사용하자.

 

 

✏️ 컨텐츠의 높이를 잡을 땐, height와 padding 중 뭘 쓰면 좋을까?

• padding을 위 아래로 컨텐츠에게 주는 편이 중심을 맞추기 더 쉽다.

 

 

✏️ width의 또다른 속성값

• width 값이 컨텐츠 크기만큼 차지한다.
• width: max-content
• width: min-content

 

 

 

 

📚 Reference

• [MDN 유형(타입)선택자](https://developer.mozilla.org/ko/docs/Web/CSS/Type_selectors)
• [CSS: 선택자(Selector) 이해](https://www.nextree.co.kr/p8468/)
• [CSS가 이상하게 적용될 때 user agent stylesheet](https://piaflu.tistory.com/109)

 

 

 

 

---

 

🫥 오늘을 돌아보며

내가 정말 겉핥기 식으로 CSS를 알고 있었구나... 하는 깨달음을 얻었다.

대충 아는 식으로만 알고 있었다.

아 이니셜 밸류? 응 들어봤지. ← 여기서 끝이었다! 이건 아는게 아니라 문자 그대로 들어본거다...하하

태그와 요소의 차이도 이번 수업을 통해서 확실하게 알았다.

그리고 width: fit-content 라는 아주 좋은 녀석을 알게 되었다.

그동안 애매하게 보더라인을 맞췄던 것이 신경쓰였는데 말이다.

그리고 결정적으로 강사 선생님이 라디오 디제이 같아서 웃겼다.

앗. 잊지말고 하자 과제-!

 

 

< CSS 특강 과제 - 9월 6일 전까지 끝내두기 >

1. 눈에 보이는 그대로 최대한 똑같이 만든다.
2. 유지보수가 중요하다.
   • 여러 상황에 대처 가능하게
   • 하나 고치면 하나만 유연하게 동작이 변하게
   • 폰트 사이즈 키우면 글자나 레이아웃 깨지면 안됨