HTML 검색 결과
8 개의 검색 결과가 있습니다.
HTML

[HTML & CSS] input과 button의 공통점과 차이점

button 태그가 하는 일은 무엇일까? "어느 날 이런 일을 겪었다. form 태그 안에 form data와 관련 없는 버튼을 만든 후 그 버튼을 눌렀더니 form이 전송되었다. 응? button을 눌렀는데 왜 form이 "submit" 되지?" 위 상황은 button 태그의 type속성의 default값이 submit이라는 사실을 몰랐을 때 할 수 있는 실수입니다. 사실 button태그의 type속성값들은 input 태그의 type속성 값들과 겹칩니다. button 태그의 type속성 값인 submit, reset, button 은 input 태그의 type속성으로도 사용할 수 있습니다. 그러면 더 다양한 type을 제공하는 input만 사용하면 되지, button은 뭐하러 있느냐? 그 이유에 대해서..

2021. 2. 10. 08:00
HTML

HTML form 태그를 사용하여 데이터 전송하기

form 태그를 이용해 어떤 데이터들을 전송할 수 있나요? 이전 포스팅([웹개발 HTML] 사용자가 입력할 수 있는 UI 만들기)에서 input 태그 등을 이용해 사용자가 데이터를 입력할 수 있는 다양한 인터페이스들을 만드는 법을 살펴봤습니다. 여기서 조금의 응용을 더하면 사용자와 웹은 서로 입출력한 데이터를 주고받으며 상호작용을 할 수 있습니다. 예를 들어볼까요? 혹시 mbti 검사를 해본 적이 있을지 모르겠습니다. 저는 최근에 mbti 검사를 웹사이트에서 해본 적이 있는데요. 사용자가 문항마다 답을 선택하면(select UI) 웹에서 결과를 계산하여 최종 결과 페이지를 사용자에게 보여줍니다. 이렇게 사용자가 입력한 데이터를 웹에서 처리하는 것은 처리하는 장소에 따라 크게 두 가지로 구분할 수 있는데요..

2021. 1. 25. 08:00
HTML

[웹개발 HTML] 사용자가 입력할 수 있는 UI 만들기

사용자가 웹페이지에서 '입력' 행위를 할 수 있는 인터페이스를 제공하는 HTML 태그들 웹페이지에서 사용자가 '입력'을 할 수 있는 인터페이스란 어떤 것들을 말하는 것일까요? 예를 들어 검색엔진을 한번 생각해보도록 합시다. 검색엔진에는 검색어를 입력할 수 있는 검색창이 있습니다. 이것은 사용자가 텍스트를 입력할 수 있는 인터페이스입니다. 또 다른 예시를 찾아볼까요. 웹사이트에서 제공하는 기능들을 제대로 이용하기 위해서는 로그인이 필요한 경우가 있습니다. 로그인을 하기 위해서는 '아이디'와 '비밀번호'를 입력해야겠죠? 그리고 로그인을 하기 위해 '로그인 버튼'을 누릅니다. 이런 입력 공간이나 버튼들이 다 사용자가 어떤 정보(데이터)를 입력할 수 있도록 해주는 사용자 인터페이스(UI)입니다. 이런 UI를 제..

2021. 1. 18. 08:00
HTML

[웹개발 HTML] 이미지, 동영상 등 리소스 불러오는 법

HTML에서 외부 리소스 사용하기 웹페이지에 이미지, 동영상을 삽입하려면 어떻게 할까요? 또한 CSS파일을 불러와 디자인을 입히거나, Javascript파일을 가져오려면 어떻게 할까요? HTML에서는 다른 외부 리소스들을 가져와 사용할 수 있습니다. 이번 포스팅에서는 이런 외부 리소스들을 어떻게 가져오는지, 어떤 태그에서 사용하는지, 어떤 속성들을 추가할 수 있는지, 그리고 그 결과가 어떻게 나타나는지를 보도록 하겠습니다. img 태그로 이미지 삽입하기 img 태그를 사용하면 이미지를 웹페이지에 삽입할 수 있습니다. img 태그는 스스로 닫는 태그이기 때문에 와 같이 사용하며, src 속성 값으로 이미지 파일을 가져옵니다. img 태그의 사용법을 알기 위해 속성에 대해 먼저 살펴보겠습니다. img 태그의..

2021. 1. 11. 08:00
HTML

