본문 바로가기

HTML_CSS

 (14)
태그에 테두리를 만들어내는 border 속성 border border 속성은 HTML의 각 태그들에 테두리를 만들어낼 수 있다. border 속성을 이용하여 태그들의 경계가 어디까지인지 육안으로 식별 가능하며, 웹 브라우저에서 각각의 태그들을 구분하기 쉬워진다. border 스타일 종류 각각의 스타일은 전부 3px의 두께를 기준으로 표현했다. solid dotted dashed double inset outset ridge groove border 속성 사용법 border 속성 하나만 사용 border 속성 하나만을 이용하여 두께, 테두리 스타일, 색상을 지정할 수 있다. 단, 테두리의 형태는 필수로 지정해줘야지 화면에 나오게 된다. border.html border (실행결과) border border-style 속성 사용 border-style..
CSS를 HTML에 적용시키는 방법 CSS CSS는 'Cascading Style Sheets'의 약자로써, HTML을 이용하여 기본적인 웹 페이지의 골격을 만들었다면 CSS를 이용하여 색상, 크기, 위치, 모양 등을 지정할 수 있다. CSS에 대해 아는게 많을 수록 웹 페이지의 가시성이 높아지고, 스타일있게 꾸밀 수 있다. CSS를 HTML에 적용시키는 방법 CSS를 HTML에 적용시키는 방법에는 3가지 정도가 있다. HTML 내부에 태그를 이용한 '내부 스타일시트' 방식 별도의 파일을 이용하여 HTML에 링크시키는 '외부 스타일시트' 방식 HTML 태그 내부에 속성으로 스타일을 지정하는 '인라인' 방식 내부 스타일시트 내부 스타일시트 방식은 HTML의 Hello CSS (실행결과) 외부 스타일시트 외부 스타일시트 방식은 html 파일 ..
사용자의 입력 값을 받을 수 있는 또 다른 태그 <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 한 문장 이 계속 이어집니다. 한 문장 이 줄바꿈 되었습니다. (실행결과)

티스토리툴바