HTML
간략하게 정보를 넣을 수 있는 구조를 짜는 곳
HTML
Hyper Text
텍스트를 통해 다른 정보로 뛰어넘는 [상위] 링크가 걸려있다, 연결이 되어있다. 링크는 HTML의 본질, HTML의 본질은 웹의 본질
Markup (TAG 즉 표시한다는 의미)
Language (언어) 약자로서 웹 문서를 기술하는 언어이다.
웹 문서를 표현하기 위해 태그들로 구성되어 있다.
html을 공부 한다는 것은 html의 태그를 공부한다는 의미이다.
wed의 사전적 의미로는 거미줄이라는 뜻으로 IT에서는 www(world wide web)라는 말의 줄임말로서 사용한다.
전 세계의 컴퓨터들을 연결하여 정보 공유를 하는데 주 목적이 있다. 그리고 이렇게 연결되어 있는 상태를 네트워크에 연결되어 있다고 합니다.
*web은 거미줄처럼 얽혀있는 정보망을 뜻한다.
요청 request 응답 response
웹브라우저가 웹서버로 요청하면 웹서버가 응답하는 구조
응답될때 사용되는 html, jsp, json
semantic은 의미 있는 이란 뜻으로 semantic tag는 의미 있는 태그들이다.
<strong>생활 코딩</strong>
여기서 <strong>은 시작 태그, 생활 코딩은 컨텐츠라고 부르며 </strong>으로 닫아주어야 한다.
HTML의 90%이상이 이렇게 닫아주는 태그와 함께 짝을 이뤄 사용한다. (strong 태그는 글자를 강조할때 사용하는 태그이다)
*그냥 글자만 굵어지는 b태그와 달리 semantic 태그인 strong 태그를 이용하면 브라우저는 저 태그로 인해 강조하는 말임을 인식하고 스크린 리더와 같은 음성지원 앱이 작동하면 강한 역양을 사용한다!
HTML은 제일 상단에 선언하는 부분이 있다.
HTML5
<!DOCTYP html>
짝이 없는 외톨이 태그로 5버전부터 심플해졌다.
w3c 팀 버너스 리
html을 맨 처음 만든 사람으로서
w3c에서 웹 표준을 규정하고 제정하는 일을 하고 있다.
html 정보를 구조화한 언어로서 본질의 정보를 태그로 감싸서 보호하고 있다.
web이란
1개 이상의 사이트가 연결되어 있는 인터넷 서비스의 한 가지 형태를 말합니다.
인터넷이란, 1개 이상의 네트워크가 연결되어 있는 형태를 말한다.
- 프로토콜(protocol) : 네트워크상에서 약속한 통신 규약 (Http, FTP, SMTP, POP, DHCP)
-IP : 네트워크상에서 컴퓨터를 식별할 수 있는 주소
-DNS : IP주소를 인간이 쉽게 외우도록 랩핑한 문자열
-Port : IP주소가 컴퓨터를 식별할 수 있게 해준다면, Port번호는 해당 컴퓨터의 구동되고 있는 프로그램을 구분할 수 있는 번호 (각각의 번호가 가진 문)
도메인 주소
원래는 숫자로 구성되어있다. 하지만 기억되기 쉽게 문자로 랩핑을 시킨것이 도메인이다.
information path
<a></a> a태그는 anchor의 약자로 위치를 뜻한다.
href는 hype link reference의 약자로 a href에서 a와 href는 다른 태그이다.
a가 오프닝 태그를 연 다음 href를 추가한 것이다, 클로징 태그에는 href를 넣을 필요없다
<a href="쌍 따옴표를 사용하여 원하는 링크 주소를 작성해야 한다."></a>
*이 때 아무런 설정을 하지 않는다면 자기 자신의 사이트가 원하는 링크로 바뀌는 target="_selt"로 기본값이지만, target="_blank"를 이용하면 새로운 페이지로 링크가 생겨난다.(_언더바 사용)
<head>
<meta charset="UTF-8"> //UTF-8은 문자나 기호들의 집합을 컴퓨터에서 저장하거나 통신 목적으로 사용하기 위해 부호로 바꾸는 것으로 '부호화'라고도 한다. 이 인코딩된 문자 부호(character code)는 다시 디코딩(복호화)하여 본래 문자나 기호로 표현할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //반응형 웹페이지를 만들기 위해서는 꼭 필요한 meta 태그이다.
<img> 단일 태그로 사용법은 <img src="이미지 주소">이다. 이 때 src는 source의 약자이다.
css
Casading Style Sheets의 약자로, HTML문서를 디자인적으로 예쁘게 만들어 정보 전달을 좀 더 효율적으로 하기 위해 만들어진 문서이다.
html은 정보를 가지고 있고, css는 화면상의 레이아웃등을 컨트롤하는 문서라고 생각하면 된다.
style을 만드는 언어
태그는 계층적인 구조를 가지고 있다 (부모, 자식 사이)
계층적인 스타일 시트라는 키워드를 사용
개념 정리 강추
[ http://opentutorials.org/coures/1058](http://opentutorials.org/coures/1058) (생활 코딩) 클라이언트 언어, 서버 언어
코드 연습
[ http://www.w3schools.com](http://www.w3schools.com/)
'HTML > information' 카테고리의 다른 글
| [HTML] 작성 양식인 form 태그와 레이아웃 설정 방법 (0) | 2023.03.28 |
|---|---|
| [HTML] 여러가지 태그들 (0) | 2023.03.24 |