이글은 https://ofcourse.kr/ 에서 배운걸 정리한 글입니다.
HTML
웹 사이트에서 화면에 표시되는 정보
HyperText Markup Language
＊HyperText는 단순 텍스트 이상의, 링크 등의 개념이 포함 된 텍스트
＊Markup은 꺽쇠(<, >)로 이루어진 태그를 사용하는 규격
태그들을 이용하여 텍스트 이상의 요소를 정의하는 약속된 언어
실제로 웹사이트에 표시되는 문자, 사진, 영상, 레이아웃 모두 HTML로 구성되어있다.
마크업 - Markup
ex) 마크업 형식을 따르는 텍스트
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tom</to>
<from>Amy</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note><> 꺽쇠 안에 들어간 것을 태그라고 불리며
꺽쇠 안에 들어간 간 것은 태그라고 불리며,
<sometime></sometime>이런 형식으로 열고 닫으며 이 사이에 값이 들어간다
<속성이름>값이 들어가는 곳 = 태그 내부</속성이름>주로 꺽쇠 안에 들어가는 문자는 속성의 이름이며, 태그 내부에 들어가는 값은 속성의 값이다.
맨위 코드를 보면 to 변수에 해당되는 값이 Tom, from 변수에 해당되는 값이 Amy라고 할 수 있는 것.
HTML 예시
HTML 문서는 아래처럼 태그들로 이루어져 있다.
<html>
<head>
<title>My Homepage</title>
</head>
<body>
Welcome to my homepage!
</body>
</html>HTML에서 태그는 자신의 이름에 따라 각자 특정한 역할을 갖고 있습니다.
예를 들어
<body></body>태그는 문서의 몸통을 나타내며, 이 태그 안에 들어가는 내용이 몸통부에 표시한다
일반적인 마크업 언어와의 차이점은, 일반 마크업 언어에서는 태그 이름을 사용자가 지정하지만,
HTML은 태그의 이름이 규칙으로 정해져 있고 그 태그마다 역할이 다르다는 점입니다.
프론트엔드 프레임워크 등을 사용하면 사용자가 임의로 태그를 만들어 사용하는 경우도 존재합니다.
HTML 주석처리
<!--로 시작하여 -->로 끝납니다.<!-- 주석란 -->브라우징
웹 브라우징의 원리를 간단하게 요약하면 다음과 같습니다.
- 사용자가 주소(URL) 입력
- 어떤 IP에 접속해야 하는지 알아냄 (DNS)
- 브라우저가 해당 서버에 입력한 주소(URL)로 요청
- 서버에서 브라우저의 요청을 해석하고 실행하여 결과 데이터 전송(HTML, CSS, JS,…)
- 브라우저가 서버에서 받은 값을 해석하여 화면으로 출력
- 웹 브라우징
서버?
프론트엔드(HTML, CSS, JavaScript)를 학습하는데는 서버가 필요하지 않습니다.
서버를 구축하지 않고, 바로 HTML파일을 로컬 환경에서 작업 한 후, 웹 브라우저에서 열면 HTML파일을 해석하여 화면으로 출력하게 됩니다.
즉, 위의 웹 브라우징 과정에서 5,6번에 해당되는 작업만 우선적으로 실행하면서 공부할 수 있습니다.
