폼 관련 태그 form태그 내의 제출 버튼 클릭시 해당 form 내에 사용자가 입력한 값들을 action에 지정한 서버로, method에 작성한 요청 전송 방식대로 넘기면서 입력한 값들을 key=value 세트 (=쿼리스트링) 로 전달 및 요청(request)하는 역할 수행 폼에서는 name 속성이 key값임 (id가 아님) ★ input 태그에 name 속성이 없으면 값이 전달되지 않음 action 속성 해당 form내에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시 method 속성 (get, post) 요청 전송 방식을 지정하는 속성 (기본값은 get) get과 post 방식이 있음 get 방식 : 요청시 사용자가 입력한 값들이 url에 노출된다 post방식 : 요청시 사용자가 입력한 ..
Front-End
input 태그 사용자에게 입력받을 수 있는 텍스트상자 또는 체크박스 등을 만들 수 있음 텍스트와 관련된 input 태그의 타입 및 태그 text 타입 한 줄짜리 텍스트 상자 (기본값) password 타입 화면에 텍스트가 안 보이는 텍스트 상자 search 타입 x버튼으로 입력한 값을 삭제할 수 있는 텍스트 상자 url 타입 전송 요청을 보낼 때 http가 없으면 전송이 안되는 텍스트 상자 email 타입 전송 요청을 보낼 때 @이 없으면 전송이 안되는 텍스트 상자 textarea 태그 여러 줄을 입력할 수 있는 텍스트상자 cols, rows 속성으로 기본 길이 설정, 값이 초과하면 스크롤바가 생김 resize:none; 스타일로 텍스트상자를 사이즈 조절 못하게 막을 수 있음 숫자와 관련된 input ..
이미지 관련 태그 및 속성 이미지 관련 태그 img 태그 src 속성 이미지 경로 지정 / : 하위 경로를 의미 alt 속성 사진의 경로가 잘못되거나 이미지를 제대로 표현할수 없을때 대체 텍스트 시각장애인들을 위한 스크린리더(화면낭독기)에서 이미지를 읽어주는 설명 문구 width / height 속성 이미지의 가로, 세로 길이 조정 고정길이, 가변길이로 조정 고정길이(px, 기본값) : 화면 사이즈가 조정되어도 크기 변함이 없음 가변길이(%) : 화면 사이즈나 부모요소 사이즈에 따라 이미지 크기가 바뀜 미디어 관련 태그 및 속성 오디오 관련 태그 audio 태그 비디오 관련 태그 video 태그 src : 오디오, 비디오 경로 controls : 자동재생 여부 지정 autoplay : 자동 재생 loop..
표 문서에서 다량의 데이터를 정리해서 표현하고자 할 때 사용, 행과 열로 이루어져 있음 table, tr, th, td 태그로 구성되어 있음 table 태그 기본적인 표를 생성해주는 태그 tr 태그 표의 한 행을 나타내는 태그 th 태그 표의 제목셀을 나타내는 태그 가운데정렬과 bold 효과가 적용 td 태그 표의 일반셀을 나타내는 태그\ caption 태그 테이블의 제목 추가 기본 위치는 테이블 상단 border 속성 표 테두리 두께 설정 (기본 두 줄) 테두리 한 줄만 나오게 하고자 할 때 border-collapse : collapse; 셀의 크기를 조정하는 속성 (width, height) width 속성 : 너비 조정 (한 열에 모두 영향을 끼침) height 속성 : 높이 조정 (한 행에 모두..
li 태그 목록 (list의 약자, 앞에 불릿 기호가 생김) 불릿 기호 : 검은 점, 흰색 점, 네모, 흰색 등 목록 문자 앞에 붙는 것 ul 태그 순서 없는 목록 태그 검정 동그라미, 흰색 동그라미 등 ul, ol 태그는 내부적으로 li 태그를 자식 태그로 활용 ul, ol 요소에는 기본적으로 위 아래 margin, padding이 존재 목록 안에 목록을 넣을 수 있음 ol 태그 순서 있는 목록 태그 type 속성(Attribute)을 이용해서 변경 가능 속성값 : 1(기본값) , A , a, I , i start 속성값을 이용해서 시작값 변경 가능 (정수값여야함) reversed 속성 : 순서를 역순으로 표기 HTML -- D CSS -- C JavaScript -- B JQuery -- A dl 태..
h1~h6 태그 글자 크기를 조절하는 태그 br 태그 줄바꿈 태그 hr 태그 가로로 구분선, 수평선을 긋는 태그 문단 영역을 나누는 태그 (p, pre) 태그 시작과 끝에 자동으로 문단을 다음 라인으로 이동시킴 p태그, pre태그, h태그가 있음 p 줄바꿈을 별도의 태그로 입력 해줘야함 한개의 공백만 표시함 공백을 여러 개 표시하고 싶다면 기호문구 ( ) 작성 pre 줄바꿈 등을 포함하여 입력한 내용을 있는 그대로 표현하는데 특화됨 여러 개의 공백을 인식 글자를 굵게 표시하는 태그 (b, strong) b 태그 (더 자주쓰임) strong 태그 글자 기울임꼴 태그 (i, em) i 태그(더 자주 쓰임) em 태그 mark 태그 형광펜 효과를 주는 태그 u 태그 글자 밑줄 태그 취소선 태그 (s, stri..
다운로드 https://code.visualstudio.com/ 환경설정 live priview (실행 결과물을 실행하기 전 실시간으로 볼 수 있음) 한국어 auto rename tag (열어주는 태그를 수정하면 닫아주는 태그도 수정) 단축키 ctrl + / 한 줄 주석 alt + shift + a 블록 주석 묶기 ctrl + a 전체 선택 ctrl + k + f 자동 정렬 ctrl + / ctrl - 폰트 사이즈 조절 ctrl + x 한 줄 삭제 alt + 위 아래 방향키 한 줄 이동 alt + shift + 위 아래 방향키 한 줄 복사 현재 문서타입이 HTML 형식 문서임을 선언 없으면 html문서를 일반 텍스트 파일로 처리함 html 말고도 properties, xml 등이 올 수 있음 DOCTYP..
