1. 웹사이트
우리가 매일같이 쓰는 NAVER, GOOGLE 같은 사이트들을 통틀어 ‘웹사이트' 라고 한다. 위키백과에서는 웹사이트를 다음과 같이 정의하고 있다.
웹사이트는 인터넷 프로토콜 기반의 네트워크에서 도메인 이름이나 IP 주소, 루트 경로만으로 이루어진 일반 URL을 통하여 보이는 웹 페이지 (Web Page)들의 의미 있는 묶음이다.
한 줄로 요약하자면, 링크로 연결되어 있는 웹페이지의 모음이라는 거다.
그럼 웹페이지는 무엇일까? 웹상의 문서 하나하나가 바로 웹페이지 인 것이다.
웹페이지의 구성 요소는 크게 3가지로 나뉜다.
HTML, CSS , JAVASCRIPT
(출처: 코드메이트)
위 그림이 딱 적절한 예시라고 할 수 있겠다. 웹페이지가 만약, 사람이라면
html은 뼈대 (구조), javascript는 근육 (행동, 움직이는 것), css는 화장/겉모습 (꾸미는 것)
을 담당하고 있다. 오늘은 먼저, html의 기본적인 작성법에 대해서 적어보도록 하겠다.
2. HTML
1. HTML의 개념
html 이란 Hyper Text Markup Language 의 줄임말이다. 무슨말인지 모르는게 당연하다.
먼저, Hyper Text에 대해서 간략하게 알아보자.
뭣도 모르던 초등학생시절, 파워포인트로 나름 스토리가 있는 5GB짜리 게임이 담긴 슬라이드 쇼를 만든 적 있다. 이 때 사용했던 기능 중 하나가 ‘하이퍼텍스트' 였다.
가령, 이 길을 선택하시겠습니까? 라는 물음에 ‘예'를 누르면 2페이지로, ‘아니오'를 누르면 3페이지로 스토리가 이어지는 식이었다.
이것과 아주아주 유사하다. 여기에 ‘인터넷'이 더해져서 순차적으로 위에서부터 실행되는 것이 아닌, 사용자의 클릭에 따라 링크를 타고 이동하는 형식의 문서가 완성되는 것이다!
다음으로는, Markup Language에 대해서 간략하게 알아보자.
지금 사용하고 있는 크롬 브라우저에서 F12를 눌러 개발자도구를 켜보자, 온갖 이해할 수 없는 영어로 가득 찬 화면이 나올 것이다.
이 영어들의 특징을 찾아보자면, <> 이 꺽쇠로 시작하는 말이 전부 앞에 붙어있다는 것이다! 이 ‘<>’ 를 태그(tag)라고 하는데, 이 태그를 이용해서 문서나 데이터구조를 명시하는 언어를 마크업 언어라고 말한다.
정리하자면, html은 <> 를 이용해서, 링크를 타고타고 이동할 수 있게 웹페이지를 구성하는 언어라고 정리해 볼 수 있겠다.
2. HTML의 기본 구조
html 문서의 기본적인 구조는 모두 같다.
<html> 태그로 시작하고, 그 아래에는 <head>태그, 그 아래에는 <body> 태그가 들어간다.
head 태그에는 주로 문서의 메타데이터, 외부에서 가져오는 링크 , 브라우저에 표시될 제목 등이 포함된다.
body 태그는 본격적인 화면의 내용을 작성한다.
(출처 : 위키백과)
HTML의 요소 (element)는 다음과 같다.
(출처 : devkuma)
요소는 쉽게 말해서 ‘세포(cell)’ 같은 거다.
사람을 잘게 쪼개면(?) 말이 이상하지만, 무튼 잘게 나누면 세포로 쪼갤 수 있는 것 처럼. HTML도 하나하나 잘게 쪼개보면 결국은 이 요소들로 이루어져 있다는 의미다.
- 태그 : 모든 요소는 시작태그로 시작한다. 태그의 종류에 따라 종료태그가 없는 것도 있지만, 시작태그는 반드시 있다.
- 속성(attribute) : 태그에 따라 속성 값을 가질 수도 있다. 예를 들자면 a 태그에는 href가 붙을 수 있는 식이다. 태그에 상관없이 가질 수 있는 속성명으로는 id, class, style 등이 있다. 이 값을 global attribute 라고 한다.
태그에는 약간, 특별한 시맨틱 태그(semantic tag) 가 존재한다.
웹 페이지의 위치에 따라 tag 이름을 다르게 쓰는거다.
역할은 그냥 div와 동일하지만, 코드를 봤을 때 아, 이게 여기에 쓰인거구나! 직관적으로 알수 있기 때문에 쓰인다.
3. HTML 문서의 구조화
(출처 : medium by 곽성룡)
나중에 CSS에서 자주 다루겠지만, HTML의 구조에 따라 block, inline, inline-block으로 구별할 수 있다.
오늘은 아주 기초적인 Web, Html에 대해서 정리해보았다.
다음은 CSS에 대해서 정리할 것이다!
Uploaded by N2T