[2023.03.02] 1. HTML 기본

 

🔍HTML은 요소(Elements)로 구성되어있다.

 

 

요소 분석

 

태그(Tag)

• 웹 문서에 정보를 정의해주는 형식
• '<> : 시작태그(여는태그), </> : 종료태그(닫는태그)'로 구성
• <시작>내용</종료>

 

 

요소 안에 다른 요소가 들어갈 수 있다.

<div>
    <p>요소1
    <strong>요소2</strong>
    </p>
</div>

<!--주의할 점-->
<div>
    <p>요소
</div>
    </p>
<!--여는 태그와 닫는 태그는 반드시 올바른 짝을 이뤄야 한다.-->

 

 

 

빈 요소 / 셀프 클로징(Self-closing)

<!-- 닫는 태그가 없는 태그 -->
<br >
<input type="text" >
<img src="image.png" alt="image" >


<!-- XHTML 시절 -->
<br />
<input type="text" />
<img src="image.png" alt="image" />

XHTML 시절에는 Self-closing 문법 / (슬래시)가 강제되었으나, 현재는 / 를 넣어서 닫지 않아도 된다.

 

 

 

주석

<!-- 주석입니다. -->

• 프로그램 동작에 영향을 미치지 않는다.
• 코드에 대한 대략적인 설명을 작성해둔다.
• 기밀사항을 적어두는 것은 피해야 한다. (비밀번호, 하이퍼링크 등)
• 주석은 최소한으로 남기는 것이 좋다.

<!-- 주석 예시 -->
<!-- 1. 시작과 끝을 표시하기 -->

<!-- start -->
<div>
	...
</div>
<!-- end -->


<!-- 2. 협업 -->
<!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">
	...
</nav>
<!-- #2023.03.02 13:00 업데이트 -->

<!-- 3. 임시처리 -->
<!-- 신청기간이 아니여서 임시 주석처리
	<a href="#">신청페이지 바로가기</a>
-->

 

관계도

 

출처 : 위니브(WENIV)