본문 바로가기

CSS30

[HTML] 폼 요소 4, <input type="">의 속성 값 이번 포스트에서는 길고 길었던 폼 요소를 마무리 하려고 합니다. 사실 속성 편에서 으로 퉁쳐도 되지만 그러기엔 type이 분량이 꽤 되어서 정리를 한 번 해보려고 합니다. ▽ text : 텍스트를 입력할 수 있게합니다. 한 줄만 입력 가능합니다. ▽ password : 텍스트를 입력하는데 입력내용이 사용자에게 보이지 않습니다. 이번에 알아볼 속성값들은 일반 텍스트에 속하지만 조금 특수한 입력의 경우들 입니다. 겉으로 보기만 했을 때는 일반 텍스트 필드와 같아 보이지만, 가상키보드 배열의 변경이나, 입력 방식에 조건이 있는 경우입니다. ▽ search : 검색상자를 만들어 줍니다. 일반 텍스트 필드와 같아 보이지만 전체를 지울 수 있는 X 박스가 표시됩니다. ▽ url : 주소를 입력할 수 있는 상자를 만.. 2020. 8. 27.
[HTML] 폼 태그 2, 폼 요소 태그들 - 2 지난 포스트에서 배웠던 것들은 대부분 한 줄짜리 간단한 정보의 입력이었습니다. 하지만 회원가입이나 인터넷 쇼핑을 하다보면 정보를 입력하는 방법은 여러가지가 있음을 볼 수 있습니다. 회원가입 창에서 이메일을 입력할 때 @뒷부분의 주소는 직접 입력하기도 하지만 대부분 선택 박스에서 골랐던 기억이 있을 것 입니다. 그런 형태의 정보 입력란을 "드롭다운 리스트"라고 합니다. 이 드롭다운 리스트는 만드는 태그가 따로 존재합니다. : 드롭다운 리스트를 만드는 태그입니다. : 드롭다운 리스트에서 선택 가능한 목록을 만듭니다. : 드롭다운 리스트에서 선택 가능한 목록들을 묶는 기능을 합니다. 지난번에 배운 태그의 텍스트필드 속성을 이용한 드롭다운 리스트가 있습다. 간단히 이야기하자면 텍스트 필드의 형태를 하고 있지만 .. 2020. 8. 25.
[HTML] 폼 태그 1, 폼 요소 태그들 - 1 폼(Form)이란, 웹에서 사용자가 웹에게 보내는 정보들을 입력하는 공간을 말합니다. 로그인창이나 인터넷 쇼핑의 주소지 입력란이 폼이고, 검색어를 입력하는 곳도 폼입니다. 폼은 태그 갯수가 많진 않지만 속성이 다양해서 먼저 태그만 알아보도록 하겠습니다. 폼요소들은 복잡하지는 않지만 각 요소마다 많은 속성들을 가지고 여러가지 형태를 가집니다. 이번포스트에서는 태그에 대해서만 다루고 다음에 요소의 속성에 대해서 따로 다루겠습니다. : 폼에 관련된 기능을 넣기 위한 태그입니다. 표를 만들던 과 비슷하게 태그안에 폼요소를 넣는식으로 사용합니다. : 사용자가 정보를 입력하는 공간을 만드는 태그입니다. type속성을 이용해 입력하는 정보란이나 버튼을 만들어 낼 수 있습니다. 닫는태그가 없습니다. : 폼요소에 텍스트.. 2020. 8. 24.
[HTML] 링크 관련 태그 지난번에 알아본 이미지 만큼이나 링크도 웹 브라우저에서 많이 사용합니다. 이 블로그에 들어오는것도 링크를 통해서, 블로그에 들어와서 이 포스트에 들어온것도 전부 링크를 통해서 들어온만큼 링크는 필수적 요소입니다. 이번 포스트는 티스토리 html작성을 이용해 링크를 실제로 넣어놨으니 눌러보셔서 확인하시는 것을 추천드립니다. : 링크를 연결해주는 태그입니다. 그리고 이것이 전부입니다. 이 태그 하나로 다른 링크로 연결하거나 다운로드 하거나, 새창에서 열어주거나 하는 행동들을 할 수 있습니다. href속성을 이용해서 링크를 연결할 주소를 넣어줍니다. 사용법은 너무나 간단한것이 가 전부입니다. 링크 링크 태그사이에 입력한 글씨를 클릭하면 href속성에 입력한 주소로 넘어가게 됩니다. 기본값은 파랑색글씨에 밑줄이.. 2020. 8. 22.
[HTML] 이미지 관련 태그들 웹 브라우저 상에서 이미지는 많은 역할을 하고 많이 쓰입니다. 이번엔 브라우저에 이미지를 넣는 방법을 알아보겠습니다. : 이미지를 삽입할 때 사용합니다. 웹에서는 jpg, png, gif 형식의 이미지 확장자 파일만 삽입이 가능합니다. 이미지 삽입방법은 img 태그안에 src속성을 넣어주어 이미지 파일이 있는 경로를 알려주어야 합니다. 이미지를 넣는건 알겠는데 "경로"라고 하는 익숙하면서도 갑자기 나온 생소한 단어가 눈에 띕니다. 경로는 말그대로 해당 파일이나 문서의 저장공간상의 위치를 말합니다. 이 경로는 이미지말고도 다른 html파일이나, 자바스크립트 파일을 삽입할 때도 사용하기 때문에 알아두어야 합니다. 경로에는 "절대경로"와 "상대경로" 두 가지가 존재합니다. 경로 절대경로 해당 파일의 전체 UR.. 2020. 8. 21.
[HTML] 표를 만드는 태그 : 표 하면 떠오르는 형태의 기본적인 표를 만들어주는 태그입니다. 태그 하나만으로 표가 만들어지는 것은 아니고 열과 행을 만들어주는 태그들과 함께 사용함으로써 표가 완성됩니다. : 표에서 행을 만들어줍니다. : 표에서 셀을 만들어줍니다. 셀이란 표에서 한 칸의 공간을 셀이라고 하며, 이 셀의 갯수에 따라 표의 열이 정해진다고 생각하시면 됩니다. : 표에서 제목 셀을 만들어줍니다. 제목은 다른 태그칸의 글씨보다 굵게나오며 가운데 정렬이 되어나옵니다. 표가 만들어졌습니다. 하니만 표에 테두리가 없으니 표인지 글자의 나열인지 구분하기 어렵습니다. 그럴때는 table태그의 속성에 border = "테두리값"을 추가해주시면 됩니다. 테두리가 있는 표가 필요할땐 border속성을 넣고, 표 형태의 배치만이 필요한 .. 2020. 8. 20.
300x250

티스토리툴바