1. 주석이란?
코드의 이해를 돕기 위해 만들어진 기능이 없는 추가 설명글
코딩할 때에는 '주석'을 다는 경우가 생깁니다.
일상에서 주석이라 하면 풀이나 뜻 같은 추가 설명을 옆에 달아주는 것을 말하지요?
그거와 똑같습니다!
이해를 돕기위해 쓰는 추가 설명글이지요!
보통 이 코드는 왜 썼는지, 무슨 기능인지 쓰기도 하고
수업을 들을 때에는 필기를 쓰기도 합니다.
주석도 프로그래밍 언어의 요소 중 하나기에 각 언어마다 주석을 쓰는 방법이 다릅니다.
예를 들어 Java 에서는 // 를, python에서는 # 을 한 줄 주석의 표시로 쓰지요.
주석 처리한 내용은 실행할 때 실행해주는 프로그램이 그 부분은 무시하고 실행합니다.
안타깝게도 html 주석은 좀.. 복잡합니다..
<!-- 내가 쓴 내용 --> 이런 식으로 내가 쓴 내용을 <!-- --> 사이에 넣습니다.
근데 이거 치기도 귀찮고, 외우기도 싫잖아요?
그래서 그냥 단축키를 외웁니다!
ctrl + /
한 줄만 주석으로 하는 경우에는 드래그 없이 그 위치에 마우스 커서만 두고 단축키를 누르고,
여러 줄을 주석으로 하고 싶으면 드래그 한 다음 ctrl + / 를 누르면 드래그 한 영역이 주석처리가 됩니다.
2. 시맨틱 태그
코드 가독성을 높이기 위해서 만들어진 기능이 없는 태그
아래 코드에 있는 태그를 이번에 배워볼 태그입니다! 일단 한 번 실행해보세요!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>안녕하세요?</div>
<header>안녕하세요?</header>
<section>안녕하세요?</section>
<article>안녕하세여?</article>
<aside>안녕하세요?</aside>
<footer>안녕하세요?</footer>
</body>
</html>
차이가 있나요?
아마 아무런 차이가 없을 겁니다!
다 똑같은 결과가 나타나지요.
그럼 왜 쓰는 걸까요?
바로 코드를 읽기 쉽게 하기 위한 것입니다.
아래 글 두 개를 읽어보세요!
<글 1>
주석이란 코드의 이해를 돕기위해 만들어진 기능이 없는 추가 설명글입니다.코딩할 때에는 '주석'을 다는 경우가 생깁니다.일상에서 주석이라 하면 풀이나 뜻 같은 추가 설명을 옆에 달아주는 것을 말하지요?그거와 똑같습니다!이해를 돕기위해 쓰는 추가 설명글이지요!보통 이 코드는 왜 썼는지, 무슨 기능인지 쓰기도 하고수업을 들을 때에는 필기를 쓰기도 합니다.주석도 프로그래밍 언어의 요소 중 하나기에 각 언어마다 주석을 쓰는 방법이 다릅니다.예를 들어 자바에서는 // 를, 파이썬에서는 # 을 한 줄 주석의 표시로 쓰지요.주석 처리한 내용은 실행할 때 실행해주는 프로그램이 그 부분은 무시하고 실행합니다.안타깝게도 html 주석은 복잡합니다.<!-- 내가 쓴 내용 --> 이런 식으로 내가 쓴 내용을 <!-- --> 사이에 넣습니다.근데 이거 치기도 귀찮고, 외우기도 싫잖아요?그래서 그냥 단축키를 외웁니다!ctrl + /한 줄만 주석으로 하는 경우에는 드래그 없이 그 위치에 마우스 커서만 두고 단축키를 누르고,여러 줄을 주석으로 하고 싶으면 드래그 한 다음 ctrl + / 를 누르면 드래그 한 영역이 주석처리가 됩니다.
<글 2>
## 주석의 정의
코드의 이해를 돕기위해 만들어진 기능이 없는 추가 설명글입니다.
## 주석을 사용하는 이유
코딩할 때에는 '주석'을 다는 경우가 생깁니다.일상에서 주석이라 하면 풀이나 뜻 같은 추가 설명을 옆에 달아주는 것을 말하지요?그거와 똑같습니다!이해를 돕기위해 쓰는 추가 설명글이지요!
## 주석의 주요 내용
보통 이 코드는 왜 썼는지, 무슨 기능인지 쓰기도 하고수업을 들을 때에는 필기를 쓰기도 합니다.
## 주석의 모양
주석도 프로그래밍 언어의 요소 중 하나기에 각 언어마다 주석을 쓰는 방법이 다릅니다.예를 들어 자바에서는 // 를, 파이썬에서는 # 을 한 줄 주석의 표시로 쓰지요.주석 처리한 내용은 실행할 때 실행해주는 프로그램이 그 부분은 무시하고 실행합니다.
## html에서의 주석
안타깝게도 html 주석은 복잡합니다.<!-- 내가 쓴 내용 --> 이런 식으로 내가 쓴 내용을 <!-- --> 사이에 넣습니다.근데 이거 치기도 귀찮고, 외우기도 싫잖아요?
그래서 그냥 단축키를 외웁니다!ctrl + /한 줄만 주석으로 하는 경우에는 드래그 없이 그 위치에 마우스 커서만 두고 단축키를 누르고,여러 줄을 주석으로 하고 싶으면 드래그 한 다음 ctrl + / 를 누르면 드래그 한 영역이 주석처리가 됩니다.
어떤 글이 더 읽기 쉬운가요? 아래 글이 더 읽기 쉽지 않나요?
글 2의 ##부분과 같이 '앞으로 나오는 내용은 어떤 부분을 위한 코드입니다.'를 알려주기 위한
정말 기능은 없고 가독성을 위한 태그입니다!
그럼 바로 하나씩 살펴봅시다!
1. header
header는 느낌 그대로 제목 부분임을 알려주기 위한 태그입니다.
사이트 전체의 제목일 수도 있고, article 의 제목이 될 수도 있습니다.
header 안에 form 태그나 nav 태그를 넣어 메뉴를 만들 수도 있고, hn 태그를 넣어 제목을 표시할 수도 있습니다.
article : 블로그 포스팅이나 댓글 등 콘텐츠가 들어감
nav : 같은 사이트나 다른 사이트의 문서로 연결하는 링크, 메뉴탭으로 사용
form : data 받기, 검색, 수정 등 data를 처리할 때 사용
article과 nav는 잠시 후에 살펴 볼 것이고, form은 다음 시간에 자세히 알아보겠습니다.
2. section
section은 콘텐츠가 들어갈, 중간 부분임을 알려주기 위한 태그입니다.
header와 footer가 아닌 부분을 구분짓는 용도입니다.
section 안에는 또 다른 section이 들어갈 수도 있고, article이 들어갈 수도 있습니다.
3. article
article은 실제 콘텐츠가 들어가는 부분입니다.
블로그 포스팅, 게시글, 댓글 등 실제 콘텐츠를 이 태그에 넣습니다.
4. aside
aside는 본문 외에 주변에 표시되는 기타 내용을 나타냅니다.
왼쪽이나 오른쪽에 뜨는 기타 정보나 하단의 광고 등의 내용이 나옵니다.
필요할 경우에만 사용합니다.
5. footer
footer은 사이트 제일 하단을 의미합니다.
사이트 제일 하단을 내리면 작은 글씨로 나오는
회사소개 | 인재 채용 | 제휴 제안 | 이용약관 | 개인정보처리 방침 | 고객센터 | 제작자 정보
등의 내용을 넣는 곳입니다.
- address 태그
웹 페이지 제작자의 이메일, 연락처와 같은 제작자 정보를 적을 때 표시하는 시맨틱 태그입니다.
시맨틱 태그이기에 주소가 나온다는 표시일 뿐 특별한 기능은 없습니다.
<예제 1>
아래 실제 화면을 보면서 각 부분이 무슨 태그인지 한 번 생각해보세요!
빨강 : 사이트의 header
1. 검색창 : form
2. 웹툰 종류 탭 : nav
파랑 : 사이트의 section
- 오른쪽 : 메인 section
- 왼쪽 : aside
초록 : section 안에 또 다른 section
- 장르별 추천 웹툰 : section의 제목 > header
- 웹툰 장르 탭 : nav
- 웹툰 '지구 멸망 버튼' : article
시맨틱 태그 중 일부를 표시해 둔 것입니다!
<예제 2>
아래 화면을 만들어보세요.
힌트! 저번 포스팅의 내용도 쓰셔야 합니다.
< 정답 예시>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<h1>제목 : 시맨틱 태그를 배워봅시다.</h1>
</header>
<!-- section을 하나만 해도 괜찮습니다. -->
<section>
<section>
<h3>1. 시맨틱 태그란?</h3>
<p>시맨틱 태그는 "나만의 정의를 정리해주세요!"태그입니다.<br>"사용목적을 정리해주세요!" 사용합니다.</p>
<a href="https://search.naver.com/search.naver?sm=top_hty&fbm=0&ie=utf8&query=%EC%8B%9C%EB%A7%A8%ED%8B%B1+%ED%83%9C%EA%B7%B8">시맨틱 태그 네이버 검색창</a>
</section>
<section>
<h3>2. 시맨틱 태그의 구조</h3>
<img src="https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile24.uf.tistory.com%2Fimage%2F2259F94D5651731A0FAB3C" alt="시멘틱태그의 구조">
</section>
</section>
<footer>
<h6>문의 장소</h6>
<h6>이메일@gmail.com / 010-0000-0000</h6>
</footer>
</body>
</html>'TIL ( Today I Learn ! ) > HTML' 카테고리의 다른 글
| HTML 코딩하기! ③ 텍스트와 하이퍼링크 (0) | 2019.12.30 |
|---|---|
| HTML 코딩하기! ① 처음 만드는 HTML 문서 (0) | 2019.12.19 |
| HTML을 시작해보자! (0) | 2019.12.18 |
| HTML이란? (0) | 2019.12.12 |
