HTML 시작하기

html은 Hyper Text Markup Language 의 줄임말이다. 말 그대로 하이퍼 텍스트로 여기에 뭔가 있다고 알리는 언어 로 생각하면 된다. 웹페이지는 엄청 멋있는 것도 사실 그냥 글로 되어 있는 문서하나다. 해당 문서에 어디에 어떤게 있는지 IE, Chrome, FireFox, Safari 등의 브라우저에게 알려주면, 브라우저가 알아서 여기에는 메뉴가 여기에는 제목이, 또 여기에는 작성자 이름이 그리고 내용은 여기에 있군 하면서 이쁘게 만들어 주는 거다. 가끔씩 브라우저별로 이상하게 보여지는 사이트들이 있는데, 브라우저마다 웹문서를 웹페이지로 만드는 기능에 차이가 있어서 발생하는 문제이다. ~~이를 해결하는 것은 크로스 브라우징이라고 하는데 이건 천천히 알아보자 ~~

1. HTML 태그 (Tag)

이제부터는 꺾쇠로 열고(<) 꺾쇠로 닫히는(>) 모든 것들은 태그(Tag)라고 한다. 태그는 뭔가가 있다고 알리는 아주 중요한 녀석들이다. 태그를 이용해서 어디가 제목인지 어디가 글인지 어디가 이미지 인지 알 수 있게 해준다. 표시하는 방법은 다음 처럼 한다.

<태그이름>여기에 내용을 쓴다!</태그이름>
<!-- 태그 이름에 h1을 넣으면 제목, p를 넣으면 내용 글 이라는 뜻으로 브라우저에게 마크업 할 수 있다. -->

태그가 마크업을 하려면 태그를 열고 내용을 쓰고 태그를 닫으면 내용이 태그안에 있어서 마크업이 되는것이다. 태그에는 3가지 종류의 태그가 있는데, 내용 앞에 쓰는여는태그와 내용 뒤에 쓰는 닫히는 태그, 내용이 들어가지 않는 스스로 닫는 태그 가 있다. 태그는 열었으면 꼭 닫아야한다. 안닫으면 브라우저는 이상하게 문서를 이해하고 원하는 대로 보여주지 않을 수도 있다.( 무조건 원하는 대로 안보여주는 것은 아니다. 브라우저가 똑똑해서 어느정도 이해하지만, 개발의 기본은 구체적 명시적이다. 확실하게 어디부터 어디까지가 어떤 성격인지 보여주자 )

이제 여는 태그와 닫는 태그 그리고에 대해서 예시로 알아보자 스스로 닫는 태그

아래가 여는 태그와 닫는 태그는 '/'로 구분할 수 있다. 태그이름앞에 '/'가 있으면 닫는 태그다.

<h1>이것은 제목입니다.</h1>

스스로 닫는 태그는 굳이 내용이 필요 없을 경우에 사용한다. (예를 들면 이미지)

<img />

2. HTML 속성 (Attribute)

이미지는 사진을 어떻게 넣지? 방법은 속성이다. 태그들은 그들만의 속성을 가질 수 있다. 모든 태그가 가질 수 있는 속성도 있고, 특정 태그만 가질 수 있는 속성도 있다. style, class 같은 속성이 모든 태그가 가질 수 있고, src, alt, for, width, height, autoplay, type 등등 은 특정 태그들만 가질 수 있는 속성이다. 사용하려는 태그에 맞춰서 속성을 사용하면 속성에 맞춰서 원하는 미디어 또는 내용을 마크업 할 수 있다.

속성을 사용하는 방법은 다음과 같다.

<div style="width:200px;height:200px;background-color: yellow">
    <!-- 속성을 사용할 때는 속성이름="값" 의 모양으로 사용하면 된다. -->
    <h1 class="heading-1">제목을 쓰고 있다.</h1>

    <img src="imageurl" width="80" height="80" alt="이미지에 대한 내용 텍스트(이미지를 못가져왔을 때)" />

</div>

위에서 사용한 속성을 설명하자면(쓰면서 배우는게 더 빠르기 때문에 간략하게 설명한다.)

  • style : 해당 태그의 모양이나 배경색 등 옷을 입히는 속성이다. 예제에서는 너비와 높이 그리고 배경색을 지정했다.
  • class : 해당 태그에게 클래스를 준다. (CSS에서 이어진다. style의 내용을 클래스 이름으로 정의하고, 태그에는 클래스를 연속해서 사용하면서 코드를 재사용할 수 있다.)
  • src : 이미지태그에서 이미지 url을 넣으면 해당 이미지가 여기로 들어온다. 최초 사이즈는 원본 사이즈이므로 보여주기 원하는 사이즈를 맞춰줘야한다.
  • alt : 이미지 로드에 실패 했을 때, 보여주는 대체 텍스트(예를 들면 "귀여운 개가 밥을 먹는 사진입니다.", "트와이스 앨범 재킷 " 등으로 로드에 실패 했을 때도 사용자의 웹페이지 읽기에 불편함을 줄인다.)

3. HTML 태그 종류

엄청 많다 크게는 시맨틱하지 않은 태그와 시맨틱한 태그 두가지가 있다. 시맨틱 태그는 HTML이 발전하면서 생겨나서 마크업의 의미를 더 부여한 태그다. 일반적으로는 원래 쓰던 몇가지만 써도 충분히 개발이 가능하지만, 시맨틱 태그를 잘 쓰면 검색 엔진에 노출이 더 잘 될 수 있어서 알아두면 똑똑한 개발을 하기에 좋다.

  • non-semantic-tag(시맨틱 하지 않은 태그)
    • 기본 껍데기
      • html : html 문서임을 마크업
      • head: html 문서의 정보 부분(화면에난 나타나지 않지만 어떤 폰트를 참조했는지 등 문서의 특징)을 마크업
      • body: html 문서의 내용부분(실제로 화면에 나오는 부분)을 마크업
    • head에 들어가는 태그
      • title: 문서의 제목을 마크업
      • link: 문서에 연결된 참조 폰트, 라이브러리 등을 마크업(css 파일)
      • meta: 문서의 정보(검색엔진에 노출하는 제목, 설명, 키워드 등)를 마크업
      • script: 문서에 연결된 자바스크립트 파일을 마크업(link와 비슷)
    • body에 들어가는 태그
      • h1: 가장 큰 제목 마크업(크기 순으로 h6까지 있음)
      • p: 본문 내용을 마크업
      • span: 내용 이어붙이는 마크업
      • ul: 순서가 없는 리스트 마크업
      • ol: 순서가 있는 리스트 마크업
      • li: 리스트에 들어가는 메뉴 마크업(ul과 ol에 이게 들어간다.)
      • div: 구획을 마크업(내용 같은건 아니고, 예를 들면 제목 하나 본문하나 사진하나를 하나의 구획으로 묶는 태그)
      • img: 이미지를 마크업
      • video: 비디오를 마크업
  • semantic-tag (시맨틱한 태그: 의미부여한 태그, 대부분 div를 의미부여해서 쓰는거다)
    • head에 들어가는 태그 따로 없음
    • body에 들어가는 태그
      • header: 네이버 블로그의 배너 부분에 해당,

results matching ""

    No results matching ""