HTML 시작하기 / 기본 개념 및 태그 학습하기(2) / font, div, a, img
이번에는 태그 안에서 사용하는 태그를 살펴보겠습니다. (1)에서 <p></p>는 단락을 표현해준다고 배웠는데, 그럼 그 안에 문자열을 넣을 때 부분적으로 고쳐주고 싶다면 어떻게 태그를 활용해서 고쳐줄 수 있는지를 살펴보겠습니다.
1. 폰트 요리조리 바꿔보기
<p> 안녕하세요? </p>
<p><b>즐거운 </b>하루 되세요</p>
<p><strong>건강이! </strong>최고입니다</p>
제일 첫 줄은 아무것도 태그를 넣지 않은 단락이고, 두 번째와 세 번째는 <b>태그와 <strong>태그를 사용하였습니다. 두 개 다 굵은 글씨로 나오고 큰 차이가 없는 것 같은데 왜 이름은 다른걸까요? 보이기에는 비슷한 것 같지만 하는 일은 완전히 다르다고 볼 수 있습니다. 일단 <b>태그는 bold의 약자로 단순하게 글자를 부각시켜주는 역할만 합니다. 그런데, <strong>태그는 글자를 강조할 뿐만 아니라 실제로 페이지 내에서 이 부분이 중요하다고 브라우저에게 알려주는 신호수 역할 역시 함께 합니다. 보여지기엔 똑같지만, <strong>태그가 하는 일이 더 많다고 볼 수 있는 것이죠. 비슷한 예로 italic과 em이 있습니다. 다음 예제를 함께 볼까요?
<p><i>이탈리아 </i>피자 맛있어요</p>
<p>언젠가는 <em> 여행을 </em> 갈 수 있겠죠?</p>
이것도 역시나 두 개 다 흘림체로 적힌 것은 동일하게 보입니다. 그러나 첫 번째 italic은 말 그대로 흘려서 쓰는 효과만 주는 것이고 두 번째 <em>은 <emphasized>의 줄임말으로 강조하는 역할을 합니다. 예를 들어 웹사이트의 글을 읽어준다고 가정했을때, <strong>태그와 <em>이 붙어있는 단어는 더 세게 말해주도록 하는 것이죠.
<p>다들 여기에 <mark> 집중 </mark> 해주세요 <p>
<p>이 문장은 <del> 삭제 </del> 했습니다</p>
형광펜 효과를 줄 때는 <mark> 태그를 활용하고, 지운 것처럼 글자 위에 줄을 그으려면 <del>태그를 활용합니다.
<p>이것은 <sub> 아래첨자 </sub>입니다</p>
<p>이것은 <sup> 위첨자 </sup>입니다</p>
<p>이산화탄소는 CO <sub>2</sub>입니다</p>
<p>10의 2승은 10<sup>2</sup>입니다</p>
아래첨자와 위첨자는 각각 <sub>, <sup>으로 표현합니다. 그냥 봐서는 딱히 쓸 곳이 있나? 싶지만 예를 들어 이산화탄소를 화학식으로 표현하고 싶다할 때 , co2이렇게 표현하는 것보다는 2는 살짝 작게 아래첨자로 만들어주면 더 가독성이 좋아지겠죠? 위첨자도 마찬가지입니다~
2. 속성과 특성 구분하기
<태그명 속성1 = "값" 속성2 = "값"> 문자열 </태그명>
속성 == attribute, 변경되지 않고 지정된 것만 사용함
<태그명 속성 = "특성 : 값"> 문자열 </태그명>
특성 == property, 선택할 수 있음 / 추가해도 되고 안 해도 됨
예를 들어 첫 번째처럼 <p align = "center"> 안녕하세요 </p> 이렇게 쓰면 중앙으로 정렬한다는 것뿐 우리가 왼쪽부터 얼마나 떨어져있고, 오른쪽에서는 얼마나 떨어지게 해주세요 라고 지정하지 않은 것입니다. 이때 우리는 속성을 변경해준 것입니다. 그런데 만약 그 속성의 특성을 지정해준다면 그것은 우리가 바꿀 수 있습니다. 예를 들어 <font style = "color : blue"> 이렇게 쓰면 style이라는 속성의 color특성을 바꿔준 것이 됩니다.
3. <division><div> 태그로 틀 잡아주기
<div align = "center">
<font size = "5">font tag</font>
<h3>h3 tag입니다</h3>
<p> p tag입니다.</p>
</div>
align은 정렬해주는 것인데, 위에서 보면 center로 되어 있는 것입 보입니다. 만약 위의 세 줄을 <div></div>로 묶어주지 않았다면 하나하나 다 align = "center"를 해줬어야 할 것입니다. 그러나 하나의 디비전으로 묶어서 처리를 하기 때문에 한 번만 적어줘도 세 줄이 모두 중앙으로 정렬되는 것을 볼 수 있습니다.
<div style = "border-style : solid; border-color : blue; margin-left : 20px;
padding-top : 30px; background-color : #ffff00"; align = "center">
<h1>이것은 제목입니다</h1>
<p>여기는 내용입니다</p>
</div>
이번에는 하나의 division에 여러가지 스타일을 걸어주겠습니다. border-style은 solid, border-color는 파란색, margin-left는 20px, padding-top은 30px, background-color는 #ffff00, 여기서 눈에 익지 않은 단어가 보이시나요? 사실상 배경색 빼고는 모두 다 생소하게 느껴지는데요. 먼저 border-style부터 보겠습니다.
위에서는 border-style을 solid로 해서 굵은 선을 나타냈는데 , 위와 같이 다양한 모양으로 만들 수 있다고 합니다.
위의 사진을 보면 우리가 내용을 적는 부분이 content이고 그것을 감싸고 있는 세 겹이 있습니다. padding, border, margin이 바로 그것입니다. 위에서 이것은 제목입니다 윗부분이 상당히 들떠있는게 보이시나요? 그것은 바로 padding-top을 30px로 잡아서입니다. 그리고 margin-left가 20px로 되어있어서 쭈우욱 늘어난 모양인데 만약 두 가지 모두 1px로 잡는다면 어떻게 변할까요?
사실 margin-left의 경우에는 가장 바깥 부분이기 때문에 현재 캡쳐상으로는 확인이 어렵습니다. 그런데 padding-top은 확실히 좁아진게 눈에 보이죠? 여기서 중요한 것은 이 모든게 <div>태그로 묶여서 한 번에 덩어리로 처리가 됐다는 점입니다.
4.<anchor><a>태그로 링크 걸어주기
<a href = "http://www.google.com">구글로 현재창에서 이동</a>
<a href = "http://www.google.com" target = "self">구글로 현재창에서 이동</a>
<a href = "http://www.google.com" target = "blank">구글로 새창에서 이동</a>앵커라는 단어는 닻이라는 뜻도 가지고 있죠? 닻을 던진다고 생각하면 이해가 쉬울 것 같습니다. href는 hypertext reference의 줄임말으로 연결할 주소를 이 다음에 적어줘야 합니다. 한 가지 주의할 점은 인터넷 브라우저 주소창 상에서는 https://가 없어도 구글이 잘 열리는 <a>태그는 hypertext를 참조값으로 받아서 연결하기 때문에 https://를 꼭 써줘야 합니다. 그렇지 않으면 다른 서버로 연결해야함을 파악하지 못하고 계속해서 현재 로컬호스트 서버에서 구글의 주소값을 찾아 파일 경로를 계속 탐색하는 셈이 됩니다. target을 아예 적지 않거나, target을 "self"로 적어주면 현재창에서 구글의 메인 페이지가 뜨고, target을 "blank"로 적으면 새 창에서 구글이 열리게 됩니다.
5.<image><img>태그로 사진 올리기
글만 올리기가 너무 삭막하고 지루해서 사진도 올리고 싶은데, 그런 경우에는 이미지를 어떻게 올려야할까요?
<img alt = "이미지가 없습니다." src = "images/hello.JPG">
<img alt = "" src ="images/hello.JPG">
<img src ="images/hello.JPG">이미지 파일이 WebContent 폴더 안에 잘 들어있다는 가정하에, 위의 세 개는 똑같은 결과를 나타냅니다. alt는 alternate의 약자로, 대체한다는 뜻인데 만약 이미지가 없는 경우에는 다음과 같이 저 문구가 나타나게 됩니다.
위의 hello는 잘 출력된 케이스이고, 두 번째의 경우에는 지정한 파일 경로에 해당 파일이 없어 alt 문구가 출력된 것입니다. 아마 인터넷을 하면서 저런 엑스자가 그려진 네모 모양을 종종 본 적이 있을 것입니다. 주의해야 할 점은, 비록 세 번째 줄처럼 alt가 없어도 출력은 되지만 만약의 경우에 이미지 파일이 없는데도 텍스트로 해당 이미지를 긁어와버릴수도 있기 때문에, alt 문구는 꼭 적어주는 것이 좋습니다. 더불어, src는 "" 안에 있는 것으로 인식하기 때문에 파일명과 동일하게 적어줘야 합니다. 만약 파일명이 hello.JPG인데 hello.jpg로 적으면 이미지를 불러오지 못합니다. 또한 앞서 익혔던 <a>태그와 결부해서 이미지를 클릭하면 우리가 원하는 사이트로 연결을 시킬수도 있습니다.
<a href ="http://google.com">
<img alt = "이미지가 없습니다." src = "./images/hello.JPG">
</a>이렇게 해주면 hello이미지를 클릭하면 구글 사이트가 나오게 됩니다. ^^