본문 바로가기
반응형

html

웹개발의 기본언어 HTML 양식 폼, input 태그 및 속성 2편 input 태그에서 사용할 수 있는 다양한 속성을 하나하나 소개해 드리도록 하겠습니다. 위 태그와 속성값을 이용하여 간단하게 ID와 Password를 코딩하여 출력해보면 아래와 같습니다. 위와 같은 방법으로 lebel 태그와 input 태그를 이용하여 만들 수 있는 다양한 출력물들이 존재합니다. 이를 만들 수 있는 속성값을 소개해 드리도록 하겠습니다. 저번 시간에 label 태그와 input 태그를 나누어 쓸 수 있는 방법을 소개하였습니다. 아래와 같이 input type에 숨어있는 속성들이 있습니다. 이외에 button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month 를 속성값으로 입력할 수 있습니다... 더보기
웹개발의 기본언어 HTML 다양한 양식 폼, Input 태그 및 속성 웹에서 다양한 정보를 제작자가 만들고 이를 웹에 방문한 사용자들이 정보를 해당 항목에 입력하여 사용자 정보를 기반으로 로그인, 상품주문, 설문지작성 등 다양한 곳에서 사용할 수 있도록 프로그래밍하여 처리하는 일명 폼기반의 웹 문서를 만들기 위해 사용하는 태그에 대하여 알아 보도록 하겠습니다. 일단 기본으로 적용되는 값은 입니다. 일단 비주얼스튜디오에서 해당값을 입력하게 되면 사용 가능한 속성값이 나열되는데 이를 하나씩 살펴 보도록 하겠습니다. 보시는 것과 같이 속성에 method를 입력했을 경우에 "dialog", "get", "post" 3가지 속성을 사용할 수 있도록 보여지는데요 각각 하나씩 설명드리겠습니다. 으로 입력하였을 경우에는 폼요소를 제출하게 될경우 표시된 상자 입력폼을 닫아 보이지 않도록 .. 더보기
웹개발의 기본 언어 HTML 멀티미디어 오디오 비디오 파일 태그 1. 오디오 파일 오디오 파일을 삽입하기 위해서 이용하는 태그는 입니다. 이미지 태그를 사용했을 때와 마찬가지로 src를 이용하여 경로를 알려주면 간단히 삽입이 가능합니다. 우선 실습을 위해 오디오 파일을 다운 받아주시거나 핸드폰에 녹음을 통한 오디오 파일을 받아주시면 실습 준비가 완료 됩니다. HTML 파일을 저장한 곳에 함께 두시면 번거롭게 모든 경로를 쓰지 않고 오디오 파일 이름만 경로에 기입하면 되기에 HTML파일과 같은 저장 위치에 오디오 파일을 두고 진행해 보도록 하겠습니다. controls를 사용하는 이유는 사용자가 재생버튼을 눌러야만 오디오를 재생할 수 있도록 하기 위함입니다. 만약 자동으로 오디오를 실행하려면 autoplay를 입력하면 됩니다. 하지만 현재 사용할 수 있는 대부분의 웹브라.. 더보기
웹개발의 기본 언어 HTML 구조 구성을 위한 시맨틱 텍스트 이미지 태그 시맨틱 태그는 문서 내용에 영향을 주지는 않치만 웹의 문서구조를 파악할 수 있도록 구분하고 파악하는 역할을 하는 태그라 보시면 됩니다. 이 시맨틱 태그의 종류와 의미에 대해 설명 드리도록 하겠습니다. 위에서도 언급한바 있는 시맨틱 태그는 사용시 사용자가 구성된 태그 이름으로 쉽게 구분된 내용을 확인할 수 있을 뿐만 아니라 구조가 정확히 나눠지기 때문에 다양한 환경(PC, 모바일 등)에서 노출되는 웹문서를 최적화하기에 용이하다는 점이 있습니다. 사용되는 태그와 의미에 대해 정리해보도록 하겠습니다. 헤더 영역입니다. 주로 검색창이나 사이트 메뉴가 들어가는 부분으로 이해하시면 됩니다. 다른위치로의 연결을 위한 태그입니다. 흔히 표현하는 링크입니다. 웹문서에서 한번만 사용 가능하며 메인 콘텐츠가 들어갈 예정입니.. 더보기
웹개발의 기본 언어 HTML 기본구조와 태그의 이해편 HTML 문서의 기본 구조의 이해 HTML의 문서는 그동안 이 글을 읽으시는 분들께서 사용하셨을지도 모르는 한글이나, 엑셀, 파워포인트와 같지 않고 HTML만의 형식을 이용하여 작성할 수 있습니다. 기본이 되는 뼈대는 html이라는 프레임 안에 head와 body이 자리하고 있는 것입니다. 잠시 HTML만의 영역으로 구성해 보자면 아래와 같습니다. = 과 맨 마지막의 이 보이실거에요. 웹문서의 시작과 끝을 나타냅니다. = 실제로 웹 브라우저 면에 나타나는 내용입니다. 태그에 대한 이해 웹문서 개발에 기본이 되는 다양한 태그들 중에 위에서 언급하였던 언어들에 대해 이해를 돕고자 풀어 설명해 드리도록 하겠습니다. 일단 문서의 유형을 지정하는 이렇게 사용하게되는 태그는 현재 이문서가 HTML5 문서입니다. 라.. 더보기
쿠팡윙 HTML 다팔자 프로그램 공지사항 등록 네이버의 스마트스토어에서는 공지사항을 입력하여 전상품이 동일하게 공지사항이 등록될 수 있도록 배려해주고 있죠~ 하지만 쿠팡은? 공지사항을 등록하기 위해서는 따로 이미지로 공지사항내용을 만들고 저장하여 이미지를 URL처럼 이용할 수 있도록 만드는 작업을 따로 해주셔야 합니다. 1. 이미지작업 및 저장 전문 이미지 작업 프로그램을 이용하지 않더라도 이용할 수 있는 미리캔버스를 소개해 드린적이 있었습니다. 미리캔버스에서 작업을 하여 위탁 판매할 때 발생할 수 있는 반품 교환 주소지, 혹은 사장님들의 개인 핸드폰 번호가 아닌 070번호를 이용할 경우 이번호를 안내하는 문구가 포함된 공지사항을 만들수 있습니다. 아래와 같이 이미지를 만들 수 있습니다. 자! 그렇다면 이제 만들어진 이미지를 가지고 다팔자 프로그램을.. 더보기
반응형

티스토리툴바