티스토리

MUKOM_PARK

검색하기

블로그 홈

MUKOM_PARK

mukom-park.tistory.com/m

mukom 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

<select>, <textarea> : 여러 줄 데이터 보여주기 1. 태그 : 드롭 다운 태그는 기본적으로 하나를 선택한다는 점에서 radio 과 비슷하다. 가장 큰 차이점은 radio 는 선택지가 많아질수록 페이지에서 공간 차지를 그만큼 많이 하게 되지만, select 태그는 한 줄에서 드롭다운을 통해 공간 차지를 덜하게 된다는 점이다. 내용 1 내용 2 내용 3 기본적으로 하나만 선택이 가능하지만 multiple 속성을 추가하면 다중 선택이 가능해진다. 또한 multiple 속성을 추가하면 size 속성을 함께 사용할 수 있는데, 드롭 다운 메뉴의 선택지를 한 번에 몇 개 보일 것인가를 조정할 수 있다. 내용 1 내용 2 내용 3 내용 4 내용 5 내용 6 📌 다중 선택 연속된 선택지를 여러 개 선택하기 위해서는 [shift] 키를 누르면서 선택하면 되고, 연속되.. 공감수 0 댓글수 0 2022. 10. 17.
<input> 태그 속성 1. name, id, class 속성 이 속성들은 일종의 이름을 지을 수 있다는 점에서 공통점을 갖고 있지만, 제각기 사용하는 목적이 상이하기 때문에 그 차이를 알고 사용해야 한다. name 속성의 경우 일종의 파라미터로 사용되는 값으로 이에 해당하는 이름으로 서버에 값이 넘어간다는 특징이 있다. 예를 들어 다음과 같은 코드가 있다고 해보자. 이렇게 나타난 텍스트 상자에 "안녕하세요"를 작성해서 submit 하게 되면 그 값은 다음과 같이 서버로 넘어간다. text=안녕하세요 서버로 넘어가는 때에 사용하기 때문에 사용 가능한 곳도 제한적이다는 특징이 있다. name 속성의 특징 1️⃣ name 속성에 부여한 이름으로 파라미터가 서버 측으로 넘어 간다. 2️⃣ 사용 가능한 태그가 제한적이다. (a 태그,.. 공감수 0 댓글수 0 2022. 10. 14.
<label> : <input> 에 이름(라벨) 붙이기 태그를 사용하면 의 요소인 등에 명시적으로 이어져 있음을 브라우저에 알릴 수 있다. 이름에서도 알 수 있듯이 라벨링을 생각하면 쉽다. 방법은 두 가지가 있다. 첫 번째는 위치상으로 라벨과 input 이 서로 연관이 있음을 알려주는 것이고, 두 번째는 라벨이 어느 input 을 위한 것인지 명시적으로 알려주는 것이 있다. 🔷 라벨 아이디 : 🔷 라벨 아이디 : 화면상으로는 첫 번째 방법과 두 번째 방법의 차이가 드러나지는 않지만, 두 번째을 사용하면 이 둘의 위치가 떨어지더라도 id 값으로 찾아갈 수 있기 때문에 쉽게 연결할 수 있다는 장점이 있다. 또한 라디오 필드와 체크박스 필드에서도 유용하게 사용할 수 있는 것이 바로 이 라벨 필드이다. 기존의 라디오 필드와 체크박스 필드는 반드시 해당하는 사각형 또.. 공감수 0 댓글수 0 2022. 10. 8.
<form>, <input> : 폼 만들기 1. 만들기 태그의 기본형태와 속성은 다음과 같다. 여러 가지 폼 요소 속성 설명 method 사용자가 입력한 정보를 서버에 어떤 방식으로 넘겨줄 것인지 설정한다. 속성 값 get : 주소 표시줄에 입력 정보가 보인다. 때문에 256 ~ 4096 byte 까지 데이터 크기가 한정된다. post : 사용자의 입력 정보를 보이지 않아 get 방식에 비하여 보안성이 크다. 또한 크기에 제한을 받지 않는다는 특징이 있다. name 폼 태그를 구분하기 위한 이름 지정 action 폼 태그 안의 내용을 처리할 서버 프로그램을 지정(ASP, PHP, JSP 등) target 현재 창이 아닌 다른 위치에 열리도록 설정 autocomplete 자동 완성 기능(속성 값 : on, off) 보안이 필요한 정보에는 off 설.. 공감수 0 댓글수 0 2022. 10. 8.
<map> 활용 : 이미지 맵 좌표(이벤트 페이지 만들기) 1. 이미지 맵이란? 하나의 이미지에 여러 개의 링크를 만드는 것을 말한다. 2. 이미지 맵의 좌표 알아내기 : 원의 중심, 원의 반지름 이미지의 특정한 좌표는 그림판을 통해 쉽게 알아낼 수 있다. 좌표를 알아내고자 하는 이미지 파일을 그림판으로 열어보자. 1️⃣ 원의 중심 : [선택]을 누르고 원의 중심에 마우스를 가져가서 좌표를 알아낸다. 2️⃣ 원의 반지름 : [선택]을 누르고 원을 감쌀만큼 영역을 선택 이를 통해 대략 원의 반지름은 50px 정도라는 것을 알 수 있다. 3️⃣ 좌표 적용하기 : 태그 활용 먼저 이미지 맵 대상이 되는 이미지를 태그에 삽입한다. 태그를 사용할 것이기 때문에 맵의 이름을 함께 명시한다. 그 다음 태그를 설정한다. 👉 shape 속성 : map 으로 묶은 범위의 모양을 .. 공감수 0 댓글수 0 2022. 10. 8.
<img> : SVG 이미지 삽입하기 1. SVG 파일 형식이란? SVG 는 Scalable Vector Graphics 즉 확대 가능한 벡터 그래픽이다. 기존의 gif, jpg/jpeg, png 파일은 비트맵 방식의 이미지(bitmap image) 로, 이를 확대를 하면 이미지가 일명 깨진다는 느낌을 받을 수 있었다. 하지만 SVG 이미지는 확대하더라도 깨지지 않는다는 특징이 있다. 이처럼 기존의 이미지 파일보다 확대 또는 축소 시에도 선명하게 활용할 수 있는 SVG 를 선호하게 되었다. SVG 는 시각적으로 중요한 이미지에 많이 사용되는데, 예를 들어 로고, 차트, 그래프 지도 등을 구현할 때 많이 적용된다. 복잡한 데이터를 표현한 이미지를 참고할 수 있는 사이트는 다음과 같다. 1️⃣ d3.js (http://d3js.org/) 2️⃣.. 공감수 0 댓글수 0 2022. 10. 8.
<a> : 링크 만들기 1. href 속성 : 링크 주소 태그의 링크를 통해 넘어갈 다른 문서나 사이트를 href 속성을 통해 지정해 준다. 1. 텍스트 링크 : naver 2. 이미지 링크 : 2. target 속성 : 새 탭에서 링크 열기 속성 값 설명 _blank 링크 내용이 새 창이나 새 탭에서 열린다. _self target 기본값, 링크를 누르는 해당 화면에서 열린다. _parent 프레임을 사용했을 때, 링크 내용이 부모 프레임에서 열린다. _top 프레임을 사용했을 때, 링크 내용이 프레임에서 벗어나서 열린다. parent 웹문서가 위와 같을 때 기본값으로 링크를 열게 되면, 저 사각형 안에서 링크 내용이 나타나게 된다. 그 아래 링크의 _top 속성으로 열게 되면 전체 화면으로 표현된다. 📌 _parent 과 .. 공감수 1 댓글수 0 2022. 10. 1.
<img> : 이미지 삽입하기 이미지는 저장 위치에 따른 경로 지정이 조금 차이가 있다. 1. src 속성 : 내 컴퓨터의 이미지 파일 경로 지정 내 컴퓨터에 저장된 이미지 파일인 경우에 그 경로를 지정하기 위해서는 이미지 파일이 저장된 위치 파악이 중요하다. 👉 웹문서 파일과 이미지 파일이 같은 위치에 있을 경우 이 경우는 간단히 이미지 파일 명을 img 태그의 src 속성에 써 주기만 하면 된다. 예를 들어, index.html 웹문서 파일과 같은 위치에 dog.jpg 이미지 파일이 있다면 위와 같이 표현하면 된다. 👉 이미지 파일이 웹문서 파일의 하위 문서에 있을 경우 만약 index.html 웹문서 파일이 있는 폴더 안에 이미지만 따로 관리하는 images 라는 파일이 있다고 가정해보자. 위와 같이 하위 폴더명을 써주고 /를 .. 공감수 0 댓글수 0 2022. 10. 1.
<table>, <th>, <tr>, <td> : 표를 만드는 태그 HTML 에서는 표를 table, 행(가로)를 row, 열(세로)을 column, 행과 열이 만나는 영역을 cell 이라고 한다. 1. 기본적인 표 만들기 내용 1 내용 2 내용 3 내용 4 태그는 row 를 나타내고, 태그는 cell 을 나타낸다. 즉 위의 예시는 2개의 행 그리고 2개의 열인 표를 만든 것이다. table의 속성 중에는 border 라는 속성이 있는데, 이 값을 지정해 주지 않으면 윤곽선이 보이지 않아 구분이 힘들다. 2. 태그 : 제목 셀 제목 1 제목 2 제목 3 내용 1 내용 2 제목 4 내용 3 내용 4 예시와 같이 각 행과 열의 제목을 달아 줄 수 있으며, 태그로 작성하는 내용은 태그로 작성하는 내용에 비하여 더 굵게 작성된다는 특징을 가지고 있다. 3. colspan, ro.. 공감수 8 댓글수 0 2022. 10. 1.
<ul>, <ol> : 태그로 목록 만들기 1. Unordered List : 순서 없는 목록 만들기 단순 나열을 할 때는 태그를 사용한다. 태그 안에 를 사용하여 내용을 작성하고 는 여러 개 사용 가능하다. 앞에는 불릿(bullet)이라는 도형이 각 를 구분해준다. 목록 1 목록 2 2. Ordered List : 순서 있는 목록 만들기 태그와 달리 순서가 있기 때문에 순서와 관련한 여러 속성을 함께 표기할 수 있다. 목록 1 목록 2 목록 3 type 속성으로 불릿 자리에 순서를 나타내는 문자를 표기할 수 있다. 기본적으로는 '1' 이 오며, 이외에도 'a, A, i(로마 숫자 소문자) I(로마 숫자 대문자)' 가 올 수 있다. start 속성은 type 속성이 몇 번째부터 시작할 것인지를 지정하는 것으로, 위의 예시 코드에서는 2라고 하였기.. 공감수 1 댓글수 1 2022. 9. 30.
Text Tag : Inline Level 1. 태그, 태그 : 굵게 표시하기 (bold) 강조하고 싶은 굵은 텍스트 굵은 텍스트 태그와 태그는 육안으로 구분이 되지 않지만 이 둘의 차이는 화면 낭독 기능에 있다. 중요한 내용을 강조하고 싶을 때는 태그, 단순히 굵게 표현할 때는 태그를 쓰도록 하자. 2. 태그, 태그 : 이탤릭체로 표시하기 (emphasis, italic) strong 태그와 같이 강조하고 싶을 때 사용 단순히 이탤릭체로 표시하고 싶은 내용 3. 태그 - 인용 내용 표시하기 (quote) blockquote 와 같은 기능을 수행하지만 인라인 레벨에서 줄바꿈 없이 표기 가능하다. 그리고 자동으로 큰 따옴표를 추가하여 준다. 4. 태그 : 형광펜 효과 형광펜을 칠한 것 같은 효과를 준다. CSS 의 background-color 속.. 공감수 0 댓글수 0 2022. 9. 30.
Text Tag : Block Level 1. 태그 : 제목 표시하기 (heading) 제목 제목 제목 제목 제목 제목 일반 텍스트와 비교될 수 있게 굵게 표현되며, 숫자가 작을수록 크기는 커진다. 즉 1이 가장 큰 글씨이며, 6이 가장 작은 글씨이다. 2. 태그 : 단락 만들기 (paragragh) 텍스트를 사용할 때 가장 많이 사용되며, 별도의 줄바꿈 태그가 없는 경우에는 한 줄로 표기된다. 다만 웹 상에서 한 줄에 표기 가능한 범위가 넘어가면 자동으로 줄을 바꾼다. 3. 태그 : 줄 바꿈 (break) 텍스트를 사용할 때 가장 많이 사용되며, 별도의 줄바꿈 태그가 없는 경우에는 한 줄로 표기된다. 다만 웹 상에서 한 줄에 표기 가능한 범위가 넘어가면 자동으로 줄을 바꾼다. 4. 태그 : 수평 줄 추가 (horizontal) 5. 태그 : .. 공감수 0 댓글수 0 2022. 9. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.