HTML의 간략한 설명

그냥 HTML이라는 것이 있습니다.라고 넘어가도 되겠지만 굳이 설명을 붙이는 이유는 HTML이 왜 나왔는지 어떻게 발전해 왔는지를 알아두는것이 향후 진도를 나가는데 분명한 도움을 주기 때문이다. 

정의

HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 만들기 위한 표준 마크업 언어 라고 정의 되어 있다. 이를 좀 상세히 설명하자면, 인터넷의 초창기 컴퓨터들이 연결되어 자신들의 문서, 이미지등의 자료를 공유하기 시작할때 하이퍼링크를 클릭하여 다른 문서, 이미지로 연결되는 방법을 구현하기 위해서, 문서를 어떻게 만들까?에 대한 해결 방법을 바로 마크업 랭귀지 에서 찾아 접목한것이 하이퍼텍스트 마크업 언어이다

구성

HTML은 웹 페이지의 구조를 정의하고 그 안에 포함되는 콘텐츠의 의미를 설명할 수 있도록. 아래의 기본적인  HTML의 주요 구성 요소를 가지게 된다.

태그

<a>이것은 내용입니다.</a>

와 같은 태그는 여는 태그와 닫는 태그로 구성되어 있는 것이 기본이다. 예외가 있으나 이것은 글을 진행하면서 자연스럽게 언급될 것이다.

속성

<a href="link.html">이것은 링크 입니다.</a>

속성은 태그에 대한 설명, 자세한 설정이라고 생각하면 된다. 위의 코드는 a 태그에 href 속성을 보여준다.

문서내용

<a href="link.html">이것은 링크가 있는 내용입니다.</a>

문서의 내용은 태그의 열린 태그와 닫힌 태그 사이에 작성하도록 한다. 이것도 예외적으로 내용이 없는 태그등이 있으나 진행하면 자연스럽게 습득하게 될것이다.

해봐야 할일

  • HTML에 관련한 글들을 읽어 봅시다.
  • 어떻게 HTML이 변해 왔는지, HTML 변하는 시기에 어떤 요구사항들이 있어서 변경이 되었는지 글들을 읽어 보면서 생각해 봅시다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기