⚠️ Q. To make a heading on HTML I should write <h1> Title <h1> - False
#2.0 Our First HTML File
파일명과 폴더명은 항상 소문자로 작성한다.
#2.1 Setup and Errors
HTML 규칙들을 따르지 않더라도 브라우저는 항상 결과를 보여주고 에러는 알려주지 않는다.
HTML에 어떤 태그라도 쓸 수 있지만 브라우저에 어떠한 영향도 미치지 않는다. <food></food>
#2.4 Tag Attributes
attribute의 목적 : HTML 태그에 더 많은 정보를 전달하기 위해서
몇몇 속성은 모든 태그에 이용된다. 모든 속성이 모든 태그에 쓰이진 않는다.
어떤 attribute라도 쓸 수 있지만 브라우저에 어떠한 영향도 미치지 않는다.
<tag attribute="value">
<a></a>
anchor : 닻
- href="http://google.com"
HTTP or hyperlink reference : link 설정
only in <a> - target="_self" (default)
<img />
*self-closing tag : A tag that has no content, all information is provided via attributes.
- src=""
image address source
only in <img />
path notation 경로 표기법
<a href="http://google.com" target="_blank"></a>
<img src="https://heropy.blog/css/images/vendor_icons/html5.png" />
#2.5 More Tags and Head
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<!DOCTYPE html> : It tells the browser that this document contains html code.
<head> : 페이지에 관한 환경 설정 tags to configure our document
<body> : 사용자가 볼 수 있는 the content of our document
Everything(All the tags that you put) on the head is invisible.★
Everything else(visible) should be inside the body.
#2.6 Its All About the Head
HEAD 태그는 보이지 않는 사이트 설정들을 바꿔준다!!!
<meta /> self-closing tag.
meta basically means extra data. 사이트의 부가적인 정보
ㄴname="description" & content="Watch Netflix movies.."
ㄴcharset="UTF-8"★ : 브라우저에게 text를 어떻게 그려달라는지 말해줌 tell the browser how to render the text
ㄴproperty="og:image" & content="주소.jpg" : 해당 링크가 공유될 때 보이는 썸네일 이미지
<html lang="kr">
<html lang="en">검색 엔진들(구글, 네이버, bing..)에게 사용되는 언어를 알려주기 위해서
<link rel="shorcut icon" sizes="16x16 32x32 64x64" href="주소.ico">탭 좌측 아이콘 이미지
#2.7 More Tags
구글에 html css js 검색할 때 mdn 붙이는 것 추천
(Mozila developer Network : firefox 브라우저를 만드는 회사가 제공하는 web에 관한 정보들을 정리
w3schools 절대 비추천. why? 상업적 이익.인증서 판매. 출처 또한 mdn)
<p> paragraph : long text
<pre> pre-formatted text
<abbr> show abbreviation title
<cite> 기울임체
<code> 타자기
<mark> 노랑형광펜
<strong> bold
<sup> 반칸 위에 표시(제곱)
<sub> 반칸 아래 표시
<p>
You can use
<abbr title="Cascading Style Sheet">CSS</abbr>
</p>
<cite>Hello!</cite>
<code>Hello!</code>
<p>
I like to live
<mark> in
<strong>South Korea</strong>
</mark>
</p>
2 <sup>5</sup>
2 <sub>logn</sub>
<audio controls autoplay src=""></audio>
#2.8 Form Tags
<form>
every website has <input />. (self-closing tag)
- 속성값이 많을 때 ➜ attrname="attrvalue"
- 속성값이 true/false만 있을 때 ➜ required
required라는 attribute만을 추가해서 form을 validation 검증할 수 있다.
<input type="file" accept="image/*, .pdf, .hwp" />
#2.9 More Tags and IDs
<label> works together with <input>.
label 태그의 for 속성값과 input 태그의 id 속성값이 일치하면,
화면에서 label을 클릭했을 때 input을 클릭한 것과 같은 결과.
type : text, password, file, color, url, email, range, date, week, year, hour, ..
id is a attribute that you can add to anything inside of the body.
In the reason why id is so important.
In the reason why you can add to anything inside of the body is because id is unique identifier.
The rule for id is that there can only be one id per element. id needs to be unique.
#2.10 Semantic HTML
non-semantic tag : the tags that don't really mean anything but we use
<div> division : 분할, 구분, 경계선 → function○ meaningX
<span> for short text
<p> for paragraph
semantic tag : we can abstract just by looking at our document. *권장
<header> <navigation> <main> <footer> → 그 자체로 의미를 가짐. 모두 div로 변경 가능. but 이해↓
(웹사이트가, 다른 팀원이) 되도록 이해하기 쉬운 html 문서를 만들자!
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#content_sectioning
HTML elements reference - HTML: HyperText Markup Language | MDN
This page lists all the HTML elements, which are created using tags.
developer.mozilla.org
#2.11 Recap
Always use double quotes("").
attribute에는 항상 큰 따옴표를 사용해야 한다.
어떤 attribute는 모든 태그가 사용할 수 있고 (ex. id)
일부 attribute는 특정 태그만 사용 가능하다. (ex. <image src="">, <input type="" />)
'Front-end > 코코아톡 클론 코딩' 카테고리의 다른 글
| #5 Git and Github (0) | 2024.04.22 |
|---|---|
| #6 Cloning Time (0) | 2021.03.10 |
| #0 INTRODUCTION (0) | 2021.03.02 |
| #4 CSS ⅱ (0) | 2020.11.18 |
| #3 CSSⅰ (1) | 2020.08.26 |