본문 바로가기

분류 전체보기83

HTML audio , 오디오 컨텐츠를 웹페이지 넣을 수 있는 태그 AUDIO 태그란? HTML에서 audio 태그를 사용하면 오디오 콘텐츠를 웹페이지에 삽입할 수 있습니다. 오디오 콘텐츠란 음악, 음향 등을 말하는데요. MP3, WAV, OGG 등 확장자가 대표적입니다. 또한 태그는 시맨틱 구조를 만드는 요소이기도 합니다. 사용법 Your browser does not support the audio tag. 먼저 audio 태그를 엽니다. src 속성에 오디오 파일의 소스 URL을 지정합니다 controls : 이 속성을 넣으면 오디오 플레이어 컨트롤이 표시되어 사용자가 재생, 일시정지, 볼륨 조정 등을 처리할 수 있어요 autoplay : 웹페이지를 열때 자동으로 오디오를 재생합니다 muted : 이 속성을 쓰면 음소거를 할 수 있어요 preload : 웹페이지를 .. 2023. 7. 13.
HTML Semantic (시맨틱) 이해하기 쉽고 검색이 잘되게 만드는 구조 시맨틱 구조란 무엇인가? 시맨틱 구조는 의미를 전달하고 웹페이지의 구조를 정확하게 보여주는 방법입니다. 아래 그림은 Codecademy를 공부하면서 나온 사례인데요. 좌측이 Non-Semantic, 우측이 Semantic 구조입니다. 왼쪽, 오른쪽을 비교하니까 우측은 박스만 보더라도 웹페이지 구성이 어떻게 되는지 대략적으로 알 수 있네요! 시멘틱에 필요한 태그 위의 그림을 코드로 구성해본 다른 예시입니다. 모든 시맨틱 태그를 사용하지는 않았네요. : 웹 페이지 상단에 있는 소개 콘텐츠를 묶습니다 : 탐색 링크, 메뉴가 포함된 섹션입니다 : body 영역 중 메인 콘텐츠 영역입니다 : body 영역 중 하단 정보영역(푸터)를 묶습니다 : main 영역을 다시 나누어 그룹화합니다 : section과 연관된 .. 2023. 7. 12.
HTML textarea, 여러 줄의 텍스트를 입력하는 폼 생성 태그 TEXTAREA 태그란? HTML 태그는 여러 줄의 텍스트를 입력받을 수 있는 폼을 생성하는데 사용합니다. 이메일 폼을 만든다고 가정할 때 내용을 넣는 폼을 생각하면 이해가 빠릅니다. 사용법 New Blog Post: 과 태그를 엽니다 태그를 만듭니다 id, name : id는 해당 폼을 고유하게 식별하는데 사용하고, name은 해당 요소의 이름을 정의해서 서버로 데이터를 전송할 때 식별자로 이용합니다. id는 유일해야 하지만, name은 동일한 이름을 사용해서 묶을 수 있습니다. rows : 텍스트 입력할 수 있는 줄 수 입니다. cols : 텍스트를 입력할 수 있는 너비입니다. placeholder : 텍스트 입력란에 기본적으로 표시되는 임시 텍스트입니다 예시화면 See the Pen textarea.. 2023. 7. 11.
HTML datalist, 드롭다운 메뉴를 만드는 또 다른 방법 (select와 차이점) 태그란? select 태그와 유사하게 드롭다운 목록을 만드는 태그입니다. 하지만, 몇 가지 부분에서 select 태그와 차이점이 있어요. 일단 사용법과 예시를 보면서 차이점을 알아볼께요. [HTML] - HTML 드롭다운 목록을 생성하는 태그 select, option 사용법 Ideal city to visit? 먼저 태그를 엽니다 태그를 사용해서 질문을 만들구요 태그를 넣습니다. (select와는 다른 부분입니다) 태그를 만듭니다. 이 때 id 속성은 input의 list 속성과 같은 이름을 사용해야 하구요. 선택사항을 태그로 만듭니다. 태그의 value는 선택지를 구분할 수 있는 임의의 이름입니다 실행화면 See the Pen datalist by 40's Programmer (@40sProgramm.. 2023. 7. 10.

티스토리툴바