728x90
📌Achievement Goals
HTML Intro
- HTML이 markup langguage 임을 이해한다. ✅
- HTML이 어떠한 역할을 하는지 이해한다. ✅
- HTML에 어떠한 element가 있는지 대략적으로 이해한다. ✅
- 사이트를 시각적으로 볼 수 있는 눈을 기른다.✅
atrribute에 대한 이해
- 자주 사용하게 되는 atrribute에 대해 이해할 수 있다.✅
📌Chapter Contents
HTML 기초
- HTML(Hypertext Markup Language)의 약자로 웹 브라우저를 보여주기 위한 문서이고 표준화된 markup language를 사용합니다.
- <!DOCTYPE html>은 Document type은 html이라고 정의해 주는 것 입니다.
- <html>내에는 크게 <head>와 <body>로 나뉠 수 있으며
- <head>: 사용자에게 보여지는 UI적인 요소가 없고 Google에서 나오는 부가 설명이나 타이틀 그리고 북마크 추가 할 때 나오는 제목이나 css를 연결할 때 사용합니다.
- <body>: 사용자에게 보여지는 UI적인 면모를 보이고 있습니다.
MDN 사이트
📌 헷갈릴 수 있는 태그
- <button> vs <a>
- <button>: 리뷰, 추천, 로그인, 퀴즈 풀기, 가입 등등 사용자의 특정한 액션을 위해서 버튼을 클릭했을 경우 사용
- <a>: 다른 페이지로 이동하는 경우에 사용
- <img> vs <css: background-image>
- <img>:웹 페이지 안에서 하나의 중요한 요소로 자리를 잡고 있을 경우
- <css: background-image>: 배경 이미지로 사용되는 경우 사용
- <ol> vs <ul> vs <dl>
- <ul>:순서가 없는 목록을 나타낼 때 단순히 목록으로 만 나타낼 때 그럴 때 사용
- <ol>: 순서가 중요할 때 사용
- <dl>: 어떤 한 단어에 대해서 설명이 묶여 있을 때 그 목록을 나타낼 때 사용할 수 있습니다.
- <dt>: 내가 원하는 단어
- <dd>: dt에 해당하는 설명
- <dd>: dt에 해당하는 설명
- <b>: 시각적으로만 볼드체
- <strong>: 정말 중요한 볼드체
- <i> vs <em>
- <em>: 태그는 문장에서 내가 정말 강조하고 싶을 때
- <i>: 책의 제목 시각적으로 나타내고 싶을
- <article> vs <section>
- <article>: 신문 기사 1개를 뜻한다. 즉 article자체만으로도 독립적으로 다른 페이지에 보여줬을 때 전혀 문제가 없는 경우 사용합니다.
- <section>: 서로 연관이 있는 내용들을 묶어주고 싶을 때 선택할 수 있는 것
728x90
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| WebAPIs(브라우저 좌표) (0) | 2021.08.28 |
|---|---|
| CSS(정렬) (0) | 2021.08.28 |
| CSS(Responsive web) (0) | 2021.08.28 |
| CSS(Media query, Animation (0) | 2021.08.28 |
| CSS (0) | 2021.08.28 |