Web/HTML

HTML 따라하기 9일 차 | form의 GET방식과 POST방식

form method - method 속성을 이용해서 get과 post를 사용 할 수 있음 - method 속성을 명시하지 않고 사용 할 시 기본값(Default)은 get방식으로 설정됨 - or GET 방식 - form에 적힌 데이터들이 주소창(URL)의 ?뒤에 전달되고 데이터 하나당 &로 끊어서 전달됨 - 주소창(URL)에 담겨서 전송되기 때문에 데이터 길이에 제한 있음 O - 퍼머링크로도 사용 가능 O --> 정보를 식별하는 고유한 식별자(고유한 주소체계) POST방식 - form에 적힌 데이터들이 header의 body에 담겨서 전송됨 - 데이터 길이 제한 없음 X - 퍼머링크로 사용 불가 X 예제 코드 로그인 상태 유지 로그인 상태 유지 로그인 상태 유지 예제 코드 | 결과

HTML 따라하기 8일 차 | form input select textarea

form 태그 - 사용자와 웹어플리케이션(사이트)간의 상호 작용이 가능하도록 해주는 태그(기술) - 사용자로부터 입력하는 데이터 형식을 제공하는 태그들을 묶어주는 태그이며 action속성에 지정된 페이지로 입력된 데이터를 전송하는 역할을 수행하는 태그 => 전송되는 데이터는 서버측(JSP 등)에서 처리할 수 있음 - 형식으로 사용하며 시작태그와 끝태그 사이에 또 다른 태그가 올 수 없음 input 태그 - 태그 안에서 추가되는 입력 요소들 중 가장 중요한 태그 - 사용자로부터 정보를 받아들이는 용도로 사용됨 - type이라는 속성을 이용해 다양한 입력 양식으로 변경하여 사용가능 - 사용자로부터 한 줄의 텍스트를 입력받는 속성 - 사용자로부터 숫자를 입력받는 속성 - 사용자로부터 한 줄의 텍스트를 입력받는..

HTML 따라하기 7일 차 | iframe

iframe이란 - 웹 페이지안에 또다른 웹 페이지를 제한없이 삽입 할 수 있는 기능이다. - src로 웹 페이지 경로를 지정함 - 사용법 하이퍼텍스트와 연동 가능 - 태그안에 target을 의 name과 동일하게 설정하여 하이퍼텍스트를 클릭했을 때 해당 하이퍼텍스트 href에 지정된 경로로 iframe안에 웹 페이지를 띄워 줄 수 있다. - 사용법 test01.html test02.html test03.html test04.html 예시 코드 iframe으로 페이지 내에 다른 내용 넣기 src속성으로 안에 보여질 내용의 경로를 지정하고 width/height속성으로 iframe의 가로/세로 크기를 지정. iframe..

HTML 따라하기 6일 차 | 하이퍼 텍스트 링크 만들기

