.png)
WEB의 기본 개념
현재 WEB
HTML5 : 고화질 이미지와 영상을 가져올 수 있고, 비동기식 통신(Ajax)을 통해 가능하다.
웹 개발 주요 기술
프론트엔드 : JavaScript - React.js , Vue.js
백엔드 :
1. JavaScript - Node.js
2. Java - Spring/Spring Boot
3. Python - Flask/Django
HTML
HTML 태그
구조 : <열린태그 + 속성> 내용 </닫힌태그> - 요소(element)라 부름
기본 HTML 틀
! enter를 입력하면 기본 HTML틀이 생성된다.
<!DOCTYPE html> : 브라우저에게, "이 파일이" html5버전으로 작성됨을 알림, Doctype = document type
<html> </html> : html 요소, 100%
<meta charset="UTF-8"> : 문자열 인코딩 방식 - 글자가 깨져보이지 않게 하기 위함
<meta http-equiv="X-UA-Compatible" content="IE=edge"> : IE(인터넷 익스프롤러) 문서 표준모드를 edge로 정함
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : 반응형(모바일 용) 웹을 위한 view port 설정
<title>Document</title> : 문서의 제목, 상단 탭 제목
<body> </body> : 실제 실행
<head /> : body를 실행시키기 위한 태그
<meta /> : 데이터 설명을 위한 태그태그 여닫이
- <태그> </태그>
- <태그 />
기본 태그
<a /> : 글자 표시, 링크 쓸 때 사용
<a href = "링크" /> : 클릭시 해당 링크로 이동 가능
<h1 /> ~ <h6 /> : 제목 크기 지정(1이 제일 큼) - 제목, 소제목 개념
<ol /> : <li /> 라는 자식을 가지며 order list라는 뜻으로 li라는 자식들이 순서(번호)를 가진다.
<ul /> : <li /> 라는 자식을 가지며 unorder list로 자식들이 순서를 가지지 않음
<p /> : 글자 태그, 문맥, block 요소
<span /> : 글자 태그, inline 요소이미지 태그
<img src ="이미지.jpg" /> : 이미지를 가져오기
<img width / height /> : 넓이 및 높이 지정
<img alt /> : 대체 텍스트로, 이미지를 띄우지 못할 때 뜨거나 식각 장애인 용 해당 텍스트를 읽어줌form 태그
양식 / 서버에 데이터를 전송할 때 사용하는 태그
<input type="text" /> : 텍스트 입력 가능 박스 생성
<input type="password" /> : 텍스트 입력시 *로 변환하여 표시
<input placeholder = "내용" /> : 입력 하기 전 박스에 내용 회색 글씨로 표시
<select name = "쥬스"> : <option /> 자식들을 선택 가능한 박스 생성
<option selected />를 통해 박스의 기본값 변경 가능
<input type = "radio"> 체크 박스
<input type = "submit"> 클릭 가능줄바꿈 태그
<br> : 줄바꿈
<div /> : 줄바꿈 , divisionname & value & id/class
name : value 형식으로 전송
name은 이름표 느낌, value는 해당 이름표의 값
name : <form>에서 서버에 전송할 때 식별하기 위함
id, class : css와 javascript에서 컨트롤할 때 사용
div와 시맨틱 태그
div : 영역 나누기
시맨틱 : 이름이 다른 <div /> - 역할은 SEO(검색 엔진 최적화)에 중요
iframe
iframe : 웹페이지 안에 틀을 만들기 위해, 보안상 취약한 단점이 있음
여러 방향으로 접근하는 개발자