changed 3 years ago  
Linked with GitHub

HTML5, CSS3

html5는 html의 최신 표준 명세이다.
마크업 개발을 시작하기 전, HTML5, css3, sass의 특징이 무엇인지 가볍게 짚고 넘어가고자 한다.

🖍 HTML5

HTML5 요소

  • 구조적 태그

    • <section>, <article>, <nav>, <header>, <footer> and <aside>이 추가

  • 오디오, 비디오

    • <audio>, <video>가 추가
    • 플러그인 없이 멀티미디어 재생

  • form에서의 improvement

    • <output> 추가 : 사용자 액션에 대한 결과를 담는 태그
    • input type의 추가 : color, date, datetime-local, month, email, number, range, search, tel, time, url, week

  • 새로운 시맨틱 element

    • <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>

  • iframe의 improvement

    • sandbox와 srcdoc 속성으로 보안의 레벨과 렌더링하려는 iframe element를 자세히 정할 수 있음.

🖍 CSS3

css3는 css2와 달리 모듈 기반으로 개발이 된다.
text, fonts, color, transforms, transitions, animations 등의 모듈이 개발되고 있다.

Box Model

  • box model

    • content : width와 height가 차지하는 공간
    • padding : contents와 border 사이의 공간
    • border : 테두리
    • margin : 다른 태그와의 거리

  • width와 height의 범위는?

    • padding과 border, margin 모두 Width에 포함되지 않는다. 이 때의 box-sizing은 content-box이다.
    • box-sizing을 border-box로 주면, width와 height는 border까지 포함한 값이 된다.
Select a repo