HTML 5 (12) 썸네일형 리스트형 <select>, <textarea> : 여러 줄 데이터 보여주기 1. 태그 : 드롭 다운 태그는 기본적으로 하나를 선택한다는 점에서 radio 과 비슷하다. 가장 큰 차이점은 radio 는 선택지가 많아질수록 페이지에서 공간 차지를 그만큼 많이 하게 되지만, select 태그는 한 줄에서 드롭다운을 통해 공간 차지를 덜하게 된다는 점이다. 내용 1 내용 2 내용 3 기본적으로 하나만 선택이 가능하지만 multiple 속성을 추가하면 다중 선택이 가능해진다. 또한 multiple 속성을 추가하면 size 속성을 함께 사용할 수 있는데, 드롭 다운 메뉴의 선택지를 한 번에 몇 개 보일 것인가를 조정할 수 있다. 내용 1 내용 2 내용 3 내용 4 내용 5 내용 6 📌 다중 선택 연속된 선택지를 여러 개 선택하기 위해서는 [shift] 키를 누르면서 선택하면 되고, 연속되.. <input> 태그 속성 1. name, id, class 속성 이 속성들은 일종의 이름을 지을 수 있다는 점에서 공통점을 갖고 있지만, 제각기 사용하는 목적이 상이하기 때문에 그 차이를 알고 사용해야 한다. name 속성의 경우 일종의 파라미터로 사용되는 값으로 이에 해당하는 이름으로 서버에 값이 넘어간다는 특징이 있다. 예를 들어 다음과 같은 코드가 있다고 해보자. 이렇게 나타난 텍스트 상자에 "안녕하세요"를 작성해서 submit 하게 되면 그 값은 다음과 같이 서버로 넘어간다. text=안녕하세요 서버로 넘어가는 때에 사용하기 때문에 사용 가능한 곳도 제한적이다는 특징이 있다. name 속성의 특징 1️⃣ name 속성에 부여한 이름으로 파라미터가 서버 측으로 넘어 간다. 2️⃣ 사용 가능한 태그가 제한적이다. (a 태그,.. <label> : <input> 에 이름(라벨) 붙이기 태그를 사용하면 의 요소인 등에 명시적으로 이어져 있음을 브라우저에 알릴 수 있다. 이름에서도 알 수 있듯이 라벨링을 생각하면 쉽다. 방법은 두 가지가 있다. 첫 번째는 위치상으로 라벨과 input 이 서로 연관이 있음을 알려주는 것이고, 두 번째는 라벨이 어느 input 을 위한 것인지 명시적으로 알려주는 것이 있다. 🔷 라벨 아이디 : 🔷 라벨 아이디 : 화면상으로는 첫 번째 방법과 두 번째 방법의 차이가 드러나지는 않지만, 두 번째을 사용하면 이 둘의 위치가 떨어지더라도 id 값으로 찾아갈 수 있기 때문에 쉽게 연결할 수 있다는 장점이 있다. 또한 라디오 필드와 체크박스 필드에서도 유용하게 사용할 수 있는 것이 바로 이 라벨 필드이다. 기존의 라디오 필드와 체크박스 필드는 반드시 해당하는 사각형 또.. <form>, <input> : 폼 만들기 1. 만들기 태그의 기본형태와 속성은 다음과 같다. 여러 가지 폼 요소 속성 설명 method 사용자가 입력한 정보를 서버에 어떤 방식으로 넘겨줄 것인지 설정한다. 속성 값 get : 주소 표시줄에 입력 정보가 보인다. 때문에 256 ~ 4096 byte 까지 데이터 크기가 한정된다. post : 사용자의 입력 정보를 보이지 않아 get 방식에 비하여 보안성이 크다. 또한 크기에 제한을 받지 않는다는 특징이 있다. name 폼 태그를 구분하기 위한 이름 지정 action 폼 태그 안의 내용을 처리할 서버 프로그램을 지정(ASP, PHP, JSP 등) target 현재 창이 아닌 다른 위치에 열리도록 설정 autocomplete 자동 완성 기능(속성 값 : on, off) 보안이 필요한 정보에는 off 설.. <map> 활용 : 이미지 맵 좌표(이벤트 페이지 만들기) 1. 이미지 맵이란? 하나의 이미지에 여러 개의 링크를 만드는 것을 말한다. 2. 이미지 맵의 좌표 알아내기 : 원의 중심, 원의 반지름 이미지의 특정한 좌표는 그림판을 통해 쉽게 알아낼 수 있다. 좌표를 알아내고자 하는 이미지 파일을 그림판으로 열어보자. 1️⃣ 원의 중심 : [선택]을 누르고 원의 중심에 마우스를 가져가서 좌표를 알아낸다. 2️⃣ 원의 반지름 : [선택]을 누르고 원을 감쌀만큼 영역을 선택 이를 통해 대략 원의 반지름은 50px 정도라는 것을 알 수 있다. 3️⃣ 좌표 적용하기 : 태그 활용 먼저 이미지 맵 대상이 되는 이미지를 태그에 삽입한다. 태그를 사용할 것이기 때문에 맵의 이름을 함께 명시한다. 그 다음 태그를 설정한다. 👉 shape 속성 : map 으로 묶은 범위의 모양을 .. <img> : SVG 이미지 삽입하기 1. SVG 파일 형식이란? SVG 는 Scalable Vector Graphics 즉 확대 가능한 벡터 그래픽이다. 기존의 gif, jpg/jpeg, png 파일은 비트맵 방식의 이미지(bitmap image) 로, 이를 확대를 하면 이미지가 일명 깨진다는 느낌을 받을 수 있었다. 하지만 SVG 이미지는 확대하더라도 깨지지 않는다는 특징이 있다. 이처럼 기존의 이미지 파일보다 확대 또는 축소 시에도 선명하게 활용할 수 있는 SVG 를 선호하게 되었다. SVG 는 시각적으로 중요한 이미지에 많이 사용되는데, 예를 들어 로고, 차트, 그래프 지도 등을 구현할 때 많이 적용된다. 복잡한 데이터를 표현한 이미지를 참고할 수 있는 사이트는 다음과 같다. 1️⃣ d3.js (http://d3js.org/) 2️⃣.. <a> : 링크 만들기 1. href 속성 : 링크 주소 태그의 링크를 통해 넘어갈 다른 문서나 사이트를 href 속성을 통해 지정해 준다. 1. 텍스트 링크 : naver 2. 이미지 링크 : 2. target 속성 : 새 탭에서 링크 열기 속성 값 설명 _blank 링크 내용이 새 창이나 새 탭에서 열린다. _self target 기본값, 링크를 누르는 해당 화면에서 열린다. _parent 프레임을 사용했을 때, 링크 내용이 부모 프레임에서 열린다. _top 프레임을 사용했을 때, 링크 내용이 프레임에서 벗어나서 열린다. parent 웹문서가 위와 같을 때 기본값으로 링크를 열게 되면, 저 사각형 안에서 링크 내용이 나타나게 된다. 그 아래 링크의 _top 속성으로 열게 되면 전체 화면으로 표현된다. 📌 _parent 과 .. <img> : 이미지 삽입하기 이미지는 저장 위치에 따른 경로 지정이 조금 차이가 있다. 1. src 속성 : 내 컴퓨터의 이미지 파일 경로 지정 내 컴퓨터에 저장된 이미지 파일인 경우에 그 경로를 지정하기 위해서는 이미지 파일이 저장된 위치 파악이 중요하다. 👉 웹문서 파일과 이미지 파일이 같은 위치에 있을 경우 이 경우는 간단히 이미지 파일 명을 img 태그의 src 속성에 써 주기만 하면 된다. 예를 들어, index.html 웹문서 파일과 같은 위치에 dog.jpg 이미지 파일이 있다면 위와 같이 표현하면 된다. 👉 이미지 파일이 웹문서 파일의 하위 문서에 있을 경우 만약 index.html 웹문서 파일이 있는 폴더 안에 이미지만 따로 관리하는 images 라는 파일이 있다고 가정해보자. 위와 같이 하위 폴더명을 써주고 /를 .. 이전 1 2 다음
