본문 바로가기

HTML/기본 이론

 (10)
[HTML] Chapter 10. Tag 모음 (Ctrl+F) 1. 기본 요소 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. HTML 문서의 루트 요소(root element)를 정의함. 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함. 해당 문서의 콘텐츠 영역을 정의함. 해당 문서에 대한 정보인 메타데이터(metadata)를 정의함. 해당 문서의 제목(title)을 정의함. 해당 HTML 문서의 스타일 정보를 정의함. 자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함. 변수(variable)를 정의함. 클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함..
[HTML] Chapter 09. 데이터 전송 1. 개요: 사용자 데이터를 취하는 방식 ◍ Get 방식: form을 통해 지정한 양식으로 데이터를 추출하고 jsp를 거쳐 Database에 저장한다. ◍ Post 방식: Server의 post 변수에 데이터를 저장한다. 도메인 위치에 정보가 보이지 않아 보안에 이점이 있으나 해당 방식을 사용하려면 Server가 필요하다. 1.1. Get 방식과 Post 방식의 비교 1.2. 데이터 전송 방식의 차이 2. 데이터 입력과 전송을 위한 포함: 폼은 사용자가 입력한 데이터를 전송하기 위해 사용하는 태그로, 서버에 정보를 전달하고 저장하는 기능을 한다. 또한 해당 정보를 기반으로 서버에서 해당하는 페이지를 찾고, 다른 웹 페이지를 보여준다. 기본적으로 input과 select를 통해 데이터를 입력받을 수 있다...
[HTML] Chapter 08. 사용자의 데이터 입력 1. 입력 값에 대해서 웹 페이지는 정보를 상호 교환하며 화면을 표시하는 기능이다. 검색 부터 로그인까지 웹의 기능의 구현에는 사용자가 입력해야할 정보가 필요하다. 웹 페이지의 기능과 다양한 플랫폼은 사용자로부터 데이터를 받고, 해당 데이터를 통해 사용자가 원하는 정보를 처리하는 일련의 과정을 가진다. div가 화면 구현에 필요한 중요한 기능이라면, 입력 값을 받는 것은 기능 구현에 매우 중요한 기능이라고 할 수 있다. 2. 사용자가 값을 입력하는 기능: 태그는 사용자가 웹 페이지에 정보를 전달할 때 사용하는 태그이다. 기본적으로 하얀 박스로 데이터 입력이 가능하도록 하는데 type에 따라 다양한 모습으로 구현이 가능하다. 현재 데이터 입력 및 데이터 베이스에 대한 지식이 없기 때문에 입력받은 정보를 활..
[HTML] Chapter 07. 문서에서 다른 페이지로 이동 1. 문서를 이동시키는 Tag: a 웹 페이지는 상호작용을 통해 페이지를 이동하고 정보를 확인할 수 있는 장점이 있다. 해당 태그의 기본형은 로 이동로 연결한 링크의 이름을 지정할 수 있다. 기본적으로 연결할 html이 지정해야하므로 를 기본형으로 이해하는 것이 좋다. href (html reference의 약자)에 연결할 html 파일을 지정하여 html 간의 이동을 지정할 수 있다. 해당 경로 지정은 src와 동일한 규칙으로 적용할 수 있지만, alt 및 width, height는 적용할 수 없다. 또한 해당 에 img 태그를 삽입하여 이미지 클릭시에 이동하도록 지정할 수 있다. 2 새창에서 열기: target=”” 태그는 다른 html 로 이동시켜주는 역할을 한다. 탭 전환없이 이동하고자 한다면 해..
[HTML] Chapter 06. 멀티미디어 삽입과 경로 지정 1. 파일 경로 지정 html에서 이미지를 구현할 때 올바른 경로 지정이 매우 중요하다. src로 경로를 지정하면 기본적으로 html과 같은 폴더의 이미지 파일을 구현한다. 하지만 웹 사이트의 구현은 다양한 이미지가 필요하고 이를 체계적으로 정리하여야 수정 및 정보 확인이 쉽다. 1.1. 기본 파일 경로: ./ 파일 경로 지정은 src=”파일 이름”을 통해 지정한다. 파일 이름은 해당 이미지의 속성값을 포함한 정보이다. (.png/ .jpg 등) 폴더를 별도로 지정하지 않으면 html과 같은 폴더에서 이미지를 탐색한다. ./ 는 파일 경로를 지정할 때 ‘같은 폴더 안에’라는 의미를 가진다. 예를 들어, 로도 이미지 구현이 가능하지만. ./를 이용하여 로도 같은 이미지를 구현할 수 있다. 1.2. 하위 파..
[HTML] Chapter 05. 표만들기 1. 표를 만드는 Tag: 표를 만드는 Tag는 로 해당 태그만으로는 구현되는 정보가 존재하지 않는다. 기본적으로 행은 , 열은 로 표시한다. 별도로 style을 지정하지 않으면 표시되는 픽셀은 없다. 해당 table 태그 안에 위치한 tr만큼 행이 생성되고, td는 행에 구성된 열을 만든다. (style과 선의 종류에 대해서는 추후 디자인 챕터에서 다룰 것이다.) 선행 학습: table에 선을 긋는 것은 ‘style border:0px’로 굵기를 지정하고, ‘solid color;’로 지정한다. 해당 속성은 td에도 적용할 수 있다. tr은 가로 라인이므로 해당 스타일 적용이 불가능하다. 2. 표의 특성을 일괄적으로 지정하는 Tag: 표나 특정 영역에 대한 기본적인 표현 방식을 지정할 때, style을..
[HTML] Chapter 04. 목록 형성 1. html에 주석 기입하기: 주석 기능은 html에서 별도의 설명이 필요하거나 협업이 필요한 경우, 이미 제작한 코드를 숨겨야할 때 사용한다. 해당 주석 기능을 이용하면 인수 인계에 용이하다. 2. 순서있는 목록 기능: ol 태그는 Ordered List의 줄임말로 순서가 있는 리스트를 구현할 때 사용한다. 해당 태그는 태그 내부에 태그가 있어야 기능한다. 순서대로 1부터 시작하여 기입되며, 태그 자체의 기능이기 때문에 실제 데이터를 가지지 않는다. (웹 페이지에서 해당 목차 번호가 복사되지 않는다.) 만약 다른 문자나 정보를 중심으로 목차를 구성하고 싶다면 type을 지정할 수 있다. , P 항목에 숫자, 영어, 로마자를 대입하여 타입에 따른 목록을 구성할 수 있다. 해당 기능은 ‘순서가 있는’ 목..
[HTML] Chapter 03. HTML의 문자 표시 1. 사용하는 언어의 문자 코드 정의 html은 영어권 국가에서 사용하는 코드로 한글 인식이 어려울 경우가 있다. 때문에 초반에 메타 데이터를 지정하여 글자가 깨지는 현상을 방지할 필요가 있다. 한글 입력이 가능한 코드는 utf-8이며, 메타 데이터 지정은 을 이용한다. 중요: html의 태그는 기본적으로 쌍으로 사용된다. 다만 이는 해당 ‘형식’으로 정보를 표시해달라는 약속이다. 때문에 사용자에게 보여줄 필요가 없는 데이터나 특정 형식으로 구현이 불가능한 명령어는 단독으로 사용된다. 단독으로 사용되는 태그와 그렇지 않은 태그를 숙지하여야 코딩 작업 중에 실수가 생기지 않는다. 2. 문단 지정 태그 html은 줄바꿈을 Enter을 통해 적용하지 못한다. 때문에 문단 데이터를 지정하여 줄바꿈을 적용해줄 필..

티스토리툴바