Programming310 [HTML] 미디어 관련 태그 html5가 나오기 이전, 웹 페이지에서 미디어를 재생하려면 플러그인이라는 것을 이용해서 삽입해야 했습니다. 그러나 html5가 나오면 오디오와 비디오를 재생하는 태그가 생겼습니다. 그래서 html5를 지원하는 브라우저라면 미디어파일들을 쉽게 태그로 삽입할 수 있게 되었습니다. : 오디오 파일을 삽입합니다. 브라우저에서 배경음악이나 소리를 재생할 때 사용하며 .mp3확장자의 파일사용이 권장됩니다. src속성을 이용해 경로를 지정해주면 됩니다. : 비디오 파일을 삽입합니다. 사용법은 audio와 유사합니다. 와 에는 속성들이 있는데 두 태그의 속성이 대부분 같습니다. 와 의 속성 width,height 각각 너비와 높이를 지정합니다. controls 컨트롤 막대를 표시합니다. 사용시 속성 값 없이 cont.. 2020. 9. 3. [HTML] 시맨틱 태그들 시맨틱 태그란, 태그만을 봤을 때 브라우저가 구성된 구조를 알 수 있는 태그를 말합니다. 웹 페이지의 구성요소로써는 티스토리 블로그메인을 기준으로 블로그의 이름과 배너를 보여주는 헤더, 블로그의 내용을 표시하는 콘텐츠, 프로필과 블로그의 메뉴등을 표시하는 사이드바, 저작권표시나 블로그 저자에 대한 정보를 갖는 푸터의 네가지 구성으로 되어있습니다.(블로그 구성 설정에 따라 다를 수 있습니다.) 지난 포스트의 div와 span처럼 시맨틱 태그에는 자체적으로 기능은 없고 구조를 구분할 때 사용합니다. 같은 구조를 구분하는 태그인데 div와의 차이점은 무엇일까요? 우선 시맨틱 태그들은 전체적인 구조를 구성할 때 이용합니다. 반면에 div태그는 각 구조안의 몇몇 콘텐츠들을 묶어서 따로 CSS효과를 적용할 때 사용.. 2020. 9. 2. [HTML] 공간 분할 태그, 레이어 나누기 div와 span 이번 포스트는 html의 공간 분할에 대해서 알아보겠습니다. 왜 굳이 레이어를 나누나 싶겠지만 레이어를 나누면 코드 안의 수 많은 html태그들을 나눠서 관리하기도 쉽고 어느 태그들이 어느 영역에 속하는지 구분하기 쉽기 때문입니다. 간단히 말하자면 서랍장을 용도별로 나누어서 정리하는 것과 같은 이치라고 생각하시면 됩니다. 이러한 레이어를 나누는 태그는 두 가지가 있습니다. 와 입니다. 왜 같은 역할을 하는 태그가 두개가 있냐면 는 블록 레벨의 요소이고, 은 인라인 레벨의 요소이기 때문입니다. 블록레벨과 인라인요소에 대한 설명은 아래 포스트를 참조해 주세요. https://bamtory29.tistory.com/4 [HTML/CSS] 블록 요소와 인라인 요소 html의 태그들은 여러 가지가 있지만 크게 블.. 2020. 8. 28. [HTML] 폼 요소 4, <input type="">의 속성 값 이번 포스트에서는 길고 길었던 폼 요소를 마무리 하려고 합니다. 사실 속성 편에서 으로 퉁쳐도 되지만 그러기엔 type이 분량이 꽤 되어서 정리를 한 번 해보려고 합니다. ▽ text : 텍스트를 입력할 수 있게합니다. 한 줄만 입력 가능합니다. ▽ password : 텍스트를 입력하는데 입력내용이 사용자에게 보이지 않습니다. 이번에 알아볼 속성값들은 일반 텍스트에 속하지만 조금 특수한 입력의 경우들 입니다. 겉으로 보기만 했을 때는 일반 텍스트 필드와 같아 보이지만, 가상키보드 배열의 변경이나, 입력 방식에 조건이 있는 경우입니다. ▽ search : 검색상자를 만들어 줍니다. 일반 텍스트 필드와 같아 보이지만 전체를 지울 수 있는 X 박스가 표시됩니다. ▽ url : 주소를 입력할 수 있는 상자를 만.. 2020. 8. 27. [HTML] 폼 요소 3, 폼 요소의 속성들 지난 두개의 포스팅에 걸쳐 소개했던 폼 요소의 속성들을 정리해보려 합니다. 요소에 대한 설명은 지난 포스트를 참조해 주시길 바랍니다. (ctrl+f로 폼 요소를 검색하시면 쉽게 찾으실 수 있습니다.) action 폼 요소를 처리 할 프로그램을 결정합니다. autocomplete 자동완성기능을 넣습니다. method 입력된 정보를 서버에 어떻게 전송할지 결정합니다. name 폼에 이름을 붙입니다. 폼이 여러개일 때 구분하기 위한 용도. target 스크립트 파일을 다른위치에서 열게할 때 사용합니다 이 중에서 제일 마지막의 type속성은 속성값이 매우 많으며 이 속성에 따라 정보의 입력방식이 달라집니다. size 드롭다운 리스트의 옵션 갯수를 정합니다. multiple 여러개의 옵션을 선택할 수 있게 해줍니.. 2020. 8. 27. [HTML] 폼 태그 2, 폼 요소 태그들 - 2 지난 포스트에서 배웠던 것들은 대부분 한 줄짜리 간단한 정보의 입력이었습니다. 하지만 회원가입이나 인터넷 쇼핑을 하다보면 정보를 입력하는 방법은 여러가지가 있음을 볼 수 있습니다. 회원가입 창에서 이메일을 입력할 때 @뒷부분의 주소는 직접 입력하기도 하지만 대부분 선택 박스에서 골랐던 기억이 있을 것 입니다. 그런 형태의 정보 입력란을 "드롭다운 리스트"라고 합니다. 이 드롭다운 리스트는 만드는 태그가 따로 존재합니다. : 드롭다운 리스트를 만드는 태그입니다. : 드롭다운 리스트에서 선택 가능한 목록을 만듭니다. : 드롭다운 리스트에서 선택 가능한 목록들을 묶는 기능을 합니다. 지난번에 배운 태그의 텍스트필드 속성을 이용한 드롭다운 리스트가 있습다. 간단히 이야기하자면 텍스트 필드의 형태를 하고 있지만 .. 2020. 8. 25. 이전 1 ··· 47 48 49 50 51 52 다음 300x250
