[웹] HTML/CSS #5 :: HTML 기본 태그와 속성

지난 번에 실습에서 사용한 태그는 아래와 같다. 이번 포스팅에서는 아래 태그들의 기능과 그 속성에 대해서 알아본다. 물론 추가적으로 몇몇 자주 사용되는 주요 태그와 그 속성에 대해서도 알아볼 것이다.

<h1>HTML 실습</h1> <h3>정말 쉬운 실습</h3> <p>이건 진짜 시작이 반이다</p> <a href="#" target="_blank">네이버로 가자</a>

1.<h1> ~ <h6> 태그

위의 태그 중 <h1>과 <h3>을 보면 <h2>도 있음을 생각할 수 있다. 나아가 잘은 모르겠지만 <h4>나 <h5>, <h100>까지도 있지 않을까 유추할 수 있다. 맞다. <hn> 태그는 <h1>부터 <h6>까지 있다. 그럼 이 <hn> 태그는 무엇일까. h는 아마 headline의 약자일 것이다. 정확히는 모르겠지만 아마 맞을 거다. 헤드라인, 즉 제목이다. 즉 문서 내에서 제목을 표시해주는 태그다. 그럼 뒤의 숫자는? 크기다. <h1>이 가장 크고 <h6>이 가장 작다. 직접 알아보자. 에디터를 켜고 다음 코드를 적는다.

<h1>Lorem ipsum</h1> <h2>Lorem ipsum</h2> <h3>Lorem ipsum</h3> <h4>Lorem ipsum</h4> <h5>Lorem ipsum</h5> <h6>Lorem ipsum</h6> <h7>Lorem ipsum</h7>

태그 안에 적힌 Lorem ipsum이란 아무 의미없다. 보통 테스트 페이지에 넣을 의미없느 문구로 자주 쓰이는 말이다. 라틴어처럼 생기긴 했는데 잘은 모르겠다. 에디터에 태그를 적었으면 html 형식으로 저장하고 크롬, 익스플로러 등의 웹 브라우저로 연다. Brackets을 쓸 경우에는 라이브 미리보기(번개 모양 버튼)을 눌러도 된다.

총 7개의 Lorem ipsum 헤드라인을 확인할 수 있다. 맨 위가 가장 굵고 크며 6번째가 가장 작고 가늘다. 그리고 7번째는 갑자기 규칙성을 잃는다. 왜? 앞서 말했듯이 <hn>태그는 1~6까지 밖에 없다. 즉 <h7> 태그는 존재하는 태그가 아니다. 브라우저가 이 태그는 무시하고 내부의 Lorem ipsum만 텍스트로 인식해 표시한 것이다. 이 다음에 설명할 <p> 태그와 같은 크기와 굵기를 갖는다.

2. <p> 태그

<p>에서 p는 paragraph의 약자다. 즉 단락, 문단을 만들어주는 태그다. <p> 태그 내부에 들어간 텍스트는 하나의 문단을 이룬다. 보통 컴퓨터로 엔터를 치면 문단이 바뀐다. 이 때 실제로는 <p> 태그 하나를 닫고, 새로운 <p> 태그를 만들었다고 보면 된다. 앞서 작성한 코드 아래에 다음 태그를 적어넣는다.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis accusamus impedit quam ratione illo quod, ipsum dolore dolor laboriosam voluptas sunt nostrum, facilis natus. Pariatur optio, harum vel ipsa delectus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis tempore, quisquam corrupti quos repudiandae assumenda consequatur harum cum architecto deserunt neque voluptates iste voluptate laudantium dolorem eius ratione molestias. Ad!</p>

에디터 상에서 보면 위와 같다. <p> 태그에 적힌 문구는 역시 아무 의미없다. 내 에디터에서는 플러그인을 깔아서 Lorem이라고 치고 탭 키만 누르면 저렇게 자동적으로 길고 의미없는 문장을 생성해준다. Brackets를 쓰는 사람들은 확장 프로그램 관리로 들어가 Lorem ipsum을 검색하면 나올 것이다. 다른 에디터를 쓰더라도 비슷한 플러그인이 있을 것이다. 그리고 그냥 아무 데서나 아무 문장이나 긁어와도 상관없다. 그럼 다시 저장을 하고 브라우저를 새로고침한다. 라이브 미리보기를 쓰면 저장만 하면 알아서 새로고침이 되어 있다.

위의 7개 Lorem ipsum 아래에 문단 두 개가 생겼다. 첫번째 문단과 두번째 문단 사이가 먼 것으로 서로 다른 문단임이 구분된다. 이 <p> 태그가 웹 상에서의 기본 텍스트로 사용된다. 지금 보는 이 블로그의 본문도, 뉴스 기사도, 게시판의 글도 <p> 태그로 구성되어 있다. 여기에 CSS를 이용해 폰트를 바꾸거나 크기, 굵기, 색깔 등을 조절할 수 있을 뿐 기본은 이렇다.

3. <a> 태그

<a> 태그는 하이퍼링크를 만들어준다. 마우스로 클릭하거나 손가락으로 터치할 때 페이지를 바꿔주는 바로 그거. 이전 4편에서 이미 실습했듯이 '네이버로 가자'를 클릭하면 네이버 페이지로 이동한다. 오프닝 태그 <a>와 클로징 태그 </a> 사이에 링크를 걸어주고자 하는 텍스트나 이미지 등을 넣어주고 속성으로 이동하고자 하는 위치의 주소를 연결해주면 된다. 참고로 <link>라는 태그는 따로 있다. 다른 기능을 갖고 있으니 우리가 일반적으로 생각하는 링크는 <a> 태그임을 염두하자. 그럼 <a> 태그의 사용법을 알아보자. 에디터의 <p> 태그 아래에 다음 코드를 입력한다. # 자리에는 적절한 url 주소를 입력해주면 된다.

<a href="#" target="_blank"> <img src="#"> </a>

오프닝 태그 <a>와 클로징 태그 </a> 사이에 <img> 태그가 들어있는 꼴이다. 속성과 거기 입력된 주소 때문에 복잡해 보일 수 있지만, <a><img></a>의 형태다. 지난 번에 태그는 오프닝 태그와 클로징 태그가 있다고 했는데, 가끔 단독으로 쓰이는 태그가 있다. <img>는 그 중 하나. 다시 이걸 저장하고 브라우저를 새로고침하면 아래 이미지처럼 뜰 것이다.

<p> 태그의 문구 아래에 다음 로고 이미지가 보인다. 저 이미지를 클릭하면 새 창 또는 새 탭이 열리면서 다음 메인 페이지로 이동하는 걸 확인할 수 있다. 쓰다보니깐 너무 길어졌다. <a> 태그와 <img> 태그에 딸린 속성에 대한 설명은 다음 포스팅에서 이어서 해야겠다.