1. CSS

1) Semantic & Non-semantic

CSS 스타일에서 element 요소 중에서는 자체적으로 의미를 가지는 semantic elements와 아무런 의미를 내포하지 않고 id(#) 또는 class(.)에서 해당 요소의 이름을 부여한다.

• non-semantic elements:
  and
• semantic elements: , , and

  HTML5에서는 웹 페이지를 조각으로 크게 구분하여서 사용 하도록 semantic elements를 제공하기도 한다.

  

  와 span의 차이는??

  div는 한 라인 전체를 다 차지하는 악덕한 놈이다.

  hello
  실제 hello의 글씨 크기는 한 라인의 5%만큼 차지하지만 div로 감싸면 한 라인이 div 박스로 만들어 진다

  반면에 은 글씨 크기 만큼만 박스로 만들어진다. 딱 돈 낸만큼 박스를 빌려쓰는 느낌이다.

  2)content,padding,border,margin

  HTML elements들을 통해서 구조를 짰으니 css에서 스타일링을 통해 색깔을 입혀야 한다. element는 하나하나의 박스(box)라는 것을 생각해야 한다. 그러나 위에 사진 처럼 박스 크기가 만들어져 있지 않다. 박스의 구조는 css통해서 만들어 나간다.

  박스만 잘 만들면 css에서 보여지는 화면의 절반 이상을 성공을 거둔것임으로 박스를 잘 쪼개서 쉽게 쉽게 배치하는 연습이 필요하다.

  백문이 불여일견이다. 연습해보자!!!

  https://www.w3schools.com/css/exercise.asp?filename=exercise_boxmodel1