HTML & CSS 특강

---

🔔 HTML

1) 웹 페이지를 만들 때 가장 먼저 해야 하는 일

• contents에 집중하지 말고 웹페이지가 몇 개의 덩어리로 이루어져 있는지 확인 / layout 짜기
• 크게 보고 작게 들어가라!

2) 태그와 요소는 다르다

<div class="cat">고양이</div>

• <div> : opening tag - 태그
• </div> : closing tag - 태그
• <div class="cat">고양이</div> : element - 요소
• 고양이 : contents - 콘텐츠
• class="cat" : attribute - 클래스 이름은 숫자로 시작 X, 의미없는 값 X
• <div class="animal cat">고양이</div> - animal 이면서 cat인 것.

---

🔔 CSS

1) Selector

• Type Selector

  div {
      background-color: black;
  }

  div : selector (선택자)
background-color : property (속성)
black : value (값)
  
  

• Universal Selector

  * {
      background-color: black;
  }

  * : 모든 태그들 선택
  
  

• Class Selector

  .animal {
      background-color: black;
  }

  .animal : animal 클래스 선택
  
  

2) Property

• width

  • 내가 지정하지 않으면 width는 default로 width: auto;가 적용되어 있다. (inital value)
    width: auto; : 직계 부모 요소로부터 주어진 가용 가능한 너비를 최대로 채운다
    https://ishadeed.com/article/auto-css/?ref=sidebar
    
    
  • 내가 지정하지 않았지만 브라우저가 제공하는 기본 스타일 (user agent stylesheet)에 따라 body요소에 margin이 8px 들어가 있다.
    

• margin

  • margin의 initial value는 0이다.

  • margin-left: auto; : 사용가능한 공간의 크기를 왼쪽 여백에 마진 값으로 적용하여 오른쪽 정렬이 된다.

  • margin-right: auto; : 사용가능한 공간의 크기를 오른쪽 여백에 마진 값으로 적용하여 왼쪽 정렬이 된다.

  • margin: 0 auto; : 상,하 0 / 좌,우 auto 적용되어 가운데정렬이 된다.

  • margin auto auto; : 상,하 0으로 계산된다. (상,하가 내 구역이 아니기 때문에) / 좌,우 auto 적용되어 가운데정렬이 된다.
    
    

• text

  • text-align: left; : 인라인 요소 왼쪽 정렬

  • text-align: right; : 인라인 요소 오른쪽 정렬

  • text-align: center; : 인라인 요소 가운데 정렬
    
    

• display

  • display: inline-block; : 인라인 요소를 블록 요소처럼 사용 / base line 기준(텍스트 기준으로 base line 배치)으로 block을 배치
    

  
  

3) Block-level elements

• 한줄을 다 차지한다 생각 / 부모가 제공해주는 content 영역 만큼 차지. / 전체 땅을 빌렸다 생각하기.
  ex) <h1> ~ <h6> <div> <p> <header> <main> <footer> <section> <article> <aside> <ul> <li> 등.
  
  

4) Inline elements

• width, height 존재 X
• margin 했을 때 좌, 우 O & 상, 하 X / 전깃줄에 올라가있는 새 상상
• 공간 차지 X
  ex) <a> <span> <br> <img> 등.
  
  
  

5) Specificity

• selector를 봐야 한다. / 얼마나 구체적인 selector 기법을 사용했는지?
• 브라우저 입장에서 가장 가치 있는 정보가 무엇일까?
• 메달로 생각해보자. / (금, 은, 동)
• (0, 1, 0)이 (0, 0, 2)보다 우선순위
• 동점이면 나중에 코딩 된 것이 우선순위
• 최종 결과물이 나오기 위해서 여러 개가 모여 완성된다. (cascading)
  > cascading style sheets
  https://specifishity.com/

---

🔔 마무리

• Can I use & MDN 등 검색하는 습관을 기르자.
• 먹방을 보는 것과 식사하는 것을 구분하자.
• 해봐야 자기 것이 된다.

복잡한 페이지 만들어 보는 것 중요하다.
하지만! 지금은 간단한 페이지를 퀄리티 높게 만드는 것이, 복잡한 페이지를 어설프게 만드는 것보다 더 중요하다!