## 3월 27일 프론트 엔드 1일차

html,css,js의 역할
html,css,js 목표
display
막대구현

 

 

태그 tag
다음과 같이 생긴것을 태그라고 합니다.
<a>

즉"<"와 ">"로 묶인 일련의 명령어 입니다.

태그에는 세가지 종류가 있습니다.

시작태그 : <a>
종료태그 : </a>
빈태그 : <br />, <hr />, <img />등
태그의 구성
시작태그는 "속성(attribute)"과 "값(value)"을 가질 수 있습니다.

<a href="http://opentutorials.org">

위에서 <a>시작태그는 속성과 값을 가지고 있는데
"href"는 속성이라고 하며 "http://opentutorials.org"를 값이라고 합니다.

엘리먼트 element
다음과 같이 생긴것들을 엘리먼트라고 합니다.

<p>이것은 문단입니다.</p>

<a href="http://opentutorials.org"> 오픈튜토리얼스 </a>

즉 내용을 포함해 시작태그와 종료태그까지를 엘리먼트라고 합니다.

또 이런것도 엘리먼트입니다.

<br />

빈요소(empty element)라고 하여 내용이 없는 경우를 말하며 <hr />, <img />와 같은 것들이 있습니다.

<> ~~ <> -> 태그 2개+ 컨텐츠 1개= 1개의 엘리먼트

태그는 여는태그,닫는태그 1쌍 총 2개로 이루어진다

컨텐츠는 화면에 보여진다
엘리먼트 한것은 화면과 1:1 대응이 되지 않는다(줄 바꿈 등)

css는 태그를 찾아 컨텐츠를 꾸민다
화면에 안보인다

명령어 tab하면 자동완성이 된다.or 컨트롤 + 스페이스

-웹페이지의 3가지 요소-
html요소를 배우, css를 스타일리스트 , 자바스크립트를 감독으로 비유한다

<div></div>
<section></section>
<ariticle></ariticle>
<nav></nav>
필수 외울 태그 4개

기본값을 눈에 익히고 그외의 차이점을 익힌다는 생각.

블럭 ->레고블럭

인라인->글자

자바와 마찬가지로 위에서 아래로 실행된다.
덮어쓰기 된다는 말

```
block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다.
block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.
block 요소의 줄사용 : 한 줄을 무!조!건 혼자 쓴다.(세로모드)
inline-block 요소의 너비 : 너비를 지정하지 않는 한, 최소한으로 줄어든다.
inline-block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.
inline-block 요소의 줄사용 : 가능하면 최대한 한줄을 여럿이서 쓴다.
div, section, nav, article의 기본 display 속성값은 block 이다.
```

외우기보단
많이 상황별로 해보기
예측 -> 실행 -> 확인