'🌕 Front-end/HTML' 카테고리의 글 목록

[ HTML ] 입력 양식 태그

2022.08.28

들어가기 입력 양식 태그는 로그인하거나 회원가입을 할 때 사용자에게서 입력을 받는 경우 사용한다. 알아보자. 📌 입력 양식 태그 입력 양식은 사용자에게 정보를 입력받는 요소로 입력 양식 태그를 사용해 만든다. 🤍 입력 양식 개요 1. 태그로 영역 형성 2. 내부에 태그를 넣어 만든다. - 예제) 입력 양식을 만드는 코드 - 제출 버튼을 누르면 지정된 방식으로 지정된 장소에 데이터를 전달한다. 이러한 방식과 장소는 속성으로 지정한다. form 태그는 method 속성의 방식으로 action 속성 장소에 데이터를 전달한다. - form 태그의 속성 - - 데이터 전송 방식 - 1. GET 전송 방식 GET 방식으로 데이터를 전달하면 "터너벽지"를 입력했으므로 주소 창의 URL이 "파일 이름?search=터너..

🌕 Front-end/HTML

[ HTML ] HTML 기본 태그 ( 미디어 태그 )

2022.08.28

들어가기 HTML 페이지에서는 태그를 사용해 사용자에게 요소를 보여준다. 이제 HTML5 표준에서 지원하는 기본 태그를 살펴보자 구분 태그 설명 글자 태그 h1 ~ h6 제목 글자 생성 p, br, hr 본문 생성 a 하이퍼링크 생성 b, i, small, sub, sup, ins, del 글자 모양 지정 목록 태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성 테이블 태그 table, tr, th, td 표 생성 미디어 태그 ima, audio, video 이미지, 오디오, 비디오 삽입 📌 미디어 태그 이미지, 오디오, 비디오 등 멀티미디어를 넣는 방법을 알아보자. - 태그 : 이미지를 삽입할 때 사용 - 태그 : 음악을 삽입할 때 사용 - 미디어 태그 구분 - 내용물을 가질 수 있는..

🌕 Front-end/HTML

[ HTML ] HTML 기본 태그 ( 테이블 태그 )

2022.08.28

