Summary
- HTML 구성하는 법은 의외로 간단했습니다.
- 심리적인 부담감이 문제였지, 직접 영상을 보면서도 익힐 수 있는 수준입니다.
- 웹 구현도 한 땀 한 땀 만들어가는 작품입니다.
Introduction
김자영 강사님
오랜만에 새로운 헤어스타일로 반겨주셨습니다.
HTML 개념과 실습 위주로 교육해주셨습니다.
Code, Conept & Explanation
웹의 동작 원리
Client 와 Server 사이에서
URI 로 요청하고 웹페이지로 응답 받습니다.
(웹 페이지는 html, css, javascript, image 등으로 구성)
HTML
Makeup Language, Content
CSS
Style sheet Language, Presentation
JS
Programming Language, Behavior
기존에는 프론트엔드만 가능했지만
최근에는 백엔드에서도 사용
백엔드
Java, Python, Node.js
DB나 메일 서버나 파일 서버에서
동적으로 자료를 가져와야 하는 경우
프론트엔드
정적 컨텐츠 처리
Mobile Web, PC Web
HTML 기본 구조
Hyper Text Markup Language
Hyper 웹 문서에서 다른 문서나 정보로의 링크를 통해
‘초월하여’ 이동하는 것을 의미 (hyper link)
Markup
텍스트에 어떠한 구조나 속성을 부여하기 위한 태그를 의미
viewport
브라우저 창에서 웹페이지 콘텐츠가 표시되는 영역
HTML 구성요소
태그
html 요소를 정의하는데 사용되는 코드
보통 시작태그, 종료 태그가 있음
엘레먼트
태그와 태그 사이에 있는 내용
어트리부트
요소에 추가적인 정보를 제공하는 부분
속성이름=속성ㅂ갓
img src="img.png"
콘텐트
시작 태그와 종료 태그 사이에 위치한 내용
텍스트 문서 작성하기
블록 레벨 컨테이너
<'div><'/div>
블록 레벨 요소
CSS 작성시 신경써야 하는 부분
인라인 텍스트 컨테이너
<'span><'/span>
인라인 레벨 요소
CSS 작성시 신경써야 하는 부분
tr : table row
th : table header
td : table data
사용자 입력을 위한 태그
form
외부의 서버로 값을 전달할 때 폼으로 감싸서 전달
백엔드 활용
CRUD 어플리케이션 만들기
get 방식
post 방식
로그인 방식
사용자가 입력한 데이터
Challenges & Solutions
Results
What I Learned & Insights
HTML 로 구성하는 기본 방법은 의외로 간단했습니다.
head 부분에 원하는 큰 틀을 설정하고
body 부분에서 원하는 내용들과 형식들을 입력하면 됩니다.
LLM 을 통해
자연어로 빠르게 구현도 가능할 것으로 예상합니다
앞으로 배울 내용들과의 조합이 기대됩니다.
Conclusion
- HTML 구성하는 법은 의외로 간단했습니다.
- 심리적인 부담감이 문제였지, 직접 영상을 보면서도 익힐 수 있는 수준입니다.
- 웹 구현도 한 땀 한 땀 만들어가는 작품입니다.
