드림 코딩 엘리 : 컴팩트한 HTML 태그 완성

현업 개발자 엘리의 팁

• 뭐든지 나누어 보자. 프론트/백엔드 모두 박스화 생각하면서 만들자, 클레스, 함수를 만들 때도 세분화와 박스화를 할 수 있을지 생각하자.
• 큰 그림을 먼저 보자.

 

박스 태그/ 아이템 태그 -- 태그는 둘 중 하나

box - 섹션이 나눠지는 태그들

<div> - 아무곳에서나 쓰일 수 있는 태그

<article> - 반복된 재사용 가능한 형식이 묶여져 있는 태그

<p> -문단을 정의하는 태그

 

구성할 때 섹션 태그를 이용해서 나누어준다 -- div로 무작위로 나누지 않는다.

 

 

block - 한줄에 하나.

<div> - bolck 태그이다.

inline - 공간이 허용하면 바로 옆에 배치 가능.

<span> - inline 태그이다.

 

 

부르는 이름 정리

element=node라고도 불린다. 태그 한쌍+ 내용이 element가 된다.

 

attribute - css에서 쓰인다. 태그 안에 있다.

type

 

 

order list <ol>

• ol>li*3 그리고 tab : <ol>리스트 안에 <li>가 3개가 있다.
• 태그를 배울 때 태그 안에 어떤 속성 값이 있는지 MDN사이트 찾아보기.

 

input 과 type

<input> - 사용자에게 받는 것. 흔하게 사용된다. inline

<input type> - 다양하다. MDN 참고

<input id="@"> - 이름을 설정한다.

 

<lable> - input 과 함께 사용된다. inline

<lable for="@"> -그룹핑 할 수 있다.

 

ctrl + shift +I : 개발자모드 단축키

박스모델이 어떻게 구현되어 있는지 알 수 있다.

웹사이트가 어떤 식으로 나누어져 있는지 알 수 있다. 심심할 때 보자.

 

 

모든 이미지의 출처는 드림코딩 엘리 유튜브입니다