Web/HTML (7) 썸네일형 리스트형 #7. Form & Tags 1. Form form태그는 사용자가 입력한 데이터를 수집하기 위해 사용되며 input, textarea등 여러 입력 양식 태그를 포함할 수 있다. form태그의 어트리뷰트로는 다음과 같다. action URL 입력 데이터가 전송 될 URL지정 method get / post 입력 데이터 전달 방식 지정 get과 post는 HTTP프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타낸다. GET GET방식은 전송 URL에 입력데이터를 쿼리스트링으로 보내는 방식이다. 전송 URL바로 뒤에 "?" 를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다. 1개 이상의 전송데이터는 "&"로 구분한다. URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수.. #6. 이미지 & 멀티미디어 1. 이미지 웹페이지에 이미지를 넣는 경우 img태그를 사용한다. HTML 삽입 미리보기할 수 없는 소스 src 이미지 파일 경로 및 주소 alt 이미지가 없을 경우 나오는 문구 width 이미지의 너비 height 이미지의 높이 2. 오디오 src 음악 파일 경로 preload 재생 전 음악파일 불러오기 autoplay 음악파일 자동재생 loop 음악파일 반복재생 controls 음악파일 재생 도구 표시 웹브라우저별로 지원하는 음악파일의 형식이 다르다. MP3 WAV OGG Chrome O O O FireFox O O O Safari O O X Opera O O O 파일 형식의 차이 문제는 source태그를 통하여 해결 할 수 있다. 3. 비디오 src 동영상 파일 경로 poster 동영상 준비 중에 .. #5. List & Table 1. List 1.1 순서없는 목록 순서없는 목록 apple banana grape HTML 삽입 미리보기할 수 없는 소스 순서없는 목록은 ul태그를 이용하여 작성된다. ul태그 속 li태그를 넣어 List 속 목록들을 작성해준다. 1.2 순서있는 목록 순서있는 목록 apple banana grape HTML 삽입 미리보기할 수 없는 소스 순서있는 목록은 ol태그를 이용하여 작성된다. 마찬가지로 List 속 목록들은 li태그를 이용하여 작성해준다. ol태그는 type어트리뷰트를 사용하여 순서를 나타내는 문자를 지정해 줄 수 있다. 1 숫자 (기본값) A 대문자 알파벳 a 소문자 알파벳 I 대문자 로마숫자 i 소문자 로마숫자 apple banana grape apple banana grape apple b.. #4. HTML의 핵심 Link HTML에서의 하이퍼링크는 태그를 사용하여 일어난다. 1. href href는 이동하고자 하는 파일의 위치(경로)의 값을 받는다. 경로란 파일의 특정위치를 말한다. href에 사용 가능한 값은 다음과 같다. 절대 URL 웹사이트 URL (href="https://develop-historychosun.tistory.com/") 상대 URL 자신의 위치를 기준으로 한 대상의 URL (href="css/style.css") fragment identifier 페이지 내의 특정 id를 갖는 요소의 링크 (href="#") 메일 href="mailto:???@example.com" script href="javascript:alert('Hello');" URL Local file Download file fra.. #3. 텍스트 관련 태그들 정리 1. 제목 태그 Hello! Hello! Hello! Hello! Hello! Hello! HTML 삽입 미리보기할 수 없는 소스 제목을 나타내는 태그에는 6가지가 있다. 각각의 숫자가 늘어날수록 글자의 크기는 작아진다. 2. 글자의 형태 태그 This is normal text. This is bold text. This is italic text. This is mark text. This is del text. This is inserted text. HTML 삽입 미리보기할 수 없는 소스 1. b : bold(굵게)체를 지정한다. 2. i : Italic(기울임)체를 지정한다. 3. mark : 해당 글자에 하이라이트를 지정한다. 4. del : 해당 글자에 취소선을 지정한다. 5. ins : 해.. #2. head 요소의 여러가지 태그들 이번 시간에는 head요소들의 여러가지 태그들에 대해서 알아보자. html의 문서는 2행의 부터 시작한다고 하였다. 이 요소에도 속성을 사용 할 수 있는데 특히 lang 속성을 사용하는 경우가 많다. 위의 예시는 한국어를 주 언어로 하는 경우의 예이다. meta의 요소들은 여러 정의에 사용된다. 먼저 charset은 브라우저가 사용할 문자셋을 정의한다. 대부분 "UTF-8"을 사용한다. 두번째로 keywords는 검색엔진이 사용할 keyword를 정의한다. 세번째로 description은 사용자가 검색을 하였을때 나타나는 웹페이지 설명이다. 네번째로 author는 웹페이지의 저자를 표시한다. 마지막으로 refresh는 위에 나와있는 코드를 해석하면 30초마다 웹페이지를 Refresh한다는 뜻으로 해석된다.. #1. HTML의 기본 문법 Hello! HTML 삽입 미리보기할 수 없는 소스 코드 내에 있는 요소들을 하나씩 살펴보도록 하자. HTML은 반드시 로 시작하게된다. 실제적인 코드는 2행부터 시작하게되는데 과 사이에 기술한다. 사이에는 document title, 메타데이터 등이 기술하게 되며 이 정보들은 브라우저에 표시되지 않는다. 브라우저에 출력되는 요소들은 사이에 위치된다. HTML의 요소는 시작태그와 종료태그 그리고 그 사이에 위치한 content로 구성된다. 또한 이 요소들은 중첩이 되어 사용될 수 있다. Hello! 안녕하세요! HTML 삽입 미리보기할 수 없는 소스 위의 코드에서 확인할 수 있듯이 body요소 안에 h1과 span의 요소를 포함하며 이를 출력해주고 있다. Hello! 안녕하세요! 또한 각 요소들에게는 속.. 이전 1 다음
