본문 바로가기

HTML

한개의 Form에서 여러개 Submit 사용하기 Multiple submit in Single Form한개의 태그에서 에서 여러개의 submit 버튼을 사용할 경우가 있습니다.무엇이 가장 우아한 방법일까요?onclick - 1아마 아래와 같은 코드를 많이 보셨을 겁니다. $("#update").click(function () { $("form").attr("action", "/manage/update");}); $("#delete").click(function () { $("form").attr("action", "/manage/delete");});Colored by Color Scriptercs 혹은 아래와 같이 submit 버튼에 onclick 시 name 등을 함께 넘겨 switch 처리로 action 부분만 변경한다던지 하는 코드를요. fun..
HTML5 : <video>, <audio> 태그 HTML5 : , 태그1. 태그1-1 포맷 태그에 사용되는 포맷들이다. 포맷확장자설명MPEG.mpg .mpegMPEG. Moving Pictures Expert Group이 개발했다. 처음으로 웹에서 인기를 얻은 비디오 포맷이다. 모든 브라우저에서 사용되었지만, HTML5에서는 지원하지 않는다.AVI.aviAVI (Audio Video Interleave). Microsoft가 개발했다. TV 하드웨어나 비디오 카메라에 흔하게 쓰이는 포맷이다. 윈도우 컴퓨터 환경에서 잘 작동하지만, 웹에서는 그렇진 않다.WMV.wmvWMV (Windows Media Video). 이하 avi와 동일.QuickTime.movQuickTime. Apple이 개발했다. TV 하드웨어나 비디오 카메라에 흔하게 쓰이는 포맷이다...
정적 HTML form태그에서 메일보내기 : Google Apps Mail html에서 mailto를 사용하면, 구현은 물론 간단합니다만 outlook과 같은 쓸데없는 프로그램을 실행해 사용자에게 불편을 초래합니다. 아래와 같이 서버 없는 순수 HTML과 자바스크립트로 메일보내기를 구현할 수 있습니다.사용자는 계정에 로그인하고 메일을 보내는 귀찮음 대신 웹페이지의 양식대로만 입력해 쉽고 빠르게 메일을 보낼 수 있습니다. 아래 문서는 https://github.com/dwyl/html-form-send-email-via-google-script-without-server 를 번역한 것입니다.이곳에서도 보실 수 있습니다. 오역 및 오타는 댓글로 남겨주세요. Google Apps Mail을 사용해 정적 HTML Form에서 메일을 보내세요!백엔드 서버 없이 HTML Form을 사용하..
HTML5 : 하이퍼링크 <a> HTML5 : 하이퍼링크 정의와 사용태그는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의한다.태그의 가장 중요한 속성(attribute)는 링크의 목적지를 나타내는 href 속성이다.기본적으로 링크는 모든 브라우저에서 다음과 같이 나타난다:방문하지 않은 링크는 파란색이다.방문한 링크는 밑줄이 그어지고 자주색이 된다.활성 링크에는 밑줄이 그어지고 빨간색이 표시된다.기본형1cs자주쓰는 속성href링크한 문서나 사이트의 주소를 입력한다.1cstarget링크한 내용이 표시될 때 현재 창 또는 새 창을 지정한다.1234현재창새창부모프레임전체화면cs_self : 기본값. 링크가 있는 화면이 열린다. _blank : 링크 내용이 새창이나 새 탭에서 열린다. _parent : 프레임을 사용했을 때..
HTML5 : 이미지 <img> 태그 HTML5 : 이미지 태그기본src 속성에 상대주소든 절대주소든 상관없이 이미지 주소를 넣으면 된다.닫는 태그가 없으며, 인터넷에서 존재하는 이미지 주소를 복사해 사용할 수도 있다.1cs대체텍스트 alt웹 접근성을 위해, 시각장애인 등 화면낭독기를 사용하는 사람들을 위한 대체텍스트다.이미지 경로가 잘못되었거나, 삭제되어 이미지가 표시되지 않을 경우에 표시되는 텍스트이기도 하다.1cs크기width와 height 속성을 이용한다. 입력하지 않으면 원래 이미지의 크기대로 표시된다. 크기를 조절해도 이미지의 용량은 바뀌지 않는다.1csheightheight 속성을 제대로 지정하지 않으면 사진이 찌그러지는 등의 역효과가 나타날 수 있다.width 속성만 지정하면 height 값은 원래 이미지의 비율에 맞춰 자동으..
HTML5 : 목록 ul, ol, li, dl, dt, dd태그 HTML5 : 목록 ul, ol, li, dl, dt, dd태그unordered list의 약자. 순서가 없는 목록을 나타낸다.안에 로 아이템을 넣어주면 된다.기본적으로 옆에 bullet 문자 (●)로 표시된다. CSS list-style-type 속성으로 마커를 변경할 수 있다:ValueDescriptiondiscSets the list item marker to a bullet (default)circleSets the list item marker to a circlesquareSets the list item marker to a squarenoneThe list items will not be markedordered list 의 약자. 순서가 있는 목록을 나타낸다.기본적으로 1. 2. 3. 으..
HTML5 : table 태그 HTML5 : 표 태그표를 만드는 태그.과거에는 레이아웃을 잡기 위해 테이블을 만들고 그 안에 컨텐츠를 넣었으나 현재 그런 방법은 죄악처럼 여겨진다. 태그는 말 그대로 표를 만들 때 사용하도록 하자. 를 선언한 후, 안에서 로 row를 만들고 로 column을 만든다. 대신 를 사용할 수도 있는데, 는 가운데정렬, 진하게 속성이 자동으로 부여된다. 스타일을 지정하지 않으면 투명한 격자에 담기므로 테두리(border)를 지정해줘야 구분할 수 있다.최근에는 border 없이 색으로만 구별되게 하는 테이블 형식이 많긴 하다.12345678910111213141516171819202122232425table, th, td { border: 1px solid black;} Month Savings January ..
HTML 텍스트, 문단 태그 HTML 텍스트, 문단 태그,...는 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용한다.태그는 하나의 콘텐츠에서 하나만 쓰일 것을 권고하고 있다. 단순히 글씨를 크고 굵게 바꾸려는 목적으로 사용해서는 안 된다.블록(block)속성이라 자동으로 줄바꿈이 된다.입력한 내용 앞 뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 강제로 줄을 바꾼다. 닫는 태그가 없어 단독으로 사용하면 된다.아래와 같은 수평선이 생긴다. 분위기를 전환하는 용도로 사용된다. 소스에 표시한 공백이 그대로 나타난다.HTML 문법에서는 공백을 아무리 넣어도 하나만 표시된다.공백을 표기하기 위해서는 라는 번거로운 특수기호를 입력해야 된다.를 사용하면 이 번거로움을 덜 수 있어 코드 등을 표시할때 애용되는 태그다. 아래 참조., 텍스트를 ..

티스토리툴바