Front-end/HTML 10

[HTML] ★ input tag(입력 태그)

1. ★form 태그 - 입력한 데이터를 웹서버로 전달하는 태그 - input 태그를 포함하는 태그 - ex) 로그인, 회원가입, ... - action 속성 : 데이터를 가지고 이동할 페이지를 지정 - method 속성 : 데이터의 이동 방식을 지정, get 방식, post 방식 → get 방식 : 입력한 데이터가 url 에 노출하여 이동하는 방식, 보안에 취약 장점 ) post 방식에 비해 상대적으로 속도가 빠름 단점 ) 보안에 취약 → post 방식 : 입력한 데이터를 url 내부에 숨겨서 이동하는 방식 장점) 보안에 유리 단점) 상대적으로 속도가 느림 2. input 태그 : 데이터를 입력하는 태그 - type에 따라 많은 종류의 input 태그가 있음 - type : text(가장 많이 사용),..

Front-end/HTML 2022.08.29

[HTML] semantic tag

● semantic 태그 - 기능이 아니라, 의미를 강조하여 사용하는 태그 header : 상단 타이틀 nav : 상단 메뉴 article : 본문 대분류 section : 본문 대분류 안의 소분류 aside : 본문 안의 사이드 메뉴 footer : 하단 부가 설명 # lorem ipsum : 로렘 입숨, 의미없는 텍스트 내용을 채워 사용하는 것 (연습시안 때 사용) 웹페이지 타이틀 메뉴항목1 메뉴항목2 메뉴항목3 메뉴항목4 메뉴항목5 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quo et voluptate. Veniam deleniti dolore doloribus rerum vero amet, eius quas, saepe maxim..

Front-end/HTML 2022.08.29

[HTML] ★a tag

- anchor(닻) - 하이퍼링크를 거는 태그 - 텍스트 또는 멀티미디어에 링크를 걸어 페이지를 이동하도록 하는 태그 1. href 속성 - hyperlink reference 2. target 속성 : _self, _blank 이 두 가지 속성을 사용함. - _self: 기본값, 해당 페이지에서 이동하는 속성 - _blank: 새로운 페이지를 만들어서 이동하는 속성 - _parent: 해당 페이지의 부모 프레임에서 이동하는 속성 - _top: 현재 윈도우 전체로 이동하는 속성 3. a 태그가 설정된 텍스트의 스타일 - 기본 스타일 링크 : 밑줄, 파란색 - 방문했던 링크 : 밑줄, 보라색 - 활성화된 링크 : 밑줄, 빨간색 a 태그 - 하이퍼링크 태그 1. 텍스트 설정 하이퍼링크 W3..

Front-end/HTML 2022.08.29

[HTML] 이미지 태그

● img 태그 - 속성 : src(이미지의 위치), alt(대체 텍스트), width(가로 길이), height(세로 길이) - img 태그에서 사용 가능한 이미지 파일 : png, jpg, gif 파일. ex) bmp 파일은 사용 불가 ● 경로 지정 방법 1. 상대 경로 : 현재 html 파일로부터 상대적인 위치 - .(현재 위치), ..(상위위치), /(하위위치) - 웹에서는 대부분 상대 경로를 사용함 2. 절대 경로 : 해당 드라이브 위치로부터 찾는 절대적인 위치 - 웹에서는 절대 경로를 거의 사용하지 않음 ● 줄바꿈과 크기 속성에 따른 태그의 구분 - 블럭 속성을 가지는 태그 - 인라인 속성을 가지는 태그 이미지 태그 1. 이미지 태그 속성 2. 이미지 파일의 경로 지정 (1) 상대 경로 (2)..

Front-end/HTML 2022.08.26

[HTML] 테이블 태그

● table : 테이블 전체 태그 - tr : 행, table row - th : 열, table head, 제목, 굵게, 가운데 맞춤 - td : 열, table data, 일반, 기본, 왼쪽 맞춤 수업 시간표 시간 월요일 화요일 수요일 목요일 1교시 국어 역사 사회 영어 2교시 영어 미술 국어 수학 3교시 수학 국어 수학 과학 4교시 과학 체육 사회 시간 월요일 화요일 수요일 목요일 1교시 웹응용 2교시 웹프로그래밍 3교시 4교시 자바스크립트 5교시 1. 시멘틱(semantic) 태그 : 특별한 기능이 있는 것이 아니라, 의미를 가지는 태그 2. 테이블에서 사용하는 시맨틱 태그 - thead : 테이블의 제목 - tbody : 테이블의 본문 - tfoot : 테이블의 꼬리말 요안도라 객실 방이름 대..

Front-end/HTML 2022.08.25

[HTML] 목록태그

1. 순서 없는 목록 : ul 태그, unordered list - type 옵션에서 블릿의 모양을 변경 - 블릿(bullet) : disc(꽉찬 원, 기본값), circle(빈 원), square(꽉찬 사각형) 2. 순서 있는 목록 : ol 태그, ordered list - type 옵션에서 숫자를 변경 - 숫자: 1(아라비아 숫자, 기본값), A(알파벳 대문자), a(알파벳 소문자), I(로마자 대문자), i(로마자 소문자) - start : 시작번호를 지정 - reversed : 숫자를 역순으로 표시 2022년 프로야구 구단 리스트 ssg 랜더스 LG 트윈스 KT 위즈 키움 히어로즈 KIA 타이거즈 롯데 자이언즈 NC 다이노스 두산 베어스 삼성 라이온즈 한화 이글스 2022년 프로야구 순위 ssg ..

Front-end/HTML 2022.08.25

[HTML] 기본 태그

1. 텍스트 태그 - 태그는 줄바꿈의 여부에 따라 2가지 유형으로 구분 1) 블럭(block) 태그 : 줄바꿈을 하는 태그 2) 인라인(inline) 태그 : 줄바꿈을 하지 않는 태그 1-1) 블럭 태그 - 자주 사용하는 태그: hn, p, br, hr 1. hn 태그 : 제목, h1 ~ h6, header, 굵은 글씨, 줄바꿈 처리, h1>h6 순으로 큰 글자 크기 2. p 태그 : 문단(단락), paragraph, 줄바꿈 처리, 일반적인 문단의 텍스트를 표시할 때 많이 사용 3. br 태그 : 줄바꿈, 단독 태그(열고 닫고 없음), line break 4. hr 태그 : 수평선, 단독 태그, horizontal line 5. pre 태그 : 태그에 쓰는 대로 화면으로 출력, 들여쓰기 속성과 글자크기 ..

Front-end/HTML 2022.08.25