링크, 목록, 입력하기 [노베이스 게임개발 25일차]

오늘은 링크에 대해 알아보았다.

 

링크는 현재 문서에서 다른 문서로 이동할 수 있는 수단이다.

 

링크는 a (anchor) 태그를 이용한다. 이는 url로 연결할 수 있는 링크를 만들어 준다.

 

a태그는 또 현재탭에서 열지 새로운 탭에서 열지 target속성을 이용하여 선택할 수 있다.

 

예시를 보며 더 자세히 공부해 보자.

 

 

 

먼저 a 태그는 <a href="주소"> </a>의 구조를 가지고 있다.

 

위에서 네이버와 구글로 가는 링크를 만들어 주었고 사이트에서 확인하면,

 

이렇게 두 가지 링크가 만들어진다.

 

이때 a태그 사이에 텍스트가 있지만 여러 가지 요소가 올 수 있다.

 

이미지도 가능한데 예시를 들어보면,

 

 

가지고 있는 보노보노 사진을 이용하여 오른쪽과 같이 코드를 작성하면 보노보노를 클릭 시 네이버 화면으로 이동하게 된다.

 

 

예시로 들고 있는 링크들은 모두 누르면 현재탭에서 이동하게 되는데 이는 아무 값도 적지 않았을 때 기본값인 self가 작동하기 때문이다.

이를 바꿔주기 위해 target을 사용해 예시를 만들어 보았다.

 

 

오른쪽 코드를 보면 네이버는 target="_self"로 지정해 줬고

구글은 target="_blank"로 지정해 주었다. 실제로 클릭해 보면 구글은 새창으로 열리지만 네이버는 현재 창에서 열리게 된다.

 

또한 href에 사이트 주소 외에도 전화번호나 이메일 보내기를 할 수도 있다.

 

---

 

이번에는 목록을 만들어 주는 태그에 대해 알아보자.

 

순서 없는 목록과 순서 있는 목록을 만들어 줄 수 있다. 예시를 통해 확인해 보자.

 

 

 

 

 

먼저 순서 없는 목록은 <ul></ul>을 이용하여 나타낸다. 그런 다음 <li></li> 태그를 이용해 목록을 추가해 준다.

다음 순서 있는 목록은 <ol></ol>을 이용하고 똑같이 <li></li> 태그를 이용해 목록을 추가해 준다.

 

이때 이 태그들은 블록 요소이다. 그래서 각 목록들에 mark나 strong 같은 인라인 텍스트 태그를 이용할 수 있다.

 

 

 

 

 

그림에서와 같이 순서 없는 목록과 순서 있는 목록이 출력되었고,

strong 표시를 한 고양이와 mark표시를 한 HTML이 정상적으로 표시가 되었다.

또 ul태그가 블록요소임도 그림에 나타나고 있다. 이때 왼쪽 구간에 들여 쓰기 한 구간은 ul, ol태그의 스타일이다.

 

---

 

다음으로는 사용자로부터 입력받는 태그에 대해 공부해 보자.

<input />의 구조를 가지며 이를 출력하면 하얀색 입력할 수 있는 박스가 나타난다.

 

input에 사용하는 type속성이 있는데 20여 가지의 종류가 있다.

입력은 텍스트를 입력할 수도 있지만 클릭이나 드래그도 입력의 일종이다.

 

또한 input태그에도 식별자를 만들 수 있는데 여기에는 name식별자가 사용된다.

 

이제 예시를 보며 자세히 알아보자.

 

 

굉장히 많이 쓰여있는데 차근차근 알아보면

 

먼저 <input type="text"/> 유형이 있다. 이는 텍스트를 입력받는 속성이다. 이때 placeholder를 이용하면 입력받을 창에 미리 쓰여있는 문구를 정해줄 수 있고 maxlength를 이용하면 최대 글자수를 정할 수 있다.

 

다음으로는 button타입이 있다. 이는 눌러서 입력받는 속성이다. 다만 아무 값도 넣지 않으면 빈 박스만 출력되므로

value="문구"의 방식으로 버튼 안에 글씨를 넣을 수 있다.

 

다음은 색을 고를 수 있게 하는 color 타입이다. 여기에 따로 텍스트를 추가하고 싶다면 input 태그 다음에 p태그등으로 추가해 주면 된다.

 

다음은 range타입이다. 이것은 막대바의 형태로 바를 원하는 곳으로 이동시켜 값을 입력받는다. 이때 막대바의 최대 최솟값을 max와 min으로 단위를 step으로 지정해 줄 수 있다.

 

마지막으로 날짜를 입력할 수 있는 date 타입이다. 이를 통해 생일이나 다른 날짜를 입력받을 수 있다.

 

 

 

이미지를 보며 설명과 비교하면 이해하기 쉬울 것이다.

 

또 name 식별자를 통해 추후 코딩을 통해 각 태그들을 구분 지어 줄 수 있다.

 

 

후기 : 내일이나 모레쯤 기본적인 HTML공부가 끝날 것 같다. 일단 CSS와 Javascript를 공부한 후 이제 앱개발을 위해 Kotlin이나 JAVA를 공부하지 않을까 생각이 든다. 먼저 만들고 싶은 앱이 있어 앱개발을 진행하면서 노하우를 쌓아가고 싶다.

 

 

 

 

*본 포스팅은 학생의 입장에서 쓴 글로 정확하지 않을 수 있으며 댓글로 피드백해 주시면 감사하겠습니다.

클래스 101 유노코딩님의 강의를 통해 학습한 내용을 기반으로 두고 있습니다.