LOG.info("yun's dev");

※ 공간 분할 태그 , HTML4까지 구조잡을때 사용 특정 영역만 CSS style로 지정하고 싶을 때 의미 없는 순수 블록(block) 요소 id나 class로 구분 의미 없는 순수 인라인(inline) 요소 인라인처럼 동작하도록 바꿀 수 있음.(자주 안 씀) 블럭처럼 동작하도록 바꿀 수 있음. 인라인 요소 : 글자 하나하나. 컨텐츠를 감쌀 정도만의 크기. *HTML5 시멘틱 태그 , , , ,

사용자가 데이터를 입력 할 수있는 입력 필드를 지정할 수 있으며 type에 따라 다양한 입력 방식을 선택할 수 있다. (*타입에 대한 설명이 중심이라 태그, 생략) ※ 이 글에 적힌 type list ※ submit / reset text / password / search tel / number / email / url radio / checkbox 날짜, 시간 양식 color / range / 입력양식 주요 속성 input type에 따른 구분 (1) 제출 / 초기화 양식 입력 양식에 기본적으로 들어가는 것. 데이터를 전송하기 위해. -[ submit ] 입력된 것을 제출하는 것. 이를 처리하기 위한 스크립트가 필요하고 의 action 속성에 지정된다. 지정하지 않으면 현재 페이지. -[ reset ..

입력 폼이 여러 개 있을 때, 경계선을 만들어 하나의 그룹화할 때 사용. 위와 같은 양식을 만들기 위한 코드는 아래와 같음. 개인 정보 입력 이름 : 학교 :

*데이터가 오가는 것을 제대로 확인하기 위해 환경 구축 아파치 톰캣(웹 서버), jdk(java developer kit) 웹 양식 : 웹 문서에 어떤 데이터를 입력하고 그 결과값을 가져오기 위해 사용. ex) 구글 텍스트 입력 폼, 네이버 로그인 입력 폼 등등 1. 태그 웹 양식을 만드는데 사용하는 태그. 태그를 감쌈. 사용자가 입력할 수 있는 HTML 폼을 생성하는데 사용되는 태그 태그의 부모 태그, 틀 같은 거 - 태그 속성 └action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(JSP, PHP, ASP 등)의 페이지 지정 └method : 웹 서버와 클라이언트(웹 브라우저) 간의 통신 방법 지정. get 방식, post 방식 └name : 폼 - 태그 속성 사용자가 데이터를 입..

멀티미디어 데이터를 웹 문서에 포함할 때 사용하는 태그 , , 태그도 사용했으나 사진은 , 오디오는 , 비디오는 , HTML은 사용을 권장한다. 1. 이미지 태그 그림 제목 -이미지 파일 확장자 : .gif, .jpg, .png -HTML 문서에 이미지 삽입하는 게 아니라 링크 참조. 참조된 이미지를 위한 공간 생성하는 것. - 태그 속성 src : 이미지 파일이 저장된 경로 alt : 이미지 없을 때 나오는 글자 title : 마우스 포인터를 그림에 올렸을때 뜨는 설명 텍스트 width, height : 너비, 높이를 픽셀 단위 지정. 지정하지 않으면 원본 크기 출력. HTML5에서 지원하지 않는 속성은 CSS에서 지정할 것을 권장. └align, border, hspace, vspace 등 2. 오디..

표 생성. data 관리. 1. 기본 구조 ← 1행 ← 2행 ↑ 1열 ↑ 2열 ↑ 3열 - : 표 제목 - : 표 머리 정의, 셀 제목 글자 강조. - : 행 - : 열 (ex) 2행 3열 표 만드는 코드 2행 3열 table 1행 1열 1행 2열 1행 3열 2행 1열 2행 2열 2행 3열 2. 태그 셀 병합 -rowspan : 행 병합. 셀을 세로로 병합. -colspan : 열 병합. 셀을 가로로 병합. (ex) 아래와 같은 표를 만들고자 할 때 Alpha Beta Gamma Delta Epsilon Zeta 소스코드 행 병합, 열 병합 Alpha Beta Gamma Delta Epsilon Zeta 3. 시멘틱 태그 HTML5에서 필요성이 대두되었음. 틀은 두고 입력된 데이터를 리셋시킬때 이용(?)..