하이퍼 텍스트 링크를 만들어 주는 태그 - 로 하이퍼 텍스트를 만들어 줄 수 있음 - 태그의 속성값으로 href와 target이 있음 href - 클릭 시 이동할 링크를 설정 target - 링크를 여는 방식 이름 효과 _self 현재 페이지(기본값) _blank 새 탭 _parent 부모 페이지로, iframe 등이 사용된 환경에서 쓰임 _top 최상위 페이지로, iframe들이 사용된 환경에서 쓰임 직접입력한프레임이름 직접 프레임이름을 명시해 사용 가능 사용법 Go NAVER 예시 코드 - 1 링크수업-1 링크수업-2 링크수업-2(Gallery Menu) a태그로 링크 걸기 링크 걸린 텍스트의 특징 색상 변화 blue - 초기 링크. (이동한..

HTML 따라하기 5일 차 | 이미지 만들기

- 종료가 없음 - src="./파일경로"를 사용하여 인터넷이나 자신의 컴퓨터에서 이미지를 불러옴 - alt="대체텍스트"를 사용하여 사진을 가져오지 못할 경우 alt안의 텍스트로 대체함 - 사용법 : - 결과 : 절대 경로 - 웹 문서의 위치와 상관없는 고정된 주소 - 실행 파일의 위치와 상관 없이 절대 경로는 항상 같은 주소를 가르킴 - 내 컴퓨터에서의 사용법 : - 인터넷에서의 사용법 : 맨위의 https://의 사용법과 동일 상대 경로 - 웹 문서의 위치에 따라 변동되는 주소 - 실행 파일의 위치가 달라지면 위치에 따라 경로가 바뀔 수 있어서 파일을 옮기면 바꿔줘야 함 - 점 하나의 ./는 현재폴더, 점 두개의 ../는 이전폴더를 나타냄 - 사용법 : width & height - 태그의 크기를 ..

HTML 따라하기 4일 차 | 테이블 만들기

HTML 테이블 - 을 사용하여 테이블의 시작과 끝을 알림 - 태그 안에 행을 사용하여 행을 만듬 - 태그 안에 제목칸나 일반칸을 사용하여 열을 만듬 - 그림으로 그린 테이블 느낌 colspan - 가로 칸(오른쪽 열)과 칸을 합침 - 와 에 적용 가능 - 사용법 : rowspan - 세로 칸(밑에 행)과 칸을 합침 - 와 에 적용 가능 - 사용법 : table 예시 코드 table - 표 tag 설명 table 표를 구성하는 태그 tr 줄을 구성하는 태그 th 제목칸을 구성하는 태그 글자는 볼드체, 내용은 수평 중앙정렬 됨. td (일반)칸을 구성하는 태그 세로형 ID Name lhj23 Lee hee ju jej456 Ju eun ji 가로형 ID lhj23 jej456 Name Lee hee ju ..

HTML 따라하기 3일 차 | 목록 만들기와 특수 문자 태그

HTML 목록의 종류 - 순서가 없는 목록 - 순서가 있는 목록 - 정의 목록 순서없는 목록 - unordered list - 태그 안에 를 여러개 선언하여 사용함 - 사용법 : 목록1목록2목록3 목록1 목록2 목록3 순서 있는 목록 - ordered list - 태그 안에 를 여러개 선언하여 사용함 - 사용법 : 목록1목록2목록3 목록1 목록2 목록3 의 속성 - start 속성으로 처음 시작 값 변경이 가능 하다 - type 속성으로 숫자, 문자, 로마자 같은 타입의 글자 변경이 가능하다 정의 목록 - description list - 태그 안에 나 를 여러개 선언하여 사용함 - 사용법 : 정의 제목정의내용1정의내용2 정의 제목 정의내용1 정의내용2 특수 문자 태그 - &로 시작하여 ;으로 끝나는 태..

HTML 따라하기 2일 차 | HTML주석과 글자를 변경하는 tag들

HTML 주석 - 주석 내부에 적은 내용들은 페이지에 내용이 출력되지 않음 - 사용법 : 글자를 변경하는 tag들 - 태그나 태그와 같은 줄바꿈 기능은 없음 - tag로 감싼 글자는 속성이 변경 됨 - 진하게 표시됨 - 볼드체 - 진하게 표시됨 - b와 같음 - 중요하다는 의미로 쓰임 - 기울어짐 - 이텔릭체 - 기울어짐 - 강조한다는 의미로 쓰임 - 작아짐 - 윗첨자 - 아랫첨자 - 마크펜 효과 예시 코드 글자를 변경하는 tag들 - (inline tag) b - bold bold 볼드체 strong - strong strong (중요하다는 의미에서) 볼드체 i - italic italic 이텔릭체 em - em em (강조한다는 의미에서)이텔릭체 small - small small 글자 크기를 작게 ..

HTML 따라하기 1일 차 | html head body

HTML이란? - Hyper Text Markup Language의 약자로서 문서에서 다른 문서로 접근 할 수 있는 텍스트를 의미 - 명령(tag)으로 구성되며 태그tag는 각괄호 안에 들어가며 시작와 종료가 한 쌍으로 이룸 - 웹페이지를 만드는 언어 - 웹페이지의 구조를 담당 - .txt 확장자명을 .html로 바꿔서 실행가능 html - html의 시작을 알리는 태그 - html의 시작과 끝부분에서 열고닫는 태그 head - html의 태그 안에 상단부에 선언 - head안의 내용은 페이지에 표시되지 않는 것들을 사용 - 페이지 제목, css 정보에 대한 링크, 기타 메타데이터를 포함 head | title - html문서의 제목 - 인터넷 익스플로어 상단의 제목을 바꿈 body - html의 태그 ..