[HTML] 시작하기(1)

학교 다닐 때 HTML에 대해서 간단히 배우고 웹페이지를 제작하는 프로젝트를 했었다.

근데 오래간만에 하려니 기억이 안 나서 생활코딩님 유튜브를 보며 다시 시작하려 한다.

opentutorials.org/module/1892

HTML 수업

 

HTML 이란

 

- HyperTextMarkupLanguage의 줄임말

 

- 하이퍼텍스트를 가장 중요한 특징으로 하는 (HyperText)

 

- 마크업이라는 형식을 가진 (Markup)

 

- 프로그래밍 언어 (Language)

 

 

 

 

HTML 파일 만들기

 

메모장에 텍스트를 입력한다.

 

원하는 디렉토리에 확장자명 html로 지정을 하고 파일 형식을 "모든 파일"로 설정한 후 저장을 하면

 

 

다음과 같이 저장되는 것을 확인할 수 있다.

 

이 파일을 실행해보면 웹브라우저가 실행되는데 이는 html이라는 확장자를 운영체제가 어떤 프로그램으로 열어야 하는지를 알고 있기 때문에 브라우저를 실행시켜준다.

 

 

 

 

HTML 태그

 

가장 간단한 몇 가지의 태그들에 대해서 정리를 해보겠다.

기본적으로 태그는 꺾쇠(<>)로 시작해서 꺾쇠 + 슬래쉬(</>)로 닫힌다.

즉, 이 꺾쇠 안에 어떤 태그 이름이 들어가는가에 따라 달라지게 된다.

1. 강조 표시(Strong)

다음과 같이 "HTML"이라는 말을 강조하고 싶은 경우 단어의 앞, 뒤로 strong이라는 태그를 씌워준다.

이때 끝나는 태그에는 "/"를 붙여서 태그의 종료를 나타내 준다.

 

2. 제목 표시(heading)

 

위와 같이 제목을 따로 표시하고 싶어서 공백을 넣는 경우가 있다.

하지만 이를 저장하고 웹 브라우저에서 확인해보면

 

원하는 대로 나오지 않는다.

 

이런 경우 사용하는 태그가 "Heading"이다.

 

 

제목으로 설정해주고 싶은 부분에 <h1></h1>이라는 태그로 감싸주게 되면

 

 

 

다음과 같이 나오는 것을 확인할 수 있다. 

이 "heading" 태그들은 웹 브라우저에서 제목을 굵고 큰 문자로 바꿔주고 줄 바꿈을 하는 역할을 한다.

(h뒤의 숫자를 몇으로 쓰냐에 따라 글씨의 크기가 바뀌게 된다.)

 

 

 

이 외에도 많은 태그들이 있고 HTML 언어의 태그 모음을 검색해보면 확인해볼 수 있다.