부트캠프 두번째날!
HTML 개념 처음 배운 날이다.
앞으로 이 삼대장을 배울 예정! 그 중 HTML의 개념 첫번째 시간이다.
➕ css: 형용사, HTML: 명사, JavaScript: 동사
HTML이란?
hypertext: 웹페이지에서 다른 페이지로 이동할 수 있도록 하는것
markup: 문서나 데이터의 구조를 명기하는 언어
따라서 HTML은 웹페이지를 구성하는 가장 기초적인 언어이다.
HTML 기본 구조
<!DOCTYPE html>으로 반드시 시작
실제적인 HTML문서는 <html></html>사이에 작성
<head></head>: 메타데이터(데이터의 데이터 정보와 문서 정보 정의 코드(제목, 저장 방법, 브라우저 크기 등)
<body></body>: 웹 브라우저에 출력되는 모든 요소
📌Tip: ! 하고 tab하면 자동으로 html구조 만들어준다.
- 주석(comments): 개발자에게 코드 설명을 위해 사용
<!-- -->HTML의 주석은 이렇게 사용하며 단축키로는 ctrl + / 이다.
태그
⭐ 태그의 구조와 용어를 완벽히 숙지하자!! ⭐
1) 태그: <>를 말함!
2) 요소: 시작태그와 종료태그, 그 사이의 내용
- 빈 요소(Empty Element): 내용없이 구조적인 기능 -> br, hr
- 블록 요소(Block Element): 부모 요소의전체 너비를 차지, 줄바꿈, 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함 -> h1, div, p
- 인라인 요소(lnline Element): 텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소, 인라인 요소만 가질 수 있다.
➡️ 아래의 코드를 작성하여 출력한 웹페이지
➡️ 코드를 보면 div태그는 블록 요소, span태그는 인라인 요소라는것 백그라운드컬러로 확인할 수 있다.
⭐블록 요소와 인라인 요소를 완!벽!히! 구분하기⭐
3) 속성: 태그를 보조하는 명령어로 태그 안쪽에서 작동 -> id, class
실습! li, ul, ol 태그 이용해보기
문제 상황
아메리카노와 카페라떼를 묶어서 li 태그를 사용하였더니 위와 같이 아메리카노에만 ul태그가 적용이 되었다.
<ul>
<li>
<h2>아메리카노</h2>
<ol>
<li>R: 3000won</li>
<li>L: 3500won</li>
</ol>
<h2>카페라떼</h2>
<ol>
<li>R: 3200won</li>
<li>L: 3700won</li>
</ol>
</li>
</ul>
해결
아메리카노와 카페라떼 각각 li태그를 사용하니 의도한대로 아메리카노와 카페라떼 모두 li태그가 적용되었다.
<ul>
<li>
<h2>아메리카노</h2>
<ol>
<li>R: 3000won</li>
<li>L: 3500won</li>
</ol>
</li>
<li><h2>카페라떼</h2>
<ol>
<li>R: 3200won</li>
<li>L: 3700won</li>
</ol>
</li>
</ul>
📌 알게 된 점
li태그 자체가 목록의 아이템 하나를 의미하기 때문에 아이템 하나당 li태그를 하나만 사용해야한다!!!
마무리하며...
가장 많이 사용하는 기본 태그들에 대해 공부하였다. 분명히 알고 있다고 생각한 목록 태그들을 가지고 실습을 진행해보니 모르는 부분이 생겼다. 이론으로만 아는 것이 아니라 무조건 직접 실습을 통해 간단한 페이지 하나를 만들어보며 공부해야겠다고 생각하였다.
출처
[새싹 X 코딩온] 영등포 캠퍼스 6기 입문자도 가능한 웹 개발자 부트캠프 강의 교안
