세리프 따라잡기
HTML 기초 문법 정리 [up] 본문
html 기초
웹(web)이란?
웹(web) 과 인터넷(internet)은 같은 선상의 개념일까? 아니다. 인터넷은 웹을 포괄하는 큰 원이다. 웹이 인터넷 위에서 동작한다는 것이다.
1960년도 인터넷 발명(도입), 컴퓨터와 컴퓨터를 연결하는 가장 거대한 네트워크로 성장하게 됌
1990년도 웹 발명, 팀 버너스리경: WS(Web server) & WB(Web Browser) 이 두 개가 통신할 때 사용할 프로토콜 http라는 통신 규약 정의, 어떤 정보를 표현할 수 있는 프로그래밍 언어(HTML)를 발명. - public domain: 저작권 행사X
| server | client |
|---|---|
| 을 | 갑(고객) |
| WS(iis, apache..) | WB, WC |
| 운영체제 | 운영체제 |
| HW(하드웨어) | HW |
: 클라이언트가 요청하면, 서버가 응답해주는 관계
웹페이지를 풍부하게 만들어주고, 텍스트 파일보다 더 많은 정보를 담을 수 있는 데이터 형식: HTML
HTML이란?
Html 정의
웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어.
HT: HyperText, 문서와 문서가 링크로 연결 (링크와 같은 개념)
M: Markup, 태그로 이루어져 있다. (어떤 정보를 태그 형식을 통해 정의)
L: Language, (사람과 컴퓨터·시스템이 의사소통하기 위한 수단의 언어, 약속)Tag(태그)란?
태그란 정보를 정의하는 형식.
태그의 형식
<태그명 속성명1="속성값1" 속성명2="속성값2"> 컨텐츠 </태그명>
· 태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의
· 열리는 태그가 있으면 닫히는 태그가 있어야 함. [닫히는 태그가 필요 없는 태그도 있는데, 이때는 <태그명 />의 형식을 갖음. ex: <br /> 등]
예제: <a href="https://malgun-gothic.tistory.com/">맑은고딕</a>
= 여기서 '맑은고딕은 컨텐츠', '나머지는 태그(앞 줄은 열리는 태그, 뒤 /는 닫히는 태그)'이다.
· href="https://malgun-gothic.tistory.com/"는 속성명과 속성값 부분인데, 태그의 부가적인 정보가 들어온다.
a: 링크 문법
href: 어떤 링크를 특정한 url로 연결하고 싶으면 사용하는 속성명예제 실행화면: 맑은고딕
문서의 구조
- HTML 문서는 파일의 확장자가 html 혹은 htm으로 끝남.
- 최상위 태그로
<html>을 사용, 그 하위에<head>태그와<body>태그를 컨텐츠로 갖음. <head>태그는 문서를 설명하는 태그로 제목이나 키워드와 같은 정보를 담음<body>태그에는 문서의 내용이 위치
※ 메타 데이터(meta data)란 데이터를 설명하는 데이터를 의미: 태그가 대표적인 메타 데이터임. [추상적 개념]<html> <head> 문서를 정의하는 데이터가 위치 </head> <body> 문서에 표시되는 컨텐츠가 위치 </body> </html>
예제 - 텍스트 파일에 아래를 작성 후, 확장명은 .html로 쓰며 저장은 모든 파일 형식으로 저장한다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<img alt="맑은고딕 프로필" src="https://blog.kakaocdn.net/dn/LWJ73/btqMTgpR6Qg/sx0TG6a9kvIKeht5CVClf1/img.jpg" />
<br />
<a href="https://malgun-gothic.tistory.com/">맑은고딕</a>
</body>
</html>예제 실행화면:
실습과 개발도구
본인은 visual studio code를 사용
DTD(Doctype)
- 문서의 형식을 브라우저에게 알려주기 위해 사용되는 코드(문서가 어떠한 표준을 따르고 있는가, 어떤 스펙에 의거해서 작성된 HTML 코드인가 를 지정하는 것.)
- HTML 5에 해당되는
<!DOCTYPE html>을 사용하면 된다.
※ www.w3.org : HTML 언어의 규칙을 지정하는 국제 기구
BODY 태그
html의 바로 밑에는 딱 2가지의 태그가 들어올 수 있는데, 그 중 body 태그가 그러하다. 비유하자면 html은 부모이며 head 태그와는 형제 관계에 있음. 이 태그엔 쉽게 말해 본문의 내용이 들어간다.
Link(링크)
문서에서 다른 문서로 이동할 수 있는 수단
문법: <a href="URL" title="설명" target="문서가 로드될 대상">링크이름</a>
- href: 링크이름과 연결되어 있는 리소스의 주소
- title: 연결되어 있는 리소스에 대한 설명
- target: 문서가 어디서 열릴 것인지를 정하는 것
- _blank: 현재 창(탭) 말고 새로운 창에서 문서를 로드
- _self: 현재 창에서 로드된다. 기본값과 같다고 생각하면 됨
- #reference: URL뒤에 붙이면 참조 부분으로 창이 열리며 이동, 북마크와 비슷한 개념
예제
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<a href="https://malgun-gothic.tistory.com/">맑은고딕</a> : 맑은고딕 블로그로 이동<br />
<a href="https://malgun-gothic.tistory.com/" target="_blank">맑은고딕</a> : 새 창에서 맑은고딕 블로그 로드<br />
<a href="https://malgun-gothic.tistory.com/" target="_self">맑은고딕</a> : 현재 창에서 맑은고딕 블로그 로드<br />
<a href="https://malgun-gothic.tistory.com/" title="맑은고딕 블로그">맑은고딕</a> : 링크에 부가 설명 추가<br />
</body>
</html>예제 실행화면:
문단(paragraph)
글에서 하나로 묶을 수 있는 짧은 단위를 의미, HTML에서는 <p> 태그를 이용
문법: <p>문단</p>
예제
<p>차두리가 불에 타면 두리번 두리번.</p><p>아이언맨이 왼쪽으로 움직이면 스타크 래프트.</p><p>밤에 성시경이 두 명 있으면 야간 투 시경.</p>예제 실행화면:
줄바꿈(line break)
HTML에서는 엔터를 줄바꿈으로 인식하지 않는다. 따라서 <br /> 코드를 이용해야 한다.
문법: 문장<br />
예제
세상에서 가장 지루한 중학교는 로딩중<br/>반성문을 영어로 하면 글로벌<br/><br/><br/>전화로 세운 건물은 콜로세움예제 실행화면:
띄어쓰기
HTML에서 스페이스 바를 이용한 띄어쓰기는 단 한 번만 인정한다. 그 뒤는  를 이용해야 한다.
문법:  
예제
<p>
띄어쓰기 3번 해볼게: 1 2 3
</p>
<p>
위가 안 된다면 이 방법을 쓰자: 1 2 3
</p>예제 실행화면:
이미지
이미지 표현은 <img> 태그를 사용
문법: <img scr="이미지가 위치하는 URL" alt="대체 텍스트" width="폭" height="높이" longdesc="링크"/>
- src: source의 약자로 이미지가 위치하는 URL을 기술
- alt: alternative의 약자로 대체 텍스트. 이미지가 로딩되기 전이나 로딩할 수 없는 경우 이 위치에 텍스트가 표시된다. 시각장애인을 위한 장치와 검색엔진에서도 사용되며, 저사양·저속도 사용자가 이미지가 유실되는 상황에 대비할 수 있으니 사용하는 게 좋다.
- width, height: 이미지의 크기(둘 중 하나만 줄여도 자동으로 맞춰진다)
- longdesc: 이미지와 관련된 링크(부가 설명)
예제
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
이미지 로딩: <br /><img src="https://blog.kakaocdn.net/dn/LWJ73/btqMTgpR6Qg/sx0TG6a9kvIKeht5CVClf1/img.jpg"/><br /><br />
대체 텍스트 사용:<br /><img src="https://blog.kakaocdn.net/dn/ci3v9m/btqMYbaxsfY/dfwI9I9AKxkooxxe7K5KIk/img.jpg" alt="맑은고딕 프로필ver.2"/><br /><br />
대체 텍스트 사용, 존재하지 않는 이미지 로딩: <br /><img src="https://blog.kakaocdn.net/dn/ci3v9m/btqMYbaxsfY/empty/img.jpg" alt="맑은고딕 프로필ver.2"/><br /><br />
이미지의 크기 지정: <br /><img src="https://blog.kakaocdn.net/dn/ci3v9m/btqMYbaxsfY/dfwI9I9AKxkooxxe7K5KIk/img.jpg" width="300"/><br /><br />
이미지와 링크 동시: <br /><a href="https://malgun-gothic.tistory.com/"><img src="https://blog.kakaocdn.net/dn/LWJ73/btqMTgpR6Qg/sx0TG6a9kvIKeht5CVClf1/img.jpg"/></a>
</body>
</html>예제 실행화면:
목록(list)
- 연관되어 있는 항목들을 나열할 때 사용
- 순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용
- CSS와 함께 사용해서 메뉴로도 사용됨 (순서를 꾸밀 수 있음)
문법:
↓ 순서가 없는 리스트
<ul>
<li>항목</li>
</ul>
-------------------
↓ 순서가 있는 리스트
<ol>
<li>항목</li>
</ol>순서X 예제1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<ul>
<li>table</li>
<li>ol</li>
<li>body</li>
<li>img</li>
</ul>
</body>
</html>예제1 실행 화면:
순서O 예제2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>os</li>
<li>php</li>
<li>database</li>
</ol>
</body>
</html>예제2 실행 화면:
순서OX 혼용 예제3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<ol>
<li>html
<ol>
<li>수업</li>
<li>사전</li>
<li>공부</li>
</ol>
</li>
<li>css</li>
<li>javascript</li>
<li>os</li>
<li>php</li>
<li>database</li>
</ol>
</body>
</html>예제3 실행 화면:
아이프레임(iframe)
하나의 웹 페이지 안에 다른 웹 페이지를 삽입하는 기법
문법: <iframe src="불러올 웹페이지의 URL" scrolling="스크롤링 허용여부(yes,no,auto)">
- yes: 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바 노출
- no: 스크롤을 하지 않음
- auto: 스크롤이 필요한 경우만 스크롤 바를 노출(기본값)
※ width, heightm frameborder(프레임의 테두리 사용여부) 등 속성이 더 있으나 디자인에 관한 부분은 CSS를 통해 제어하는 것을 권장
예제
<!DOCTYPE html>
<html>
<body>
<iframe src="https://malgun-gothic.tistory.com/" width="90%" height="500" frameborder="1" scrolling="yes"></iframe>
</body>
</html>예제 실행 화면:
이스케이핑(escaping)
HTML 코드는 브라우저에 의해 해석되는 약속된 문자이다. 따라서 html을 통해 코드글을 작성하게 되면 코드가 해석되어 화면에 표시되지 않는다. 이를 해결하기 위해 사용하는 방법이 이스케이핑이다.
예시:
<!DOCTYPE html>
<html>
<body>
<br />은 줄바꿈을 의미하는 태그
</body>
</html>실행시:
해결 예시:
<!DOCTYPE html>
<html>
<body>
<br />은 줄바꿈을 의미하는 태그
</body>
</html>실행시:
주요한 이스케이프 코드 리스트
&→ & (ampersand)를 의미<→ < (less-then sign)를 의미>→ > (greater-then sign)를 의미"→ " (quotation mark)를 의미'→ ' (apostrophe)를 의미
이스케이핑 도구 사이트: http://htmlescape.net/htmlescape_tool.html
표(table)
문법:
<table>
<tr>
<th>제목</th>
</tr>
<tr>
<td>데이터</td>
</tr>
</table>예제1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<table border="1">
<tr>
<td>이름</td><td>자</td>
</tr>
<tr>
<td>유비</td><td>현덕</td>
</tr>
<tr>
<td>관우</td><td>운장</td>
</tr>
<tr>
<td>장비</td><td>익덕</td>
</tr>
</table>
</body><td>안에 각각의 정보가 들어가고,<tr>로 한 줄씩 감싸면 테이블이 완성된다.
예제1 실행 화면:
예제2
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>자</th>
</tr>
<tr>
<td>유비</td><td>현덕</td>
</tr>
<tr>
<td>관우</td><td>운장</td>
</tr>
<tr>
<td>장비</td><td>익덕</td>
</tr>
</table>
</body><th>는 제목의 역할을 한다.
예제2 실행 화면:
예제3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utp-8" />
</head>
<body>
<table border="1">
<tr>
<th>이름</th><th>자</th><th>소속</th>
</tr>
<tr>
<td>유비</td><td colspan="2">비공개</td>
</tr>
<tr>
<td>관우</td><td>운장</td><td rowspan="2">비공개</td>
</tr>
<tr>
<td>장비</td><td>익덕</td>
</tr>
</table>
</body>※ 행: row / 열: column
rowspan="이 줄을 포함 묶여질 바로 다음 행 개수"colspan="이 줄을 포함 묶여질 바로 다음 열 개수"
예제3 실행 화면:
'Study' 카테고리의 다른 글
| aws 인스턴스 및 탄력적 주소 해제 (0) | 2022.05.27 |
|---|---|
| 인터넷활용 1, 2, 3 (0) | 2021.04.13 |
| 네이버, 구글에 SEO(검색 최적화)하는 방법 정리 (0) | 2021.01.15 |
| IntelliJ IDEA Ultimate 학생 인증 및 설치 방법 (jetbrain) + toolbox app 이용 (0) | 2021.01.14 |
| 데이터 통신/ OSI 7 계층 정리 (0) | 2020.08.31 |
