html & css (1)

1. 목차

1.html

2.브라우저

3. html 구성

4. 많이 사용하는 태그

1.html

Hyper Text Mark_up Language

mark up에 주의하자, 여기서 mark up= <>을 말한다.

포토샵의 한 장의 사진으로 생각하자 그 사진들을 구성하고 있는 부분을 우리가 직접 만드는 것이다.

특별한 에디터가 필요하지는 않지만, 사용자의 편의를 위해서 vscode와 같은 에디터를 사용한다.

 

2. 브라우저

HTML을 해석하여 시각화(렌더링)하는 도구들을 말한다.

크게 URL을 쓰는 주소창(네트워크 영역)과 웹사이트가 보여지는 부분(랜더링 영역)으로 나뉜다.

 

3. HTML의 구성

 

3.1 태그(tag)

태그는 반드시 여는태그(<>)와 닫는 태그(</>)로 구성되어야 하는 것이 원칙이다. 그러나

<input/>, <img/> 등의 예외적인 태그들도 존재한다.

 

 

3.2 태그의 속성(property)

태그는 일반적으로 <태그속성 =“속성값”>의 구조를 가진다. 엘리먼트들은 각자 여러 속성을 가질수 있으며

주로 닫는태그가 없는 태그들이 속성값들이 굉장히 많다.

 

3.3 절대주소와 상대주소

절대주소: 내 파일의 위치를 가장 상위 디렉토리부터 파일이 있는 하위 디렉토리까지의 위치를 나타낸다.

상대주소: 현재 있는 디렉토리부터 원하는 파일이 있는 디렉토리까지의 위치를 나타낸다

./ 자신의 위치에서 연결할 파일

../자신의 위치에서 한칸 위로 올라간 파일

 

3.4 블록과 인라인

모든 엘리먼트는 각각 블록과 인라인 속성을 가진다.

블록은 사용하는 줄의 공간을 모두 차지하고

인라인은 사용하는 공간만큼만 차지한다.

 

4. 많이 사용하는 태그

- <h1~h6> 보통 제목에 많이 사용하며 <h1>가 가장 크고 갈수록 작아진다

- <div> 영역을 구분해주는 태그로 가장 많이 사용된다

 

- <span> <div>와 마찬가지로 영역을 구분해 주지만 인라인(inline)속성을 가진다

 

- <a> 속성을 부여하여 링크를 연결하는 태그

 

- <ul> unordered list의 약자이며, <li> 태그를 사용하기 전에 사용하여 <li> 태그를 묶어주는 역할을 한다

 

- <li> <ul>태그 안에 사용하며 list를 뜻하며 <ul> 영역 안에 리스트를 표현해준다

 

- <select> 말그대로 선택할 수 있는 박스를 표현하며 선택할 내용은 자식 태그로 <option>을 주어 내용을 적어야 한다

 

- <option> 주로 <select>, <optgroup>, <datalist>의 자식 태그로 쓰이며 하나의 항목을 나타낸다

 

- <i> 글꼴을 기울여준다

 

- <button> 단추를 만들어주는 인라인 속성의 태그