하이퍼링크란 웹문서에서 다른 웹문서로 클릭만으로 이동시킬 수 있게 하는 기능 텍스트문구를 클릭해 이동하거나, 이미지를 클릭해 이동하거나, 현재 페이지 내에서도 링크를 통한 이동이 가능 인터넷이 연결된 상황이면 현재 서비스 되고 있는 웹페이지도 링크 가능 하이퍼링크 태그 (a태그) 글자 target 속성 _self” : 하이퍼링크 클릭 시 현재 페이지에서 열기 (생략 시 기본값) "_blank" : 하이퍼링크 클릭 시 새 창에서 열기 href 속성에 id값 대입 시 현재 문서 내에서 해당 id값이 있는 곳으로 이동 글자 글자
Front-End/HTML
블럭 요소 한줄 단위로 영역을 차지하는 요소 줄바꿈이 적용되어있어 이미 존재하는 요소의 다음줄에 출력 h , p , pre , "div" 등이 있음 인라인 요소 content내용에 해당되는 부분만 영역을 차지하는 요소 줄바꿈이 적용되지 않아 옆으로 연이어져서 출력 다음줄로 넘기고자할때는 br로 개행 해야함 b, s , mark, input .... , "span" 등이 있음 div 태그와 span 태그 차이점 1. 차지하는 영역 (줄 바꿈 적용) div 태그 : 블럭요소 (한 줄 단위 영역 차지) span태그 : 인라인 요소 (content 영역만을 차지) 2. 영역 지정 방식 div 태그 : 전체 감싸는 사각형 박스로 영역 지정 span태그 : 문장 단위로 영역 지정 iframe 태그 현재 문서 내 다..
폼 관련 태그 form태그 내의 제출 버튼 클릭시 해당 form 내에 사용자가 입력한 값들을 action에 지정한 서버로, method에 작성한 요청 전송 방식대로 넘기면서 입력한 값들을 key=value 세트 (=쿼리스트링) 로 전달 및 요청(request)하는 역할 수행 폼에서는 name 속성이 key값임 (id가 아님) ★ input 태그에 name 속성이 없으면 값이 전달되지 않음 action 속성 해당 form내에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 제시 method 속성 (get, post) 요청 전송 방식을 지정하는 속성 (기본값은 get) get과 post 방식이 있음 get 방식 : 요청시 사용자가 입력한 값들이 url에 노출된다 post방식 : 요청시 사용자가 입력한 ..
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..
