hnbae0319
2022.03.07
@hnbae0319님이 새 포스트를 작성했습니다.
[HTML/CSS 1일차] 태그 정리
HTML이란 ? 하이퍼텍스트 마크업 언어라는 의미의 웹 페이지를 위한 지배적인 마크업 언어 태그(tag) : html의 명령어를 <>를 사용하여 나타냄. 보통 <태그>로 시작해서 </태그> 형식으로 끝냄. html문서를 구성하는 기본 단위 기본 태그 <!DOCTYPE html> : 웹 문서의 유형을 html로 지정 <html lang="ko"> : 문서를 html로 시작, 언어를 한국어로 지정 (lang="ko"부분) ex) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> Hi </title> </head> <body> ~~ </body> </html> 태그의 분류 Block 태그 Block 태그는 새로운 라인에서 시작되며, 다음에 오는 모든 태그들은 새 라인에서 시작. 행렬로 비교하면 행에 해당 Block 태그들은 css의 속성 중 height, width, margin, padding을 적용할 수 있음. ex) <p>, <div> Inline 태그 새라인에서 시작하지 않고 현재 라인에서 시작. 행렬로 비교하면 열에 해당 css의 속성 중 height, width, margin, padding 등의 속성을 적용할 수 없음. ex) <span> 쌍으로 된 태그 <태그> ~ </태그> 사이에 코드를 넣는 태그. ex) <p>, <div> 쌍이 아닌 태그 태그의 시작과 끝이 따로 없는 태그 ex) <br>, <input> 태그 종류 HTML 태그 : <html> HTML로 작성되어 있다는 것을 알려줌. html 파일 전체를 감싸는 태그 HEAD 태그 : <head> 머리말에 해당, 브라우저의 정보 입력 css나 javascript를 연결해줌. 파비콘이나 문자열 인코딩과 같은 문서의 다양한 정보를 제공 META 태그 : <meta> 문서의 문자열 인코딩 등과 같은 문서의 다양한 정보를 제공, 메타 데이터 입력 ex) <meta charset="UTF-8"> 처럼 입력 TITLE 태그 : <title> 타이틀바에 입력될 텍스트, 문서 제목 LINK 태그 : <link> 주로 외부 css파일을 연결할 때 사용 SCRIPT 태그 : <script> 외부 js 파일을 연결하거나 javascript 코드를 입력할 때 사용 BODY 태그 : <body> 본문에 해당하는 부분 실제 보여지는 화면에 해당 문서 내용 P 태그 : <p> 단락을 나눌 때 사용 HTML에서는 엔터를 쳐서 여러 문장을 입력하더라도 줄바꿈이 적용되지 않음 P 태그 안에서는 하나의 문장이 되고 P태그가 종료되면 단락이 됨. BR 태그 : <br> 줄바꿈 B 태그 : <b> 굵은 글씨 I 태그 : <i> 이탤릭체 아이콘 : fontawesome을 이용하여 아이콘을 표시할 때 사용 H 태그 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 제목에 해당 숫자가 낮을수록 글씨가 큼 HR 태그 : <hr> 직선을 그림 DIV 태그 : <div> 상자를 만듬 SPAN 태그 : <span> 일부의 디자인, 기능 변경에 사용 IMG 태그 : <img> 이미지를 가져옴 src 속성 : 가져올 이미지의 주소 alt 속성 : 이미지 불러오기 실패시 보여줄 문자열, 대체용 텍스트 width 속성 : 이미지의 가로 길이 height 속성 : 이미지의 세로 길이 ex) height="auto"/픽셀 단위 px/브라우저 창의 크기 단위 % INPUT 태그 : <input> 입력창을 만드는 태그 속성 type에 따라 다양한 속성을 가진 입력창을 생성 text : 텍스트를 입력할 수 있는 입력창 password : 비밀번호를 입력할 수 있는 입력창 checkbox : 체크 박스를 만듦 radio : 라디오 박스를 만듬 button : 버튼을 만듬 submit : 데이터 전송 버튼을 만듬 reset : 초기화 하는 버튼을 만듬 file : 파일을 선택하는 창을 만듬 hidden : 사용자에게 보이지 않는 창을 만듬 email : email 형식의 주소를 입력하는 창을 만듬 url : url 형식의 주소를 입력하는 창을 만듬 ex) <input type="file"> <input type="checkbox"> 확인 BUTTON 태그 : <button> 버튼을 생성하는 태그 속성 type에 따라 다양한 속성을 가진 버튼을 생성 submit : 서버로 전송 reset : 초기화 button : 일반 버튼과 같음 FORM 태그 : <form> 데이터 전송을 위한 태그 action : 데이터를 전송할 url. 서버 프로그램 지정 method : 데이터 전달 방식이 get(드러나게)인지 post(드러나지 않게)인지 결정 name : javascript로 폼 이름 지정 target : 열어볼 파일 위치 지정 autocomplete : 자동완성기능지정(기본값 on) <fieldset> : 폼 내부에서 구역을 나눔 A 태그 : <a> 클릭 시 다른 주소로 이동하는 태그 href : 넘어갈 주소 ex) <a href="http://www.google.com"> 구글 </a> target="_blank" : 새 탭에서 열기 UL 태그 : <ul> 번호가 없는 리스트 LIST 태그를 이용 OL 태그(ordered list) : <ol> 번호가 있는 리스트 LIST 태그를 이용 type : 1= 숫자(기본값) / a = 영문 소문자 / A = 영문 대문자 / i =로마 숫자 소문자 / I = 로마 숫자 대문자 start="2" : 2부터 시작 LI 태그 : <li> UL 태그나 OL 태그 안에서 사용되는 LIST 태그 SELECT 태그 : <select> 선택 박스 창을 만드는 태그 OPTION 태그를 이용해 여러 내용을 입력