안녕하세요.
이번 포스팅은 다음과 같은 구성으로 진행하려 합니다.
① 웹 용어 정리
② HTML 용어 기본
③ HTML 기본 구조
① 웹 용어 정리
HTML에 들어가기 전 알아두면 좋을 용어들로 정리했습니다.
HTML뿐 아니라 CSS, Javascript에서 정의되는 필요한 용어들은 하나의 포스팅에 넣기에 너무 방대하므로 웹 용어 정리에서는 HTML에 들어가기 전 기초 단계로 알면 좋을 부분을 정리하려 합니다. 또한 앞으로의 포스팅에서 필요시 앞부분 또는 마무리 부분에 용어 정리를 하면서 포스팅을 진행할 수 있습니다!
포스팅보다 더 구체적으로 자세한 설명을 원하시면 각 목차에서 궁금하신 키워드 별로 검색해보시는 것도 좋은 학습 방법이라 생각됩니다.
1. HTML
HTML(Hypertext Markup Language)라 하며 흔히들 웹 페이지의 뼈대를 만드는 곳이라고 많이 합니다.
HTML의 경우 C, Java, Python과 같이 프로그래밍 언어가 아닌 마크업 언어라 하여 태그와 요소 기능 등을 활용하여 데이터를 구조화하기 위한 언어입니다.
2. HTTP
웹을 완전 처음 시작하는 입장에서는 HTML과 HTTP는 헷갈릴 수도 있을 것 같아서 바로 다음 순번으로 정리했습니다.
워드와 컴활과 같은 자격증 공부를 해보신 경우 HTTP에 대해서 접해보신 경우가 있을 것 같습니다.
HTTP는 HyperText Transfer Protocol의 준말이며 아래의 서버와 클라이언트를 통해서 요청과 응답(request/response)을 수행하는 프로토콜이라 합니다.
3. 프로토콜
위 2번의 설명에서 프로토콜이라는 단어가 나왔습니다. 프로토콜은 인터넷망 즉 네트워크에서 서로 다른 컴퓨터 또는 디바이스 등의 정보를 교환할 수 있게 도와주는 통신 규약입니다.
4. IP (IPv4, IPv6)
IP는 Internet Protocol의 약자로 인터넷 통신을 받기 위해서 생겨났으며, 숫자로 구성된 하나의 고유 주솟값으로 보면 됩니다.
IP 주소를 소개할 경우 IPv4와 IPv6로 부가 설명이 생깁니다.
IPv4는 IP 주솟값을 개인의 컴퓨터에 할당하기 위해서 8비트씩 4부분으로 나누어 총 32비트 값에 주소를 할당하는 방법입니다. IPv6의 경우 IPv4의 주소 부족 문제로 생긴 확장 버전이며 확장성, 융통성, 인증성, 기밀성, 무결성 등을 다양한 기존 문제점을 해결하면서 상위 호환 버전으로 생겨난 것입니다.
5. 도메인 네임(Domain name)
IP 주소는 각 컴퓨터나 디바이스당 고윳값을 갖고 있습니다. 이러한 숫자로 구성된 IP 주소는 평소에 외우고 다니기 불편한 부분이 존재합니다. 이러한 불편함을 대체하기 위해 숫자가 아닌 문자로 대체하여 보다 쉽게 기억하기 위해서 사용되는 개념입니다.
인터넷 사이트를 검색해 보면 의미있는 영어 단어 또는 브랜드 명을 도메인 네임으로 많이 사용합니다.
6. 클라이언트와 서버
클라이언트와 서버는 한 묶음으로 보는 것이 좋습니다.
클라이언트(Client) 인터넷 네트워크를 통하여 서버라는 다른 컴퓨터 장치로 원격으로 접속해서 필요한 서비스를 사용하는 것을 의미합니다.
서버(Server) 클라이언트나 사용자들에게 제공하려는 내용들을 갖고 있는 컴퓨터 프로그램 또는 성능이 뛰어난 컴퓨터 장치로도 불립니다.
예로 게임의 유저가 클라이언트 게임 운영진들이 클라이언트를 통제할 수 있는 권한 등을 갖는 것을 서버라 합니다.
7. GUI
Graphical User Interface의 준말이며, 개발자의 시선이 아닌 사용자의 시선에서 조금 더 사용성과 편리성을 증대하기 위해서 생겨난 조작 방식입니다. 최근에는 가장 쉽게 접하는 키오스크가 있으며, 컴퓨터 게임에 사용되는 그래픽 선택 부분이 GUI로 들어갑니다.
8. UI/UX
UI는 User Interface의 준말이며, 유저/사용자 인터페이스라 한다. 일상에서 쉽게 접하는 카카오톡의 톡을 보내는 기능의 경우 사람과 사람 사이에서 장치를 활용하여 의사소통을 수월하게 하기 위한 인터페이스이다.
UX는 User Experience의 준말이며, 유저/사용자 경험이라 한다. 구글 플레이스토어에서 어플들의 평점과 피드백들이 모여서 사용했던 경험이 된다. 이러한 경험을 통해서 UX 디자이너는 UI 디자인을 개선하는 편이다.
9. Front-end와 Bakc-end
여담) 프론트 엔드라 불리는 Front-end의 경우 생각보다 많은 비 전공자들이 진출하는 영역이기도 합니다. 전공인 분들도 많이 진출하고 전문적 지식이 있어야 살아남을 수 있지만 결과물을 보이는 영역에서 확인이 일정 부분 가능하기 때문에 많이 진출하는 것 같습니다.
웹 개발에는 보인는 측면과 보이지 않는 측면이 존재하는데 그 두 부분을 '프론트 엔드'와 '백엔드'라는 단어를 황용하여 사용하는 측면에서 눈에 보이는. 즉 시각적으로 보이는 프론트 엔드(Front-end)와 사용자 입장에서는 보이지 않는 사용하는 부분의 기능을 담당하는 백엔드(Back-end)로 나누어집니다.
② HTML 용어 정리
HTML에서 기본적으로 사용되는 용어들을 정리하는 부분입니다.
1. 요소(Element)란?
|
1
|
<태그> 내용 </태그>
|
빈 요소, 텍스트 요소, 텍스트 + 숫자 등 혼합할 수 있는 자유로운 요소로 구분됩니다.
태그와 요소를 많이 혼용하지만 명확하게 구분하면 다른 용어로 사용됩니다.
태그 HTML의 문서에 포함된 개념입니다.
요소 HTML의 경우 문서로 구문 분석 과정을 통하여 뼈대의 형태로 웹의 기본 화면을 구성합니다.
태그의 경우 HTML의 문서(document)에 포함된 개념이지만 요소의 경우 구문 분석 과정이 모두 끝난 이후에 태그들로부터 생성됩니다.
다시 설명하면 태그의 경우 문법 오류가 발생해도 상황에 대한 결괏값(value)을 반환할 수 있으나, 요소의 경우 문법의 오류가 발생하면 값(value)을 가질 수 없습니다.
2. 속성(Attribute)이란?
|
1
|
<태크이름 속성명= "속성값"> 내용 <태크이름>
|
속성의 경우 요소에 의해 결정되는 값입니다.
다시 말하면 속성은 요소의 종속적인 값입니다. 이러한 종속되는 값은 요소의 부가적인 정보 또는 값을 추가할 때 사용됩니다.
HTML에서는 요소가 여러 개의 속성을 가질 수 있습니다.
태그, 요소, 속성의 이름들은 모두 소문자로 작성을 권합니다.
3. 태그(Tag)란?
HTML에서 태그는 크게 열린 태그와 닫힌 태그로 구분됩니다.
|
1
|
<태그> 내용 </태그>
|
|
1
|
<태그/> 또는 </태그> 또는 (생략형) <태그>
|
위에 간단한 예시를 들었습니다.
태그 하나만으로 의미가 있는 기능을 수행할 수 있는 닫힌 태그가 존재합니다.
태그 안에 내용을 가져야 의미가 있는 기능을 포함할 수 있는 열린 태그가 존재합니다.
태그의 포스팅은 이후 포스팅에서 자세하게 정리될 예정입니다.
③ HTML 기본 구조
HTML의 기본 실행 구조에 대해서 작성한 부분입니다.
1. 기본 구조 태그
HTML에서 태그는 매우 적은 양이 많은 반복을 통하여 사이트의 뼈대를 잡는 경우가 많습니다.
기본 구조를 보기 위한 태그들은 다음과 같습니다.
<!DOCTYPE>, <html> </html>, <head> </head>, <title> </title>, <body> </body>, <p> </p>
<!DOCTYPE> : 문서의 형식을 선언합니다. html 파일인지 XML인지 등 document type을 결정하는 태그입니다.
<html> : 최상위 루트 요소로 html 파일의 <!DOCTYPE>태그 바로 다음에서 시작과 끝에 존재하는 태그입니다. 하나의 문서(document) 파일로 인식할 수 있도록 만들어 주는 태그입니다.
<head> : HTML에서 문서의 속성을 부여하는 부분이며, 꾸미는 값인 CSS이나 메타(meta) 태그 정보들도 설정하는 태그입니다.
<title> : 제목을 지정하는 태그입니다.
<body> : html 파일의 내용들을 포함하는 태그입니다. head 태그는 속성 값을 추가하여 꾸미는 부분이라면 body 부분은 HTML에 표현할 문서의 내용들을 나타내주는 태그입니다.
<p> : 내용을 표현하기 위해서 사용되는 태그입니다.
모든 HTML 파일들은 <p>를 제외한 위의 태그들이 필수적으로 사용됩니다.
<p> 태그의 경우 내용을 표기하기 위해서 임의로 작성하여 넣은 태그이며, 아무리 잘 작성된 HTML 파일도 반드시 문서당 하나의 <!DOCTYPE>, <html> </html>, <head> </head>, <title> </title>, <body> </body>들을 갖습니다.
2. HTML Tutorial에서 예시로 나온 기본 구조
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
|
Tutorial 사이트의 예시를 업로드한 경우입니다.
3. Visual Studio Code의 !를 활용하여 작성한 기본 구조
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
|
태그에 대한 설명은 기본 태그 구조에 작성했으나 아직 작성되지 않은 태그로 meta 태그 등이 있습니다. 이런 내용은 향후 포스팅을 통해서 작성될 예정입니다.지금은 이러한 구조가 있음을 이해하시는 것이 좋을 것 같습니다.
내용 읽어주셔서 감사드립니다.
포스팅을 진행함에 있어서 내용에 대해서 참조하고 주관적 내용으로 구성할 때 참조했던 주소입니다.
- reference -
W3Schools Free Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://ko.wikipedia.org/wiki/HTML_%EC%9A%94%EC%86%8C
HTML 요소 - 위키백과, 우리 모두의 백과사전
HTML 요소(HTML 엘리먼트, HTML element)는 HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모델(DOM)으로 파싱된다. HTML은 트리나 HTML 노드(텍스트 노드 등)로 구성된다. 각 노드는
ko.wikipedia.org
잘못된 지식이나 오탈자가 있는 경우 댓글 달아주시면 감사드리겠습니다!
조금 더 올바른 지식으로 방향을 잡아주시거나 올바른 내용을 더해주는 것도 감사드리겠습니다!
다음 포스팅 때 뵙겠습니다!
'Web Basic > HTML' 카테고리의 다른 글
| [HTML] 시맨틱 태그(Semantic tag)란? (0) | 2022.12.04 |
|---|---|
| [HTML] 5. 작성 태그와 인용 태그 정리 (2) | 2022.09.23 |
| [HTML] 4. 요소(Elements) 와 속성(Attributes) (0) | 2022.04.13 |
| [HTML] 3. 태그 (0) | 2022.03.05 |
| [HTML] 1. 발달 개념 (0) | 2020.06.10 |
