안녕하세요. 필투스의 소프트웨어세상입니다.
지난 시간에는 html 의 기본 문법에 대해 알아보았는데요. 오늘은 다음단계로 하이퍼텍스트와 속성에 대해 알아보도록 하겠습니다.
1강에서 말씀드렸다시피 html은 기본 원리만 알면 전혀 어렵지 않기 때문에 html을 배워볼까 망설이셨던 분들은 고민하지 마시고 공부하시기 바랍니다. 배움은 피가 되고 살이되며 결국 나에게 돌아옵니다. 또 30분만 집중해도 배울수 있을정도로 html 은 쉽습니다!
혹시라도 아직 1강을 보지 못하셨다면 아래 포스팅을 먼저 보시기를 권해드립니다.
2017/10/18 - [html 강좌] - 30분만에 html 공부 끝내기 강좌 1부 - 기본 문법 이해
그럼 2부 하이퍼텍스트와 속성 들어가 볼게요~
30분만에 html 공부 끝내기 강좌 2부 - 하이퍼텍스트와 속성
지난시간에는 html의 가장 기본문법이자 중요한 태그라는 문법을 살펴보았는데요.
<strong></strong>, <h2></h2> 같은 것을 태그라고 합니다.
태그보다 조금 더 복잡한 문법이 있는데 바로 속성이라는 문법입니다.
속성까지 배우게 되면 html의 문법은 완전히 마스터하는 것입니다.
바로 이 속성과 하이퍼텍스트라는 html에서 가장 중요한 기능을 배우는 것이 이번 강좌의 목표라고 할 수 있습니다. 하이퍼텍스트 즉 링크에서 속성이 어떻게 쓰이는 것인지 살펴봅시다.
1. 하이퍼텍스트 (hyper text)
하이퍼텍스트는 쉽게 말해 링크를 거는 것입니다. 링크를 걸고자 하는 지점에 태그를 달아 다른 페이지로 연결하는 것이죠.
링크는 <a></a>태그로 지정해줍니다.
여기서 a는 anchor (돛)약자입니다. 즉 이 문자는 이 url에 연결되어 있다는 뜻입니다.
<예시>
메모장을 열어 지난번에 테스트했던 문장을 불러오기하겠습니다. 여러분도 아무 문장이나 따라해보세요.
필투스의 블로그에 링크를 걸어주기 위해 <a></a>라는 링크 태그를 넣어주었습니다.
결과값을 볼까요?
<a></a>태그를 지정했는데 링크가 없습니다. 이유는 이 태그만으로는 부족하기 때문입니다. 링크의 주소 즉, 속성을 넣지 않았기 때문인죠. 속성은 이럴때 쓰이는 것입니다.
2. 속성
속성은 href=" " 로 지정해 줍니다.
말로 들으면 어렵게 느껴집니다만, 예시를 한 번 해보시면 쉽게 이해가 가실거예요.
<예시>
다시 메모장으로 돌아가서 <a>를 <a href="링크주소">로 수정해주도록 하겠습니다.
링크주소는 ctrl+C로 복사 후 ctrl + V 로 붙여넣기 하시면 됩니다.
웹페이지를 새로고침해서 결과값을 보도록 하겠습니다.
좀전과는 다르게 필투스의 블로그 단어가 파란색으로 바뀐것이 보이시죠? 밑줄도 있고요. 이 단어를 클릭하면 링크된 페이지가 열립니다. 저는 제 블로그 주소를 링크해놓았으니 제 블로그가 열립니다.
여러분도 바뀐 단어를 클릭해서 확인해 보시고요.
<예시>
이때 현재의 웹 페이지는 그대로 두고 링크를 클릭시 새 페이지가 열리게 하고 싶다면 링크 뒤에 또 다른 속성을 달아주면 됩니다.
새창으로보기는 <a 다음에 target="_blank" 를 넣어주면 됩니다.
위와 같이 target="_blank" 를 넣어줍니다. 결과값을 확인해 보세요. 새창에서 페이지가 열리는 것을 확인가능합니다.
이처럼 속성은 이름에 따라 그 기능이 정해져 있으며 태그만으로 부족한 부분을 지정해 주는 기능을 합니다.
하나의 태그에 여러개의 속성을 지정해 줄 수 있으며 순서는 상관없습니다. href속성이 먼저 나와도 되고, target이 먼저 나와도 됩니다. 속성을 이용하면 여러가지 기능이나 의미를 연속적으로 달아줄 수 있는 것이죠.
오늘은 하이퍼텍스트와 속성에 대해 알아보았는데요. 어려우신가요? 어렵지않기를 바라면서..
다음시간에는 더 유익한 html 강좌를 통해 찾아뵙도록 하겠습니다~ 마칩니다.
