개발자 도구
웹브라우저에는 개발자 도구가 탑재되어 있다.
개발자 도구란?
웹사이트 개발용 도구로, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있다. HTML, CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 통해 개발자에게 편의를 제공한다.
개발자 도구 열기 : 크롬
크롬은 브라우저가 열려있는 상태에서 F12 버튼을 누르거나 우측 상단 설정 → 도구 더보기 → 개발자 도구를 선택해 열 수 있다.
개발자 도구의 활용
네이버 사이트를 연 상태에서 개발자 도구를 열면 네이버 홈페이지의 HTML 코드를 확인할 수 있다.
→우리가 직접 HTML 코드를 작성할 때도 이러한 기능을 제공받을 수 있다.
코드 에디터
프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어
코드는 결국 텍스트이다. 그러나 이 텍스트를 더빠르게, 더 편하게 작성하기 위해서는 코드 에디터를 사용하는 것이 좋다.
→ 텍스트 자동완성 + 하이라이팅 기능이 추가된 메모장이라고 생각하자.
추천 코드 에디터
→ 비주얼 스튜디오 코드
—------------------------------
HTML은 언어이다
한국어, 영어 등으로 사람들과 소통하기 위해 해당 언어의 문법에 맞는 표현을 사용 해야 하듯, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다.
HTML의 문법은 딱 한 가지, 태그(tag)만 기억하면 된다.
태그란?
: HTML 코드에서 정보(콘텐츠)를 정의 하는 형식
HTML 태그 사용 법 : 시작과 끝
태그는 <> 과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다.
각 태그는 콘텐츠를 감싸며, 태그명은 콘텐츠의 성격과 의미를 나타낸다.
태그 사용 형태
<태그명>콘텐츠 기입</태그명>
HTML 태그 사용법 : 단일태그
태그는 <> 과 </> 기호를 사용해 콘텐츠의 시작과 끝을 표시한다.
그러나 경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다.
이를 단일 태그라 하며, 단일 태그의 형식은 다음 예와 같다.
단일태그 사용 형태
단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다.
<태그명/> 또는 <태그명>
HTML 태그 사용법 : 속성
속성은 태그의 부가적인 기능을 정의하는 것으로 선택사항이다.
속성은 시작 태그의 내부에 정의한다. 속성의 개수에는 특별한 제한이 없다.
속성이 추가된 태그의 예:
*태그명과 속성명은 띄어야 두 가지 구분이 된다. 태그명과 속성 정의는 공백으로 구분하고 큰 따옴표를 사용한다.
<태그명 속성명=”속성값”>내용</태그명>
<태그명 속성명=”속성값”/>
HTML 태그 사용법 : 주석
주석은 사람에게는 보이지만, 컴퓨터(웹브라우저_에게는 보이지 않는 코드이다.
주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.
주석 작성 방법은 아래의 예를 참고하면 된다(총 7개의 기호가 사용된다).
HTML 주석의 예)
<!-- 주석–>
→ 형식이 다르긴 하지만, 주석 또한 기호를 통해 시작과 끝을 구분한다.
—--------------------------
<!DOCTYPE html>
문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다.
이때 문서 유형이란 웹 브라우저에게 ‘이 문서는 00니까 잘 처리해줘’라는 메시지를 전달하는 것이다.
HTML은 첫 등장 후 시간이 흐르면서 버전 변경을 해왔는데, 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 “html”이다.
특별한 경우가 아니라면 이전에 사용하던 HTML 번전에 대해서는 몰라도 된다.
<html> ~ </html>
문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.
<html>에서부터 시작되면 </html>에서 html 문서가 끝난다.
이 태그의 내부에 다양한 태그들이 포함되어 문서의 내요을 구성한다.
<head> ~ </head>
웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.
<meta charset=”utf-8”>
→ 문자 인코딩 및 문서 키워드 등에 대한 요약정보를 기입하는 단일 태그이다.
문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋다
<title>~<title>
→ 문서의 제목을 나타낸다. 콘텐츠는 브라우저 탭에 표시된다.
<body> ~ </body>
실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.
여기에는 다음과 같은 유형의 태그들이 포함될 수 있다.
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
→ 기본 문서 구조를 통해 확인했듯, 태그 안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할 수 있습니다.
—----------------------------------------------------------------------------------
문단
<p> 태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그.
하나의 p 태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다.
<p>안녕</p>
<p> 반가워요! </p>
안녕
← p 태그 사이에는 이렇게 공백이 생긴다.
반가워요!
제목
h태그는 제목 요소를 나타내는 태그이다.
<h1>
수평선
hr 태그는 수평선을 표시하는 태그이다. 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용된다.
—------------------------------------------------------------------
HTML 텍스트의 특징
일반적으로 엔터는 ‘줄 바꿈’을 의미하는 입력이지만, HTML 코드에서는 이를 무시한다. 또한 스페이스를 통한 공백도 한 번씩 밖에 인정되지 않는다.
'디자인' 카테고리의 다른 글
| 이집트의 상형문자 2 (0) | 2022.09.21 |
|---|---|
| 메소포타미아의 시각적 증명 (0) | 2022.09.21 |
| 문명 2 (0) | 2022.09.21 |
| 문명 (0) | 2022.09.21 |
| 문자와 그림의 시작 (0) | 2022.09.20 |
댓글