HTML, CSS

Swimme·2021년 1월 10일

TIL 2021. 01. 08
새롭게 알게 된 개념 / 자주 까먹는 개념들 위주로 정리

HTML

HyperText MarkUp
- HyperText: text 외 형태의 자료형을 지원, 하이퍼링크로 연결될 수 있음
- MarkUp: 태그 등을 이용하여 문서나 데이터의 구조를 나타낼 수 있음
(HTML5) Semantic markup
- 작성하는 문서의 의미에 적절하게끔 Element를 정하여 문서의 의미와 Hierarchy를 쉽게 이해하게끔 한다.
CSS는 head에, JS는 body의 맨 마지막에 추가하는 이유
- css가 나중에 load 되면, html이 먼저 작성 된 후 css가 지정되므로 화면이 변하는게 보이게 됨 (bad)
- js는 사용자의 interaction에 밀접한 함수를 담는데, 이는 html이 완전히 로드 된 이후에 수행되야하므로 맨 나중에 추가되는 것이 적절하다.

Cascading Style Sheet
- Cascading: specified priority scheme: 트리구조에서 상위 요소의 스타일 속성을 자손 요소들에게 상속시켜줌
- 마크업 언어에서 문서가 보여지는 방식에 대해 명시한다
- 하나의 Element에 대해 가장 Specific하며 나중에 적용된 규칙이 반영된다

      #myId[name="soo"]{
        background-color: white;
      }

      A B {
          /* ... */
      }
      /* A의 자식, A의 자식의 자식, ... */

      A > B{
          /* ... */
      }
      /* A의 자식 */

Pseudo-Class Selector
: element의 특정 상태에 따라 적용되는 style (상태: hover, disabled, active 등)

브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델을 따라 각 요소를 사각형 박스로 표현함
하나의 박스는 4가지 부분으로 구성
- Content : 실제 내용물 포함영역 (크기: width, height속성 )
- Padding : 안쪽 여백
- Border : 테두리
- Margin : 바깥 여백

    #myFlexBox {
      display: flex;
      flex-direction: column; /* 세로 (열) */
      align-items: center;
      /* 가로(행)에 대한 중앙 */
    }

    #myFlexBox {
      display: flex;
      flex-direction: column; /* 세로 (열) */
      justify-content: center;
      /* 세로(열)에 대한 중앙 */
    }

Life is Egg..🥚🐣🌟