티스토리 뷰
오늘은 <input>태그, <a>태그, <ul>를 활용해 보겠습니다.
우선 우리가 만들 것을 미리 사진으로 살펴볼까요?
제목 밑에 검색창이 있고, 그 밑에 제 강의가 리스트로 나타나 있습니다. 각 리스트는 클릭하면 제목에 맞는 강의로 이동하고, 마지막엔 구글로 바로 이동할 수 있게 만들었습니다. 소스 코드는 아래와 같이 되어있습니다.
<!DOCTYPE html> <html> <head> <title>예시 2번</title> </head> <body> <h2>레몬캔디의 강의 검색</h2> <input type="text" placeholder="찾으시는 것을 검색하세요." /> <button>검색</button> <ul> <li><a href="http://justmakeyourself.tistory.com/entry/show-file-extension" target="_blank">파일 확장명 표시</a></li> <li><a href="http://justmakeyourself.tistory.com/entry/html-basic" target="_blank">HTML 입문</a></li> <li><a href="http://justmakeyourself.tistory.com/entry/html-explanation" target="_blank">HTML 보충설명</a></li> <li><a href="http://justmakeyourself.tistory.com/entry/basic-tag-practice" target="_blank">HTML 속성값 바꾸기</a></li> </ul> <p>찾으시는게 없다면 <a href="https://google.co.kr">구글</a>로 이동해서 검색해 보세요</p> </body> </html>
소스코드를 보면서 하나씩 배워볼까요?
우선은 <h2>태그가 나오지만, 지난 시간에 <h1>에서 <h6>태그는 이미 배웠으니 바로 <input>태그로 넘어가겠습니다.
<input>태그는 사용자가 정보를 입력할 수 있는 입력창을 보여주는 태그입니다. 속성에 타입을 "checkbox", "radio", "password" 등으로 바꾸면 다양한 형태의 입력창을 볼 수 있습니다. 우선은 타입을 "text"로 설정해서 사용자가 글을 입력할 수 있게 만들었고, placeholder 속성은 제가 설정한 값을 사용자가 입력하기 전에 미리 나타나게 만들어 줍니다.
<input>태그의 활용도는 아주 높습니다. 회원가입, 검색, 로그인 등 유저들의 데이터를 받을 일이 아주 많기 때문이죠.
<button>태그는 클릭할 수 있는 버튼을 만들어 줍니다. 저는 태그 사이에 "버튼"이라는 텍스트를 넣었지만 다른 텍스트나 이미지를 넣으셔도 버튼으로 사용 가능합니다. (지금은 아무 기능도 넣지 않았기 때문에 그냥 클릭만 가능합니다.)
<ul>태그는 순서가 없는 리스트의 묶음을 보여줍니다. unordered list를 줄여서 ul이라고 사용하고 있습니다. 그리고 각 리스트는 <li>태그 안에 적혀 있어야 합니다. (li는 당연히 list를 줄인 것입니다.) 그럼 순서가 있는 것은 어떻게 표현할까요 ?
<ol> <li>첫번째</li> <li>두번쨰</li> <li>세번째</li> </ol>
<ol>태그에서 ol은 ordered list를 줄여 쓴 것입니다. 참 쉽죠 ?
순서가 있으면 <ol>, 없으면 <ul> 그리고 모든 리스트는 <li>태그로 감싼다는 것을 기억하세요.
드디어 가장 중요한 <a>태그를 배울 시간입니다. <a>태그는 한 페이지에서 다른 페이지로 넘어 갈 수 있게 만들어 주는(이것을 하이퍼 링크라고 합니다.) 태그입니다. <a>태그로 텍스트나 이미지를 감싸고 href 속성을 원하는 링크값으로 주면 그 주소에 맞는 곳으로 이동합니다. 꼭 다른 페이지가 아니라 한 페이지 내에서도 움직일 수 있습니다. 아래의 예시를 눌러보세요.
이 텍스트가 또 다른 예시입니다. 누르면 글의 맨위로 이동합니다.(pc만 가능합니다.)
href 속성 값에 "#"을 넣으면 페이지의 맨 위로도 이동할 수 있습니다. 그리고 이동 시에 "새 창"을 띄울지 "현재 창"으로 이동할 지를 정하는 속성이 target입니다. 값으로 "_blank"를 주면 새 창을 띄우고 "_self"를 주면 현재 창으로 이동합니다. 속성값을 정하지 않았다면 기본값인 "_self"로 지정됩니다. <a>태그의 속성 값들을 다르게 바꿔보면서 연습해보세요!
오늘 수업은 여기까지 입니다.
html에 대해서 다음 시간에도 조금 더 배운 다음에 투박한 모습의 예시들을 좀 더 깔끔하게 꾸미기 위해 CSS 수업을 진행하도록 하겠습니다 ^-^
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| CSS 소개와 CSS 선택자 (6) | 2017.12.18 |
|---|---|
| <div>태그와 <span>태그에 id와 class 속성 주기 (0) | 2017.12.14 |
| 기본 태그 설명 및 속성값 바꾸기 (0) | 2017.12.12 |
| HTML태그 보충 설명 (6) | 2017.12.07 |
| HTML 입문 (0) | 2017.12.06 |