👉 정렬의 중요성
HTML 상에서 줄 바꿈과 연속적인 띄어쓰기는 아무런 의미를 갖지 않는다.
하지만 코드의 정렬이 제대로 되어있지 않으면, 개발자의 입장에서 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워지기 때문에 정렬을 꼭 하자!
주석 처리 사용법
- 주석은 컴퓨터/브라우저가 읽지 않는 줄이다.
- 주석은 필요 없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 또는 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용한다.
- 주석처리하고 싶은 라인(들)을 선택하고 Ctrl(Cmd) + / 단축키를 사용해 주석처리를 해줄 수 있다.
- HTML, CSS, JavaScript, Python 등등 각 언어마다 주석처리 문법이 다르기 때문에 단축키를 사용하는 것이 좋다.
기본적으로 사용하는 태그 설명>
<!DOCTYPE HTML> **선언**
<html lang="en"> **랑선언**
<head> **머리글, 페이지의 속성 정보**
<meta charset="UTF-8"> **유니코드**
<title>KASSY의 HTML 기초</title> **인터넷 창 이름 정하기**
</head> **머리글 닫기**
<body> **페이지 내용**
<h1>h1은 제목</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6으로 갈수록 글씨가 작아진다.</h3>
<!-- 구역을 나누는 태그들 --> **주석표시 화면에는 나타나지 않는다.**
<div> div 태그는 구역을 나눈다.</div>
<p> p는 문단이다. 문단 사이에는 줄바꿈이 일어난다.</p>
<hr>가로줄인 hr 태그는 종료 태그가 따로 없는 empty 태그이다.
<ul> **리스트 작성 시**
<li>계묘년</li><li>갑진년</li> **리스트 내용 <ul>과 거의 함께 사용하는 태그**
</ul> **ul 닫는태그**
span 태그는 <span style="color:red">글자</span>를 꾸밀 때 쓸 수 있다.
<a href="http://naver.com/">네이버 하이퍼링크 </a>
<img src="https://cdn.pixabay.com/photo/2018/01/10/23/53/rabbit-3075088_960_720.png">
**이미지 태그**
<input type="text"> **글쓰는 입력창 만드는 태그**
<button>버튼</button>
<textarea> 글쓰는 칸을 여러 줄을 입력할 수 있다.</textarea>
</body> **내용 닫기 태그**
</html> **마침**
HTML 완성 예시>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KASSY의 HTML 기초</title>
</head>
<body>
<h1>h1은 제목</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6으로 갈수록 글씨가 작아진다.</h3>
<!-- 구역을 나누는 태그들 -->
<div>div 태그는 구역을 나눈다.</div>
<div>
<p>p는 문단이다.</p>
<p>문단 사이에는 줄바꿈이 일어난다.</p>
</div>
<hr>
가로줄인 hr 태그는 종료 태그가 따로 없는 empty 태그이다.
<hr>
<ul>
<li>계묘년</li>
<li>갑진년</li>
</ul>
<hr>
span 태그는 <span style="color:red">글자</span>를 꾸밀 때 쓸 수 있다.
<hr>
<a href="http://naver.com/">네이버 하이퍼링크</a>
<hr>
<img src="https://cdn.pixabay.com/photo/2018/01/10/23/53/rabbit-3075088_960_720.png">
<hr>
<input type="text">
<hr>
<button>버튼</button>
<hr>
<textarea>여러 줄을 입력할 수 있다.</textarea>
</body>
</html>'실습기록' 카테고리의 다른 글
| 7월 5일 project - 데이터베이스 뷰 생성(My SQL) (0) | 2023.07.08 |
|---|---|
| 7월 4일 project - AJAX (0) | 2023.07.05 |
| 7월 3일 project - CSS 레이아웃 (0) | 2023.07.04 |
| JavaScrip 버튼 눌러서 배경색 변경 (0) | 2023.02.18 |
| CSS 연습 (0) | 2023.01.31 |