이동규

개발 잘하고 싶다

[HTML]

텍스트 콘텐츠를 마크업하여 구조화 할 수 있음.

[웹개발 레퍼런스 할만한 곳]

  1. mozilla ( https://developer.mozilla.org/ko/ )

    웹 기술에 대한 자료가 풍부함.

    요소 관련 문서 링크: References > HTML > References > HTML elements

  2. HTML from MDN ( https://developer.mozilla.org/ko/docs/Web/HTML )

    아직 배우지 않은 HTML 양식이 알고 싶은 경우 사용함.

[VSCode 자동포맷 팁]

  1. 명령팔레트(ctrl + shift + p) → “format” 검색 → 문서 서식 단축키(shift + alt + F)
  2. 설정(ctrl +) → “format on save” 검색 → “Editor : Format On Save” 체크

1. 단락 요소

<!-- 단락 나누기 -->
<p>동해물과 백두산이 마르고 닳도록 
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세</p>

<!-- 단락 나누기 -->
<p> 남산 위에 저 소나무, 철갑을 두른 듯
바람서리 불변함은 우리 기상일세.
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세 </p>

2. 타이틀 요소

h1은 한페이지에 하나만 써야만 한다.

h1이 있어야 하위 제목(h2, h3 …)들이 제대로 표시될 수 있기 때문이다.

<h1>나는 h1</h1>
<h2>나는 h2</h2>
<h3>나는 h3</h3>
<h4>나는 h4</h4>
<h5>나는 h5</h5>
<h6>나는 h6</h6>

3. HTML Skeleton / HTML 상용구

VSCode에서 느낌표(!)입력 후, tab을 입력하면 기본적인 HTML 페이지의 Skeleton이 입력된다.

<!DOCTYPE html>

<html>

<head>
    <!-- 여기에 문서정보, 메타데이터를 담는다. -->
</head>
<title>
    <!-- 탭에 제목을 표시한다. -->
</title>

<body>
    <!-- 텍스트 콘텐츠를 담는다. -->
</body>

</html>

4. 목록 요소

ul : 점으로 표시되는 목록

ol : 숫자로 표시되는 목록

<p>
<h2>고양이 분류 계통</h2>
<ul>
	<li>표범아과</li>
	<ul>
		<li>표범속</li>
		<ul>
			<li>눈표범</li>
			<li>호랑이</li>
		</ul>
	</ul>
</ul>
</p>
<ul>
	<li>고양이아과</li>
	<ol>
		<li>황금고양이속</li>
		<ol>
			<li>보르네오황금고양이</li>
			<li>아시아황금고양이</li>
		</ol>
		<li>마블고양이속</li>
		<ul>
			<li>마블고양이</li>
		</ul>
	</ol>
</ul>

[출력결과]

고양이 분류 계통

  • 표범아과

    • 표범속

      • 눈표범
      • 호랑이

  • 고양이아과

    1. 황금고양이속

      1. 보르네오황금고양이
      2. 아시아황금고양이

    3. 마블고양이속

      • 마블고양이

5. 앵커 요소

[5.앵커요소.html]

<!-- URL 링크 -->
<li><a href="https://www.naver.com/">네이버 바로가기</a></li>
    
<!-- 로컬 링크 -->
<li><a href="5.앵커요소(보조).html">나는 누구일까요?</a></li>

[5.앵커요소(보조).html]

<h2><a href="5.앵커요소.html">홈으로가기</a></h2>

6. 이미지 요소

이미지 요소는 닫기 태그가 없다.

이미지의 크기는 바꿀 수 있지만, CSS로 바꾸는게 효과적으로 더 낫다.

alt = ““로 이미지의 설명을 추가할 수 있다.

<!-- 로컬 이미지 링크 -->
<img src="C:\Users\dkgke\Documents\GitHub\Web_Frontend_Research\HTML\6.이미지요소\검은고양이.jpg" alt="로컬에 있는 고양이에오.">
    
<!-- 웹 이미지 링크 -->
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Cat_paw_%28cloudzilla%29.jpg" alt="웹에 있는 고양이에오.">

댓글남기기

참고