들어가기 HTML 페이지에서는 태그를 사용해 사용자에게 요소를 보여준다. 이제 HTML5 표준에서 지원하는 기본 태그를 살펴보자 구분 태그 설명 글자 태그 h1 ~ h6 제목 글자 생성 p, br, hr 본문 생성 a 하이퍼링크 생성 b, i, small, sub, sup, ins, del 글자 모양 지정 목록 태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성 테이블 태그 table, tr, th, td 표 생성 미디어 태그 ima, audio, video 이미지, 오디오, 비디오 삽입 📌 테이블 태그 표를 만들 때는 테이블 태그를 사용한다. - 테이블 태그 - 태그 설명 table 표 삽입 tr 표에 행 ( table row ) 삽입 th 표의 제목 셀 ( table heading ..

🌕 Front-end/HTML

[ HTML ] HTML 기본 태그 ( 목록 태그 )

2022.08.26

들어가기 HTML 페이지에서는 태그를 사용해 사용자에게 요소를 보여준다. 이제 HTML5 표준에서 지원하는 기본 태그를 살펴보자 구분 태그 설명 글자 태그 h1 ~ h6 제목 글자 생성 p, br, hr 본문 생성 a 하이퍼링크 생성 b, i, small, sub, sup, ins, del 글자 모양 지정 목록 태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성 테이블 태그 table, tr, th, td 표 생성 미디어 태그 ima, audio, video 이미지, 오디오, 비디오 삽입 📌 목록 태그 현대 웹 페이지에서 빠지지 않고 등장하는 요소가 있다면 바로 내비게이션 메뉴이다. - 내비게이션 메뉴 : 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼을 모아둔 것이다. - 목록 태..

🌕 Front-end/HTML

[ HTML ] HTML 기본 태그 ( 글자 태그 )

2022.08.25

들어가기 HTML 페이지에서는 태그를 사용해 사용자에게 요소를 보여준다. 이제 HTML5 표준에서 지원하는 기본 태그를 살펴보자 구분 태그 설명 글자 태그 h1 ~ h6 제목 글자 생성 p, br, hr 본문 생성 a 하이퍼링크 생성 b, i, small, sub, sup, ins, del 글자 모양 지정 목록 태그 ul/ol, li 순서가 없는/있는 목록 생성, 목록 요소 생성 테이블 태그 table, tr, th, td 표 생성 미디어 태그 ima, audio, video 이미지, 오디오, 비디오 삽입 📌 글자 태그 🤍 제목과 본문 글자 태그 문서에서 제목은 6가지 제목 글자 태그로 표현한다. - 태그 : heading ( 제목 ) 을 의미한다. - , , 태그 : 본문 글자를 입력할 때 사용한다. ..

🌕 Front-end/HTML

[ HTML ] 구조를 잡을 때 사용하는 태그

2022.08.24

들어가기 책의 구조는 목차, 본문, 부록 순으로 구조가 정리되어 있다. HTML에서 이를 적용시켜 보자 📌구조를 잡을 때 사용하는 태그 🤍 목차를 담당하는 태그 div 태그 - block 형식 div 태그 - block 형식 div 태그 - block 형식 div 태그 - block 형식 태그를 사용하면 각 태그가 한 행을 모두 차지한다. 이를 블록 형식이라고 한다. - 태그 : 공간을 인라인 형식으로 분할 span 태그 - inline 형식 span 태그 - inline 형식 span 태그 - inline 형식 span 태그 - inline 형식 태그를 사용하면 각 태그는 자신의 글자 크기만큼 영역으로 차지하며, 왼쪽에서 오른쪽으로 쌓인다. 이를 인라인 형식이라고 한다. 태그 설명 div 블록 형식으로..

🌕 Front-end/HTML

[ HTML ] 오류와 검증

2022.08.21

들어가기 프로그램이 원하지 않는 방향으로 동작하는 것을 버그라고 하며, 버그를 잡는 행위를 디버그라고 한다. 디버그는 웹 브라우저의 검사 기능을 쉽게 수행할 수 있다. 크롬을 실행한 후 F12 ( 또는 CTRL + SHIFT + I ) 를 누르거나 마우스 오른쪽 버튼을 누르고 검사 메뉴를 선택하면 검사가 실행된다. [ Elements ] 탭에서는 현재 HTML 페이지의 계층 구조와 각 태그의 적용된 스타일을 파악할 수 있다. [ Console ] 탭은 오류를 혹인하거나 자바스크립트 코드를 추가로 입력할 때 사용한다. 자바스크립트 코드가 정삭적으로 동작하지 않는다면 무엇이 문제인지 확인할 수 있다. 더보기 01. http://www.kyobobook.co.kr/ HTML5 웹 프로그래밍 입문 HTML5 웹..

🌕 Front-end/HTML

[ HTML ] HTML 페이지의 기본 구조

2022.08.21

📌 HTML 페이지의 기본 구조 모든 HTML 페이지는 크게 다음 구조로 작성한다. 🤍 lang 속성 html 태그에는 아래 표와 같은 lang 속성을 입력할 수 있다. lang 속성은 웹 브라우저에는 영향을 주지 않고, 구글 같은 검색 엔진이 웹 페이지를 탐색 할 때 해당 웹 페이지를 어떤 언어로 작성했는지 쉽게 알 수 있도록 도와준다. - html 태그의 lang 속성 - lang 속성 값 언어 ko 한국어 en 영어 ja 일본어 ru 러시아어 zh 중국어 de 독일어 🤍 head 태그 내부에 넣을 수 있는 태그 head 태그에는 아래 표와 같은 태그만 입력할 수 있다. 다른 태그를 넣으면 웹 브라우저가 body 태그로 자동으로 옮긴다. - head 태그 내부에 넣을 수 있는 태그 - 태그 설명 me..

🌕 Front-end/HTML

[ WEB ] 웹 표준 기술과 HTML5 주요 기능

2022.08.20

들어가기 : 웹 표준 기술 현대 웹 페이지에 사용되는 표준 기술은 세 가지이다. HTML5, CSS3, ECMAScript ( 자바스크립트의 공식 명칭 ) - HTML : 웹 페이지를 구성하는 HTML 마크업 언어 ! NOTE 마크업 ( markup ) : 웹 페이지의 서식이나 구조를 표현하는 정보로 태그 또는 마크업 지시자 라고도 한다. ' 마크업한다 ' 는 것은 HTML로 웹 페이지의 구조나 요소를 프로그래밍한다고 이해하면 된다. - CSS : HTML 페이지에 스타일을 지정하는 스타일시트를 작성할 때 사용하는 언어이다. - 자바스크립트 : HTML 페이지에서 사용자 반응 등을 처리하는 스크립트를 작성하는 언어이다. 더보기 01. http://www.kyobobook.co.kr/ HTML5 웹 프로그..

🌕 Front-end/HTML

[ WEB ] HTML을 시작하기 전에...

2022.08.19

들어가기 : 인터넷과 웹 시작 인터넷은 전 세계를 연결하는 국제 정보 통신망으로 , 컴퓨터나 스마트폰 같은 디지털 기기로 연결되어 사람들이 정보를 공유할 수 있는 공간이다. 그리고 웹은 이 인터넷 공간에서 제공하는 서비스이다. ! NOTE 사물 인터넷은 이 인터넷에 센서 & 통신 기능이 내장된 각종 사물을 연결하는 기술이다. 인터넷은 미국 국방성에서 시작되었다. 소련에서 인공위성 발사를 최초로 성공하자 위협을 느낀 미국은 신기술을 연구하는 APPA 부서를 창설하고, 1969년 현재 웹의 모태가 되는 아파넷을 개발한다. 아파넷은 핵과 같은 공격에 대비해 전체 통신 시스템에서 데이터를 안전하게 보관 및 전송할 수 있는 시스템이었다. 초기에는 미국 국방성과 대학을 연결하다가 나중에는 민간 연구용과 군사용으로 ..

🌕 Front-end/HTML

[HTML] HTML 개념 & 구조 & 속성

2022.04.19

들어가기 HTML은 기본적으로 태그, 요소, 속성 용어가 있다. 더불어서 주석도 알아보겠다. 📌 HTML 이란? Hyper Text Markup Language : 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어이다. 하이퍼텍스트 마크업 언어 ↓ 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트. 마크업 언어 ↓ 문서의 구조를 표현하는 역할. 💗 개념 1. 웹페이지에서 콘텐츠의 구조를 표현하기 위해 고안된 텍스트 포맷 (어떤 자료인지 알려주는 것) 2. 프로그래밍 언어처럼 연산 X 3. 태그를 이용하여 콘텐츠를 다른 형식으로 보이게 하거나 특정 동작을 하게 만듬. 4. 검색엔진이 페이지를 파악하기 위한 방법. 💗 구조 :문서의 타입을 알려줌, HTML 버..

티스토리툴바