0. 항목(List Item) 목록의 내용이 되는 실질적 태그. 들여쓰기 및 줄 바꿈 기능. , 태그 내부에서 사용되는 자식 태그. 불릿 기호는 CSS에서 설정. 1. 순서 없는 목록(Unordered List) drink coffee latte ade tea -불릿 기호 : disc, circle, square, none CSS에서 스타일 지정 2. 순서 있는 목록(Ordered List) -시작 번호 지정 : start="number" Red Orange Yellow Green Blue Navy Purple -역순서 지정 : reversed Red Orange Yellow Green Blue Navy Purple -순서 속성 지정 : type="1/A/a/Ⅰ/ⅰ" alpha beta gamma del..

공통적인 부분을 떼어내서 W3C STANDARDS W3C MISSION FACTS ABOUT W3C PRESS AND ANALYSTS 태그 의 링크에서 공통적인 부분 http://www.w3.org/ 를 태그 아래 태그로 작성하고 나머지 다른 부분만 태그에 적는다.

다른 사이트 혹은 같은 문서 내 다른 위치로 이동할 때 사용하는 태그 ex) GOOGLE 사이트로 연결되는 링크 GOOGLE -href 속성값 : url 종류_예시 절대경로 URL 표기 : http://www.w3.org/index.html 상대경로 URL 표기 : 작성 중 html 기준으로 경로 설정 페이지 내 요소 위치 표기 : #아이디명 프로토콜 URL 표기 : http://, ftp://, mailto:, file: 등 스크립트 표기 : javascript:alert('hello'); -target 속성값 : 연결된 링크를 여는 방법 지정 _self : 현재 웹 브라우저 창에 연다. 기본값(default) _blank : 새로운 웹 브라우저 창에 연다. _parent : 부모 웹 브라우저 창에 연..

HTML에서 text tag와 특수문자 입력에 대해 정리 1. Text formatting -, : 글자 굵게 Life is full of ups and downs. Life is full of ups and downs. -, : 글자 기울이기 Life is full of ups and downs. Life is full of ups and downs. - Life is full of ups and downs. -, Life is full of ups and downs. -, Life is full of ups and downs. - Life is full of ups and downs. -etc (* : 사용자 입력 그대로 출력.) : 컴퓨터 코드 표시 : 컴퓨터 프로그램 샘플 출력 표시 : 키보드 입..

1. HTML 문서를 작성할 때 -소문자 작성을 권장한다. -연속된 공백이나 줄 바꿈은 하나로 처리한다. -태그의 포함 관계를 표현하기 위해 들여쓰기한다. -종료 태그 반드시 사용 : ~ 단축 표기 형식 : , -주석문 : 본문에 영향을 주지않는 보충 설명같은 것. 웹페이지 소스 코드를 확인할 수 있기 때문에 html에 주석을 잘 쓰지 않는다. 2. 태그(Tag) = 요소(Element) 문서의 구조를 표현. 정보를 포함. 스타일은 CSS에서 설정. ex) 태그는 '제목'이라는 의미(정보)를 담고 있음. 단순히 큰 글자를 쓰기 위함이 아님. (1) 태그 속성 (*태그(tag) - , , , …) ~ ~ 대표적인 속성 종류 -Class ~ -Id ~ html 문서 내에서 해당 태그를 유일하게 식별하는 역할..

※ HTML 기본 구조 vscode에서 HTML 기본 구조를 자동완성하는 법 1. 확장자 html로 저장 vscode 실행 후, 새 파일을 만든 다음 '파일명.html'로 저장해야 자동입력 기능이 활성화된다. 2. ! + [ Tab ] ! 입력 후 엔터 대신 [ Tab ]키를 누른다. 아래와 같이 HTML 기본 구조가 자동완성된다. 기본 구조외에도 자동입력된 내용들이 있는데 HTML 문서 구조 설명하면서 같이 정리. 각 태그 설명 ↓ HTML 문서의 시작과 끝을 알림. 언어(lang) 속성은 주된 언어값을 설정하는 것. 웹 페이지에 표시되지 않는 웹 페이지 정보 정의. , , , 등등 (참고) UTF-8 : 세계의 모든 문자와 기호를 포함하는 문자 집합 웹 페이지가 출력되는 장치의 화면 크기에 맞춰 조절..