이동규

개발 잘하고 싶다

[HTML5]

HTML5는 HTML을 정의하는 표준의 가장 최신 버젼이다.

여기에는 브라우저에서 실행되는 새로운 요소와 기능들이 포함되는데, 브라우저에서 3D를 출력하는 기능도 있다고 한다.

[Docstype]

HTML Skeleton에서 Docstype은 브라우저에게 이 문서가 HTML5 구문 또는 HTML5 버전 표준을 쓴다는 것을 미리 알려주는 기능을 한다.

1. 인라인과 블록요소

  • 인라인 요소: 다른 요소들과 함께 한 줄, 한 블록을 함께 나누어 차지하게 하는 요소이다.
  • 블록 요소: 한줄, 전체 블록을 차지하는 요소이다.

2. div와 Span

div와 span 모두 제네릭 컨테이너이다.

  • div(division: 분할): 요소를 그룹화하는 ‘블록 요소’이다.
<div>
	<a href="https://www.naver.com/">네이버 바로가기</a>
	<a href="5.앵커요소(보조).html">나는 누구일까요?</a>
</div>

image-20220814121544526

  • span: ‘인라인 요소’이며, 전체 블록을 차지하지 않는다. 주로, span은 무언가를 그룹화해서 다른 스타일을 적용하는 방법이다.
<p><span>고양이는 인류로부터 오랫동안 반려동물로 사랑받아 왔다.</span> <span>하지만</span> <span>실례로 고대 이집트의 벽화에는 고양이를 새 사냥에 이용하는 그림이 있다.</span></p>

image-20220814121556048

3. 기타요소 - HR, BR, Sup, Sub

  • hr: 수평가로줄 페이지에 선을 긋는 요소
<!-- 선을 긋는 요소 -->
<hr>
  • br: 줄바꿈 요소. 문단(p)을 여러개 생성하여 줄바꿈을 할 수도 있지만, 비추.
<!-- 줄바꿈 요소 -->
</p>고양이에 대한 시<br>
밤과 고양이 - 황인숙<br><br>


고양이가 운다<br>
자기 울음에 스스로 반한 듯<br>
부드럽게<br>
고양이가 길게 울어서<br>
고양이처럼 밤은<br>
부드럽고 까실까실한 혀로<br>
고양이를 핥고<br>
그래서 고양이가 또 운다.<br>
</p>
  • sup: 윗첨자 표시 요소
<!-- 윗첨자 요소 -->
<p>피타고라스의 정의<br>
	a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>
  • sub: 아랫첨자 표시 요소
<!-- 아랫첨자요소 -->
<p><sup>1</sup>/<sub>2</sub> + <sup>1</sup>/<sub>2</sub> = 1</p>

4. 엔티티 코드

엔티티코드는 키보드로 타이핑하기 어려운 특수기호, 모양 등을 입력할 수 있는 코드이다.

브라우저에서는 이 코드를 해석하여 모양으로 렌더링한다.

그리고, 부등호(<, >)와 같은 예약어를 사용하고 싶을 때, 사용할 수 있다.

<!-- 엔티티 코드 -->
<p>1 &lsaquo; 6<br>
	10 &rsaquo; 9<br>
	&spades; &clubs; &hearts; &diams;
</p>

[출력결과]

♠ ♣ ♥ ♦

5. 시멘틱 마크업

요소의 컨텐츠가 갖고 있는 목적이나 역할을 드러내는데 사용.

예를 들어, 제네릭 컨테이너 요소(div, span)로 구분할 수 있지만, nav, section, header, footer 등으로 동일한 콘텐츠를 그룹화하는 방식이 페이지의 구성을 이해하기 쉽게 할 수 있다.

  • main: 문서의 메인 콘텐츠를 나타낼 때 사용. 이 때, 메인 컨텐츠의 요소는 배제하고 마크업하는 것이 중요.
<!-- 메인콘텐츠를 마크업하는 요소 -->
<main>
	<div>
	</div>
</main>
  • nav: 내비게이션 링크나 사이드바 기능. 또는, 사이트 이동경로와 현재 위치 표시 기능을 할 때 사용.
<body>
    <!-- 네비게이션, 사이드바 기능하는 요소 -->
    <nav>
        <a href="8.시멘틱요소.html">Home</a>
        <a href="5.앵커요소(보조).html">About</a>
    </nav>
</body>
  • section: 웹사이트나 어플리케이션의 독립적인 부분을 나타낼 뿐 다른 기능은 없지만, 제네릭 컨테이너를 쓰는 것보다 좋음.
<!-- 독립적인 부분을 나타내는 요소 -->
<section>
	<p>
	<h1>고양이</h1>
	</p>
		
		...
		
</section>

  • article: 외부의 기사, 포스팅 등은 표시할 때 사용. 제네릭 켄터이너 대신 사용하기 좋음.

  • aside: 콘텐츠의 보너스 노트, 인용구를 표시하는데 사용.

  • header, footer: 머릿말과 꼬리말.

<!-- 꼬리말 -->
<footer>
	<p>
	<ul>
		<li>
			<a href="https://dkgkejdrb.github.io/">Git 기술블로그</a>
		</li>
		<li>
			<a href="https://github.com/dkgkejdrb">Git 리포지</a>
		</li>
	</ul>
	</p>
</footer>

  • time: 시간이나 날짜를 표시하는 용도로 사용. 기계 판독 가능한 도면에서는 반드시 사용해줘야 한다.

  • figure: 한 웹페이지의 접근성을 확인하거나, 페이지를 구성하는 요소를 리스트업하여 편리하게 보여주는 프로그램이다.

    • 무료 프로그램: NVDA, Windows Narrator
    • 유료 프로그램: Jaws

6. emmet

emmet의 축약된 구문으로 HTML 요소들을 빠르게 생성할 수 있다.

링크: https://docs.emmet.io/abbreviations/syntax

  • 자녀요소:
<!-- 자녀 요소 -->
<!-- main>div>p>ul>li -->
<main>
	<div>
		<p>
		<ul>
			<li></li>
		</ul>
		</p>
	</div>
</main>
  • 형제요소:
<!-- 형제 요소 -->
<!-- h1+h2+h3 -->
<h1></h1>
<h2></h2>
<h3></h3>
  • 곱연산 요소:
<!-- 곱연산 요소 -->
<!-- ul>li*5 -->
<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  • 아이템넘버링 요소:
<!-- 아이템넘버링 요소 -->
<!-- ul>li.itme$*5 -->
<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

댓글남기기

참고