시작하며
오늘부터 웹 개발의 기본적인 내용들을 배우기 시작했다. HTML, CSS, JavaScript와 함께 React도 기본적인 내용 정도만 다뤄본다고 한다.
Web
3계층 구조 (3 Tier)
- 화면 (클라이언트) : 프론트 앤드
- 서버 : 백 앤드
- 데이터베이스 : 백 앤드
화면 (클라이언트)
- HTML : 기본 구조 생성을 위한 언어
- CSS : Web을 꾸며주는 언어
- Java Script : 상호작용이 가능한 기능을 추가하는 언어
HTML
- Hypertext Markup Language
- Hypertext : 다른 페이지로 연결되는 링크를 포함하는 텍스트
- Markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
HTML의 구조
- ! + Tab : 기본 구조 자동 생성
<!DOCTYPE html>: 문서 형식을 HTML5로 지정<html></html>: 실제적인 HTML 문서 작성
<head> 태그
- 문서의 메타 데이터와 문서 정보를 정의하는 태그
- 메타 데이터 : 데이터에 대한 정보를 제공하는 데이터
- title : HTML 문서의 제목
- style : HTML 문서의 Style 정보 정의
- link : 외부 리소스와의 연결 정보를 정의 (CSS 파일 연계에 사용)
- script : JavaScript를 정의
- meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보 / 주로 브라우저 또는 검색 엔진에서 사용
<body> 태그
- 문서의 실제 콘텐츠를 정의하는 태그
기본 문법
- 중첩 관계 (부모자식 관계)로 웹페이지의 구조를 표현
<!-- 주석 사용 -->
HTML 구성 요소
- 태그 : HTML 태그는 요소, 태그, 속성으로 구성
- 요소
- 빈 요소 : 내용 없이 구조적인 기능만 하는 요소
- 블록 요소
- 부모 요소의 전체 너비를 차지
- 태그가 시작되면 무조건 줄바꿈이 일어남
- 인라인 요소
- 텍스트 / 이미지 크기에 맞는 필요한 공간만을 차지
- 너비와 높이를 지정할 수 없음
- 속성
- 태그를 보조하는 명령어로 태그 안쪽에서 작동
- 태그마다 사용 가능한 속성이 정해져 있음
태그 종류
<h1~6></h1~6>
- 제목 태그 (Heading)
- 자동으로 줄 바꿈
- 하나의 HTML 문서에는 하나의 h1태그를 권장
<p></p>
- 본분 태그 (Paragraph)
<br/>
- 줄 바꿈 태그 (Break Line)
- 빈 요소이기 때문에 태그에서 바로 닫기
<hr/>
- 구분 선 태그
<ul></ul>
- 순서가 없는 목록 (Unordered List)
<ol></ol>
- 순서가 있는 목록 (Ordered List)
<li></li>
- 목록의 요소
<img/>
- 이미지를 넣을 때 사용
- 속성 값 중
src=””안에 파일 / 링크를 추가해서 사용
<a></a>
- 하이퍼 링크 (Anchor)
- href : Hypertext Reference, 이동할 페이지의 링크
- target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시
- _blank : 새로운 탭에서 열기
- _self : 현재 탭에서 열기 (기본값)
문자 꾸미기 태그
<b></b>: 볼드체<i></i>: 이탤릭<del></del>: 중간줄<u></u>: 밑줄
사용자 입력
form 태그
- 입력 받은 정보들을 서버로 전달 시키는 태그
input 태그
type=”button”: 버튼을 생성 / 특정 기능을 수행 시킬 때 사용type=”text”: 텍스트 입력 값을 받는 폼 생성type=”password”: 비밀번호 값을 받는 폼을 생성 / 입력 값을 자동으로 안보이게 처리type=”checkbox”: 다중 선택 가능한 체크 박스 생성name=””: 체크 박스의 이름 / 같은 분류의 체크 박스는 같은 이름으로 설정value=””: 체크 박스가 실제로 전달하는 값을 지정 (필수)checked: 최초 로딩 시에 선택 된 상태로 로딩
type=”radio”: 여러 선택지 중 하나만 선택 가능한 버튼name=””: 라디오 버튼의 이름 / 같은 name을 가지는 라디오 버튼은 하나만 선택 가능value=””: 라디오 버튼이 실제로 전달하는 값을 지정 (필수)checked: 최초 로딩 시에 선택 된 상태로 로딩
type=”date”: 특정 날짜를 선택<select></select>: 선택 메뉴 생성name=””: 박스 이름 설정<option></option>: select 폼의 옵션 값 생성<optgroup></optgroup>: option을 그룹화label=””: 그룹 이름 설정
마치며
오랜만에 하는 수업에 처음 듣는 내용들이라 초반에는 머리가 살짝 아팠지만, 기본적인 내용들이라 아직까지는 어려운 개념들이 딱히 없어서 금방 익숙해진 것 같다.
내일은 예비군 훈련 때문에 수업을 못 들어서 뒤처질 것 같아 약간 걱정이 된다. CSS나 JavaScript도 어느 정도 다룰 줄 알면 좋을 것 같아서, 내일 놓치는 부분들은 예비군 훈련 끝나고 찾아보면서 공부해봐야겠다.
Hello I'm TaeHyunAn, Currently Studying Data Analysis