-
대부분의 HTML엘레먼트는 오프닝, 클로징 태그를 가진다.
-
h1,,,h6 같은 엘레먼트는 웹사이트 구조에 대해 말해준다. (h1-메인헤딩, h2-서브헤딩)
-
p엘레먼트는 패러그래프 텍스트 쓸 때 좋다.
-
텍스트가 안 정해졌을 때 대체 문구: "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
-
커멘팅: 코드에 대해 남길 말이 있을 때 혹은 지울 필요 없이 무효화 시키고 싶을 때 <!다시다시,다시다시>
-
HTML 5(HTML의 최신 버전)는 main, header, footer, nav, video, article, sectiond 등등의 더 많은 HTML태그를 가진다. main태그는 서치 엔진을 돕고 이 페이지의 메인 컨텐츠를 파악하게 해준다.
-
img엘레먼트는 웹사이트에 이미지를 추가할 때, src어트리븉은 이미지의 URL을 찝을 때 쓴다.
<img src="https://www.your-image-source.com/your-image.jpg">
NOTE: img엘레먼트는 셀프클로징-
img엘레먼트는 반드시 alt어트리븉을 가져야 한다. alt어트리븉은 이미지 로드가 실패했을 때 사용자에게 이해를 돕게 하는 것이다.
NOTE: 이미지가 순전히 꾸미는 용도라면 alt어트리븉은 비워 둔다. -
alt어트리븉은 필요하지 않다면 특수 문자를 포함하지 않는다.
<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">- a엘레먼트는 외부 컨텐츠에 링크를 할 때 사용한다. a엘레먼트는 href어트리븉(웹 주소)과 앵커 텍스트를 필요로 한다. target="_blank"어트리븉은 새 창에서 문서를 여는 것.
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>- a엘레먼트는 페이지 안에서 내부 링크를 만들 때도 사용한다. 링크의 href어트리븉에 #와 id어트리븉 값을 준다. 그리고 같은 id어트리븉을 링크하고 싶은 엘레먼트에 더해준다. An id is an attribute that uniquely describes an element.
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>- 텍스트 사이에 링크를 끼워 넣을 수도 있다.
<p>
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>- 이미지를 링크로 만들 수도 있다.
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>-
데드링크 만들 때는 href어트리븉 값을 #로 설정하면 된다.
-
unordered list or bullet point style list
<ul>
<li>milk</li>
<li>cheese</li>
</ul>- ordered list or numbered list
<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>- input엘레먼트는 사용자로부터 인풋을 얻을 때 사용한다. 플레이스홀더 텍스트는 사용자가 입력값을 넣기 전에 보여지는 것이다.
<input type="text">
<input type="text" placeholder="this is placeholder text">
NOTE: input엘레먼트는 셀프클로징- form엘레먼트는 입력값을 서버에 전송할 때 사용한다.
<form action="/url-where-you-want-to-submit-form-data"></form>- submit버튼은 form에 입력된 값을 action어트리븉에 명시된 URL으로 보내는 버튼이다.
<button type="submit">this button submits the form</button>- required어트리븉은 사용자가 폼을 채우지 않으면 제출할 수 없도록 지정하는 것이다.
<input type="text" required>- radio버튼은 사용자에게 다양한 옵션에서 하나의 답을 선택하게 한다. input 타입의 하나이다. radio버튼 각각은 label엘레먼트 안에 끼워져야 한다. 그렇게 함으로써 radio버튼 입력값은 label엘레먼트와 자동적으로 연관 지어진다. 모든 관계된 radio버튼은 그룹으로 만들 수 있도록 모두 동일한 name어트리븉을 가져야 한다. 때문에 같은 그룹에서 하나의 버튼을 고를 때 다른 값이 선택되지 않도록 된다.
<label for "indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for "outdoor">
<input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>- label엘레먼트에 for어트리븉을 쓰는 것이 가장 좋다. 이때 input엘레먼트의 id어트리븉 값과 동일한 값으로 지정해야 한다. 이는 label과 그 안이 input엘레먼트 사이의 관계를 형성하게 한다.
<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>- value어트리븉은 폼이 제출될 때 선택된 옵션 값이 서버로 전송이 되는데, radio나 checkbox의 입력값은 그들의 value어트리븉 값이다. 만약에 value어트리븉이 빠진다면 제출된 입력값은 on이라는 디폴트값이 된다. value어트리븉은 선택된 옵션을 확인 시켜주는 것이다.
<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>- checked는 checkbox나 radio버튼이 시작값으로 체크되어 있도록 한다.
<input type="radio" name="test-name" checked>-
div엘레먼트는 다른 엘레먼트들을 위한 다목적 컨테이너다. 아마 html엘레먼트 중 가장 많이 쓰이는 것.
-
도큐먼트의 가장 위에는 웹페이지가 어떤 HTML을 쓰고 있는지 밝혀야 한다.
는 HTML버전이고, 는 HTML5버전이다. 그 바로 밑에는 , 페이지의 가장 밑에는 이 와야한다. 나머지 html코드는 html태그 안에 있어야 한다. -
html태그 안에는 head와 body엘레먼트가 있다. head에는 웹페이지에 대한 정보가 들어간다. metadata엘레먼트, 즉 link, meta, title, style 등은 head로 들어간다. 사용자에게 보여질 것, 즉 컨텐츠는 body로 들어간다.
<!DOCTYPE html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page contents -->
</body>
</html>?? 엘레먼트와 어트리븉의 차이:
?? id와 class의 차이:
?? 내부링크를 만들 때 id 말고 class를 사용해도 될까:
