공부 일지(개발)/HTML,CSS

웹 독학 내용 정리 (HTML)｜웹 개발자 준비

inzero98 2024. 11. 21. 19:59
반응형

HTML

웹 사이트

  • 정적 사이트 : 방문자에게 정보를 보여주기만 하는 웹사이트
  • 동적 사이트 : 웹 브라우저 화면에 보이는 모습 뿐만 아니라 다양한 기능과 서비스를 제공하는 웹사이트

 

​웹 개발

  • 사용자에게 제공할 기능과 서비스까지 모두 담고 있는 웹 사이트를 만드는 것

 

서버와 클라이언트

 

                       ------------ 정보요청 -------------- >

 

클라이언트                                                                  서버 

 

                       < ----------- 정보전달 --------------

 

서버 : 인터넷에 연결된 컴퓨터 (정보를 제공해주는 쪽)

클라이언트 : 웹사용자가 웹 사이트에 접근하려고 사용하는 기기

 

프론트엔드와 백엔드

프론트엔드 

  • 사용자에게 앞에서 보이는 영역
  • 웹 브라우저 화면에 보이는 것을 다룸
  • HTML, CSS, 자바스크립트 사용

백엔드

  • 사용자 뒤에서 보이지 않는 영역
  • 데이터베이스를 설계하거나 데이터를 처리하는 영역
  • 자바, PHP, 파이썬 등 사용

 

HTML

  • 웹 문서의 뼈대를 만듦.
  • 웹 브라우저 창에 웹 문서의 내용을 보여주는데 필요한 약속

CSS

  • HTML로 만든 내용을 꾸미거나 편리하게 배치하기 위해 사용
    ※ 다양한 디바이스에 따라 화면에 자동으로 바뀌는 반응형 웹 디자인을 만들기 위해서 필요!

자바스크립트

  • 웹 사이트에서 동적인 효과를 사용하기 위해 필요
    ※ 규모가 큰 개발에서는 자바스크립트 프레임워크를 사용!

자바스크립트의 라이브러리와 프레임워크​

라이브러리

  • 제이쿼리
  • D3.js
  • 부트스트랩

프레임워크

  • React
  • Angular
  • 뷰

백엔드 개발 언어와 프레임워크 

  • Node.js -> 익스프레스
  • 자바 ->스프링
  • 파이썬 -> 장고
  • PHP -> 코드이그나이터

태그란?

  • 웹 브라우저가 제목, 텍스트, 표를 구별할 수 있도록 각각에 붙는 꼬리표

HTML 문서의 기본 구조 살펴보기

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 기본 문서</title>
  </head>
  <body>
    <h1>웹 문서 만들기</h1>
    <hr>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
  </body>
</html>

 

  • <!DOCTYPE html> : 현재 문서가 HTML 언어로 작성한 웹 문서라는 뜻
  • <html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그
  • <head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보를 입력하는 부분
  • <body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용

많이 쓰는 태그 정리

  • <h1> ~ <h5> : 제목,타이틀을 만들 때 사용 (1에서 5로 갈 수록 글씨가 작아지며 얇아진다.)
  • <div> : 영역을 나눌 때 사용
  • <p> : 문단을 나눌 때 사용 (div태그와 비슷한 용도지만 밑에 공간이 조금 더 생긴다.)
  • <img> : 이미지를 넣을 때 사용 (단일 태그)
  • <input> : 검색창처럼 입력칸 만들 때 사용 (단일 태그)
  • <button> :  버튼 만들 때 사용
  • <a> : 링크를 연결해서 여러페이지로 이동할 때 사용
  • <footer> : 푸터 영역을 나타낼 때 사용
  • <span> : 주어진 데이터만큼 영역을 나눌 때 사용
    ( div와 비슷하지만 div는 줄 전체를 영역으로 지정하는 반면에 span은 주어진 만큼만 지정)

<head> 태그 안에 있는 태그 설명

  • <meta> : 웹서버와 웹브라우저 사이에 주고받는 정보를 정의할 때 사용 ( 문서 자체의 특성을 나타낸다.)
  • <title> : tab 이름 (웹 사이트 상단)
  • <link> : 스타일이나 아이콘등 외부 문서를 html문서에 연결할 때 사용

HTML 주석 : <!-- 주석 내용 -->

 

반응형