2. tag 사용 실습 및 응용

안녕하세요~

오늘은 전 게시물에서 말씀 드렸듯이 실습 위주로 진행해 보려 합니다.

오늘 진행할 것은 바로 tag들의 사용 방법인데요.

그렇게 어렵진 않을 겁니다. :)

기본적으로 많이 쓰이는 tag 종류를 엄선해서 알려 드릴 텐데요.

잘 따라오시길 바랍니다!!

1. h tag

기본적으로 h tag에는 h1 부터 h6 까지의 종류가 있는데요.

쓰는 방법은 <h1>내용</h1> 식으로 사용하게 됩니다.

예를 들어 보겠습니다.

이렇게 작성을 진행해 주시고 옆에 번개 표시를 눌러 주세요!! ( 실행 시 크롬을 요구하게 되니 크롬을 설치해 주세요)

번개 표시를 눌러서 확인해 보시면 이런식으로 결과가 뜨는 걸 보실 수 있으실 겁니다.

이제 h tag와 html 작성법에 대해서 조금은 이해가 가시나요??

그럼 다음 tag에 대해 진행하도록 할께요.

2. p tag와 span tag

이렇게 작성하셨나요??

그렇다면 결과 값이 나오셨을 텐데

이렇게 떴다면 잘 따라오신 겁니다. 자 이제 p tag와 span tag의 차이점이 보이시나요??

p tag에는 자동적으로 padding 이라는 효과가 들어갑니다. 또한 자동 줄 바꿈을 위해

한줄 전체를 잡아먹기 때문에 위 결과 처럼 나오는 것이고

span tag를 보게 되면 글씨가 모두 붙어서 나오게 됩니다. 중간에 br tag가 없다면 

한 화면을 모두 채울때 까진 절때 자동 줄 바꿈이 되지 않습니다.

그렇기에 스타일을 주지않고 그림이나 다른 tag의 옆에 붙이고 싶을 때 span을 사용하면 되고

그림의 밑이나 아니면 나는 글만 쓰고 싶다 하시는 분은 

p tag를 사용하시면 됩니다.

3. div tag

div tag는 기본적으로 상자 즉 박스라고 생각하시면 됩니다.

하지만 그냥 <div></div> 라고 쓰실 경우 아무 반응이 없을 겁니다.

당연한 결과죠!! 그렇지만 저 tag를 쓰셨다면 그 공간은 div tag가 차지하고 있는게 맞습니다.

이제 예를 들어 볼까요??

자 이렇게 div tag를 두번 써볼텐데요. 어떤 면이 차이가 나는지 결과를 보겠습니다.

두개의 차이가 보이시나요?? 하나는 안에 글씨를 써서 영력을 차지했기 때문에 직사각형의 모양이 되었지만

안에 글이 없다면 그냥 줄 같은 영역만을 차지하게 된답니다.

이런식으로 div는 영역을 고정시켜서 그 안에 무엇이든 넣을 수 있는 박스가 되는 것이죠!!

설명이 어렵거나 이해가 안가시는 분을 꼭!! 댓글을 달아 주시기 바랍니다!!

자 다음 tag에 대해서 알아볼까요?? (이번 글에서는 5가지만 게시하겠습니다!)

4. ul tag와 li tag

ul tag 와 li tag는 기본적으로 함께 사용하는데요.

ul tag는 정렬되지 않은(?) 글머리 기호를 나타내는 데요. (말이 이상하긴 하지만....)

또한 li tag는 정렬된 목록을 의미하게 되는데요.

이건 직접 봐야 이해가 빠르겠죠??

이런식으로 작성하시면 됩니다.

단 꼭 ul tag 안에 li tag를 쓰셔야 합니다.

그렇지 않으면 이쁜 그림이 나오지 않습니다...

저의 html의 끝은 아름다운 화면구성이랍니다. ㅎㅎ 

자 이제 결과를 볼까요??

자 이런식으로 결과가 나왔다면 제대로 하신 겁니다.

이제 제가 왜 ul tag 안에 li tag를 써야된다 그러는지 이해가 가셨나요?? 이렇기 때문이죠...

반대로 쓰면 점이 위로가고 밑으로는 아무 글머리 기호가 없는 상태가 되겠죠??

그렇기 때문에 아름답지 않습니다...

5. a tag

a tag에 대해서 알아볼 텐데요.

a tag는 다른 사이트로 링크를 걸어줄 때 필요한 것입니다.

기본 사용법으로는 a tag 뒤쪽에 href라는 tag가 들어가게 되는데요.

이어서 쓰면 <a href 가 되겠죠??

이런식으로 이제 예를 한번 들어보겠습니다.

a tag 역시 다른 tag 들과 똑같이 사용하면 되지만 여기서 href만 써 주시면 하이퍼링크가 자동으로 걸리게 됩니다.

리크 걸 곳이 없다면 "" 더블 컷테이션 안에 #을 넣어 주시면 됩니다.

이상으로 많이 사용되는 tag들을 정리해 보았는 데요. 

궁금하신 점이나 어떤걸 할 때 어떤것이 필요한지 알고 싶으신 분들은 댓글을 남겨주세요!!

상세히 설명해 드리겠습니다!!

이상으로 이번 포스팅도 마치겠습니다!!

감사합니다!! :-)