HTML - 하이퍼링크를 만드는 a 태그 깔끔하게 정복하기

a 태그를 사용하면 다른 웹페이지를 열 수 있습니다. a 태그는 HTML에서 사용되는 하이퍼링크를 정의하는 태그입니다. a 태그를 통해 현재 있는 웹페이지에서 다른 웹페이지로 이동할 수 있습니다. 이동할 수 있는 다른 웹페이지는 같은 사이트 내 다른 url을 가진 페이지일 수도 있고, 전혀 다른 도메인을 가진 다른 사이트의 url을 가진 페이지일 수도 있습니다. 또한 다른 페이지로 이동할 때에는 같은 브라우저 탭 내에서 현재 페이지를 이전 히스토리로 남기고 다음 페이지로 이동하게 만들 수도 있고, 아니면 현재 페이지는 현재 탭에 남겨두고 새 탭에서 다른 페이지를 열도록 만들 수도 있습니다. 혹은 같은 페이지 내에서 특정 위치로 스크롤을 이동시킬 수도 있습니다. 이런 기능들을 수행하는 하이퍼링크를 a 태그..

2021. 1. 4. 08:00
HTML

HTML 문서를 정의하는 title, meta 태그를 정리해보자

title 태그는 html문서의 제목을 정의하는 태그입니다. title 태그에 들어가는 값은 해당 html문서의 제목을 나타냅니다. 그리고 이 제목은 웹브라우저 상에서 맨 위에 있는 제목 표시줄에 출력되는 이름이기도 합니다. (밑에 있는 예시 코드의 결과를 참고하세요.) title 태그는 head태그 안에서 작성하면 되는 태그입니다. 실제 실습으로 title 태그를 써서 html 문서의 제목을 작성해볼까요? * 예시코드 * 결과 title 태그는 html 문서의 제목을 정의하기 때문에 검색엔진에서 노출되기 위한 키워드로서도 중요한 역할을 수행합니다. 우리가 구글이나 다음, 네이버 같은 검색엔진에서 검색을 할 때, 검색어에 맞는 웹페이지들을 노출하기 위해서 검색엔진은 고유의 알고리즘들을 가지고 있습니다. ..

2020. 11. 18. 08:00
HTML

[웹개발 HTML] 리스트(list)와 표(table) 만들기, table 행 합치기, 열 합치기

list를 만드는 태그들에 대해서 알아봅시다. 일상적으로 문서에서는 리스트를 작성할 일이 정말 많습니다. 예를 들면 전화번호부, 학교에서는 출석부, 사업을 하면 고객의 명단 등등... 우리의 일상에서는 리스트를 사용하는 일이 정말 많습니다. 자연스럽게 웹페이지에서도 리스트를 사용할 일이 많겠죠. 이번에는 리스트를 만드는 HTML 태그들에 대해 알아보겠습니다. list를 만들 때 쓰는 태그는 세 가지가 있습니다. 바로 ul, ol, li 태그입니다. 사용법부터 알려드리면 ul태그나 ol태그 안에 li태그를 넣어서 리스트를 만듭니다. 여기서 ul과 ol의 차이는 무엇일까요? ul은 unordered list (순서가 없는 리스트)의 줄임말입니다. ul태그로 감싼 리스트는 다음과 같은 머릿 기호가 붙습니다. ..

2020. 11. 11. 08:00
HTML

HTML 배워서 웹페이지 만들기

HTML로 웹페이지 개발에 입문하다. HTML(Hyper Text Markup Language)은 웹에서 소통하기 위해 사용되는 언어입니다. 웹페이지에 대한 정보를 담거나 웹페이지에 출력할 내용을 담기도 하고 서버와 소통하기도 합니다. 인터넷에 있는 모든 웹페이지들은 다 HTML로 작성되었습니다. 이렇듯 HTML은 웹문서를 작성할 때 쓰이는 언어입니다. 우리가 웹페이지를 하나 방문할 때에는 서버에 그 페이지를 방문하겠다는 요청을 보내고 서버는 요청을 받은 후 그 페이지에 해당하는 HTML 파일을 사용자에게 보냅니다. 아까 HTML은 언어라고 했는데요. HTML은 언어이고 HTML언어로 쓰인 파일을 HTML 파일이라고 합니다. 확장자명은 .html 이죠. → HTML로 쓰여진 HTML 파일이 웹페이지가 된..

2020. 11. 4. 08:00