[왕초보 HTML5] 무작정 따라하기 3. 많이쓰이는 태그편 (주구장창)

안녕하세요. 나눔고딕 글꼴을 설정하니 조금 가독성이 좋네요 역시...

 

이번에는 많이쓰이는 태그편 주구장창... 진짜 많이 사용합니다. 지겨워죽겠어요!

 

1. <a> 태그 : 하이퍼 링크를 연결시키는 태그. 

     실제 사용 예 ) 네이버 뉴스를 누르면 뉴스 페이지로 이동시키는것. 

 

＠ a 태그를 사용했는진 모르겠습니다. 예상컨데 div에 click 이벤트를 걸어서 사용했을수도 있습니다.

＠ 자바스크립트로 기존에 있는 Element 들을 동작방식을 변경 할 수 있습니다.

 

기본형식은 <a href="인터넷URL">갑시다!!</a>

 

앗 여기서 a태그인데 <a></a> 만 쓰는게 아닌가? 

여기서 href 는 a태그의 고유 속성입니다. 

 

href 라는 속성은 어디페이지로 갈거냐... 라는 그런 속성이죠.

 

a태그의 대표적인 속성 3가지 알고 갑시다.

 

※ href  : 주소를 쓰면 된다.

※ target : 새창으로 열것인가. 아니면 현재 창에서 이동할것인가. 

  - _self : (기본값 생략가능) 현재 링크를 연다.

  - _blank : 새창을 열어 링크를 연다.

  [ 더 있지만 지금은 이것만 알고 갑시다. ]

※ title : 링크에 마우스를 위에 올려두면. 나오는 설명 

 

 

 

 

2. <div> 태그 : 전시간에도 말씀드렸듯이 제일 많이 사용하고 대표적인 블록요소이기때문에 레이아웃을 구성할때

                    무조건 사용합니다.

                    제일 범용적으로 사용되기 때문에. 연습 진짜 많이 하셔야 합니다. 

                    [ 지금은 아닙니다. CSS를 배워나갈때 부터 본격적으로 많이 사용 할껍니다. ]

 

저번글에 설명드렸죠? 블록 요소는 인라인 요소들을 포함시킬수 있다고.

 

 

요렇게 포함 시킬수 있습니다.

 

3. <span> 태그 : 대표적인 인라인 요소를 가지고 있는 태그죠. 요놈도 정말 많이 쓰이죠.

 

 

위의 예제를 보시면 인라인요소가 강제로 블록요소를 포함시키려고 하니 레이아웃이 완전 개박살 났죠?

인라인요소는 블록요소를 하위로 둘수 없다는점 다시 한번 기억하고 갑시다.

 

4. <table> 태그 : 엑셀에서 테이블 만들어서 표같은거 만들어보셨죠...? 그럴때 쓰입니다.

                       이놈은 나중에 따로 설명해드리겠습니다.

                       예제는 올려두겠습니다. 한번 보셔도 좋습니다.

 

5. <input> 태그 : 인터넷에서 회원가입할때 이름을 입력하세요. 뭐 .. 나이를 입력하세요 이런 쓰는창있죠?

                       보통 그럴때 많이 쓰입니다. 물론 input 태그의 type 속성에 쓰는 속성값에 따라 다르게 표현되는

                        태그 입니다.  예제를 보시면 조금 더 이해가 쉬울것 같네요.

 

 

오늘 좀 길었네요. 

 

다들 많이 쓰시는 태그는 정해져있을거라 생각됩니다.

 

사실 전 a태그 잘안써요.. 근데 진짜 기본이라서 저기에 넣어둔겁니다.. a태그의 기능을 그냥 div에 만들어서

자바스크립트 를 만져서 구현합니다.

 

궁금한거 있음 댓글로 물어보세요 !