[HTML] 시작하기(2)

이전에 했던 것과 이어서 몇 가지 추가로 알아보았다.

 

codingarchive.tistory.com/4

[HTML] 시작하기(1)

 

링크걸기

 

흔히 웹페이지에서 다른 웹페이지로 이동을 할 때 하이퍼링크를 타고 이동을 한다.

 

HTML의 태그 중 <a></a> 태그는 이런 하이퍼 링크를 걸 수 있게 해주는 역할을 한다.

 

이때 <a> 태그의 속성 중 href라는 속성의 값으로 링크를 넘겨주면 링크 안의 텍스트에 해당 링크로 이동하는 하이퍼 링크가 걸리게 된다.

 

 

 

 

"네이버로 이동" 이라는 텍스트에 하이퍼 링크가 걸린 것을 확인할 수 있다.

 

 

"네이버로 이동"이라는 텍스트를 누르면 기존 페이지에서 "https://www.naver.com/"으로 이동하게 된다.

 

이때 기존 페이지에서가 아닌 새 탭에서 열고 싶으면 속성 target="_blank"를 추가하면 된다.

 

이외에도 마우스 커서를 올려놓을 때 링크에 대한 설명을 나타내고 싶으면 title 속성을 추가하면 된다.

(title="링크에 대한 설명")

 

 

 

 

 

리스트와 태그 중첩

 

기본적으로 리스트를 나타내는 태그는 <li></li>이다.

 

"오늘 할 일"의 리스트로 여러가지를 입력해보았다.

 

이 b.html을 켜보면 다음과 같이 나오는 것을 확인할 수 있다.

 

 

<li></li> 태그로 감싸진 것들 앞에 "●"으로 표시되며 목록 형식으로 보이게 된다.

 

 

이 리스트 아래에 다른 성격을 가진 새로운 목록들을 추가하고 싶을 땐 따로 그룹핑을 해줘야 한다.

 

 

 

그룹핑을 안하고 list를 구분할 수 있을까

 

 

 

이처럼 그룹핑을 하지 않으면 다른 성격의 리스트도 하나의 리스트로 인식하기 때문에 그룹핑을 해야 구분할 수 있다. 

 

이때 <li> 태그를 그룹핑하는 태그로 <ul>을 사용한다.

 

 

 

<ul>태그를 사용하여 그룹핑을 지정

 

서로 다른 성격의 리스트들이 구분된 것을 확인할 수 있다.

 

그룹핑 태그를 사용할 때 ul 태그는 unorderedList로 순서가 없는 리스트에 사용한다.

 

순서가 있는 리스트에 그룹핑을 할 때는 <ol> 태그를 사용하면 앞의 ●대신 숫자가 나오는 것을 확인할 수 있다.

 

(ol = orderedList)

 

 

오늘 사용한 그룹핑 태그 처럼 태그 안에 또 다른 태그를 넣을 수 있다는 것을 알아보았다.

 

코딩을 할 때처럼 하위 태그는 알아보기 쉽도록 들여 쓰기를 하는 습관을 생활화하도록 하자.

 

 

 

 

Head와 Body

 

 

앞에서 설명한 내용들은 모두 "본문" 즉, 글의 몸통(Body)에 해당하는 태그들을 사용했다.

 

웹사이트 상단 탭을 보면 포탈마다 "네이버", "Google"등 이름으로 쓰여있는데 우리가 작성한 파일은 a.html 이런 식으로 적혀있다.

 

이를 수정하기 위해서는 글의 Head 부분을 설정을 해야한다.

 

Head에도 Body부분처럼 속성을 바꿀 수 있는 태그들이 존재한다.

 

 

 

기존에 몸통부분만 작성되어있던 파일을 head와 body로 구분하였다.

 

 

 

기존에 b.html과 같은 형식으로 적혀있던 탭 이름 부분이 HTML 시작하기로 바뀐 것을 확인할 수 있다.

 

 

 

그런데 이것을 Explorer로 켜보면 아래와 같이 한글이 깨지는 현상이 발생한다.

 

 

 

 

 

이를 해결하기 위해선 Head 안에 <meta charset="utf-8">를 추가해주면 된다.

 

 

 

한글 깨짐 현상이 해결됨