HTML_CSS/HTML (10) 썸네일형 리스트형 사용자의 입력 값을 받을 수 있는 또 다른 태그 <select> 태그 태그 select 태그는 input 태그들과 비슷하게 form 태그 내부에서 쓰인다. 마우스를 이용해 여러개의 선택지 중에서 하나를 선택할 때 사용하는 양식 중 하나이며, Dropdownlist 라고도 부른다. 어떤 주제와 관련된 여러 선택지를 하나로 묶어서 웹페이지의 공간을 아끼고 가시성이 좋게 만들 수 있다. 태그 사용법 Dropdownlist.html 구글 네이버 다음 (실행결과) 구글 네이버 다음 구글 네이버 다음 select 태그는 내부의 여러개의 option 태그를 Dropdownlist 형식으로 만들어주는 역할을 한다. select 태그에서 name 속성을 부여하여 전송되는 값이 어떤 값인지 알려줘야한다. option 태그는 Dropdownlist 형식에서 선택지를 구분할 때 사용하는 태그이.. 사용자의 입력 값을 받을 수 있는 <input> 태그 태그 input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다. 예를 들어, 사용자가 키보드로 입력할 수 있는 텍스트 상자, 마우스로 클릭 할 수 있는 체크박스나 라디오버튼 등, 필요에 따라 원하는 양식으로 input 태그에 속성 값을 넣어서 사용하면 된다. 태그 사용법 input 태그는 여는 태그만으로 정보 제공이 가능하기 때문에 닫는 태그가 따로 필요없는 태그이다. input 태그에서는 type 속성의 값으로 입력하는 양식의 모양이 바뀌게 된다. (이 게시물에서는 간단한 기능을 가지고 있는 type 속성 값만 취급합니다. 자세히 다뤄야 하는 속성 값들은 따로 포스팅 하도록 하겠습니다.) 그리고 서버는 input으로 받은 값이 어떤 값인지 구분하지 못하기 때문에.. 서버로 원하는 데이터를 보내기 위한 <form> 태그 태그 form 태그는 사용자가 웹 서버로 어떠한 정보를 보낼때 사용하는 태그이다. 회원가입이나 설문조사 같이 서버에서 요구하는 정보를 경로를 지정해서 보낼 수 있게된다. 태그 사용법 form.html 성함: 거주지역: (실행결과) 성함: 거주지역: form 태그는 서버에 입력한 값을 제출해야하는 부분(input 태그)을 감싸고 있어야 하고 action 속성을 이용하여 정보를 보낼 경로를 지정해야 한다. 아까의 예제코드에서 제출버튼을 눌렀을때 URL부분을 자세히 보면 빨간색으로 밑줄이 그어져 있는 부분이 action 속성 값과 같고, 노란색으로 밑줄이 그어져 있는 부분이 각각 input 태그의 name 속성 값과 같다. 저 URL의 뜻은, 작성자가 지정한 가상의 경로인 "https://localhost/U.. 표를 만들어주는 <table> 태그 태그 홈페이지에서 정보를 표로 만들어서 보여주기 위해서 사용하는 태그이다. 예전에는 table 태그를 이용해서 홈페이지의 골격을 만들었다고 하지만, 지금은 태그로 인해서 골격으로는 사용하지 않는다. 태그 사용법 table.html 이름 기능 글쓴이 HTML 웹페이지 구성 ludeno CSS 웹페이지 이쁘게 만들기 병합 (실행결과) table 태그 내부의 코드들이 테이블 형식이라는 것을 알려주기 위해 사용한다. table 태그에서 border 속성을 이용하여 각 테이블 마다 구분선을 넣어줄 수 있다. thead 태그는 각 하위 컬럼들의 제목에 해당하는 부분이다. tbody 태그는 테이블의 값, 내용에 해당하는 부분이다. tfoot 태그는 테이블의 끝부분 표현한다. 이 태그로 감싸져 있으면 이 태그가 tab.. HTML 주석 기능 주석 주석은 어떤 코드에 대한 설명을 적어놓는 것이다. 코드가 간단하면 필요 없을지 모르지만, 우리가 현재 사용하고 있는 서비스들은 코드의 양이 엄청나기 때문에 코드의 어떤 부분이 어느 기능을 하는 것인지 알기 쉽게 메모하는 느낌으로 사용하는것이 주석이다. 이 주석은 HTML 뿐만 아니라 모든 프로그래밍 언어에 존재할 정도로 단순하지만 그만큼 중요한 역할을 한다. 이 주석은 웹 브라우저에서는 읽히지 않아서 화면에는 보이지 않는다. 주석 사용법 comment.html 주석 (실행결과) 로 닫으면 된다. 줄바꿈 기능이 있는 <br> 태그 태그 줄바꿈 기능을 해주는 태그이다. 줄바꿈은 문서를 작성하다가 한칸 내려가서 입력하고 싶을 때 엔터를 치고 입력을 하게 되는데, 그때 그 엔터 역할이 줄바꿈 기능이다. 태그도 받을 내용이 없이 그저 줄바꿈하는 기능만 있기 때문에 닫을 필요가 없는 태그이다. 태그 사용법 brTag.html 한 문장 이 계속 이어집니다. 한 문장 이 줄바꿈 되었습니다. (실행결과) 단락을 나누는 <p> 태그 태그 어떠한 긴 글에서 단락을 나누게 해주는 태그이다. 웹 브라우저는 html 코드에서 사용자가 임의로 줄바꿈 한 것을 인식하지 못하기 때문에 줄바꿈을 해주거나 단락을 나눠야지 가독성이 올라간다. 태그 사용법 ptag.html 첫번째 단락 두번째 단락 첫번째 단락 두번째 단락 (실행결과) 이미지를 삽입하는 <img> 태그 태그 이미지를 삽입 시킬 수 있는 태그이다. 이 태그는 여는 태그만으로 정보 제공이 가능하기 때문에 닫을 필요가 없는 태그이다. 닫는 태그가 필요없는 대신 여는 태그안에 속성을 넣어서 정보를 제공해 주어야 한다. 태그 사용법 imgfile.html (사용한 사진) (실행결과) 태그에 필수로 들어가야 하는 src 속성은 이미지 파일의 경로를 값으로 받는다. html 파일이 이미지와 같은 폴더 내에 있으면 "이미지 파일 이름.확장자"만 적으면 된다. 하지만 아래의 사진들 처럼 다른 폴더에 사진이 있다면 위의 저 코드로는 이미지를 불러올 수 없을 것이다. 이런 경우에는 각 상황에 맞춰서 경로를 변경해주면 된다. 상위폴더 ../는 상위 폴더라는 뜻을 가지고 있다. 저 경로를 해석하자면, imgfile.html이.. 이전 1 2 다음
