HTML+CSS

HTML+CSS+자바스크립트 웹코딩의 정석 1강.

Hvvvi 2021. 3. 29. 19:16
728x90

1.1 웹개발

정적 사이트(static) - 방문자에게 정보를 보여 주기만 하는 웹 사이트

동적 사이트(dynamic) - 친구추가, 좋아요, 공유하기, 구매, 결제 등 기능과 서비스 포함

 

 

 

서버와 클라이언트 

  • 서버
    • 인터넷에 연결된 컴퓨터
    • 텍스트, 웹요소, 사용자 정보등을 저장
  • 클라이언트
    • 웹사이트에 접근하는 PC나 스마트폰등

 

프런트엔드 개발과 백엔드 개발

  • 프런트엔드
    • 사용자 앞에 보이는 영역
    • 다양한 브라우져 종류와 버전에 따라 작동하게 만들어야함
  • 백엔드
    • 보아지 않는 영역
    • 데이터베이스 설계
    • 데이터처리

 

웹개발의 기본 HTML, CSS, JavaScript

  • 웹문서의 뼈대를 만드는 HTML
  • 웹문서를 꾸미는 CSS
  • 사용자 동작에 반응하는 자바 스크립트

 

HTML이란?

  • 웹문서를 만드는 언어
  • Hyper Text Markup Language
  •  

===============태그=================

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>웹 개발 입문</title>
  </head>
  <body>
    <h1>웹 개발 기초</h1>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바스크립트</p>
  </body>
</html>
 cs

<!DOCTYPE html> --> HTML5로 작성한 문서

<html>___</html> --> 웹문서의 시작과 끝

<head>___</head> --> 웹브라우저가 웹문서를 해석하는데 필요한 정보를 입력하는 공간

<body>___</body> --> 실제로 웹화면에 나타나는 내용

 

  • </html>뒤에는 아무내용도 없어야함
  • <head>___</head> 안의 <meta>, <title>
    • <meta>에는 문서정보가 들어있음
    • 글자를 표시할 때 어떤 인코딩을 사용할 것 인지 지정
    • <title> 웹사이트의 제목을 입력

시멘틱 태그(sementic: 의미가 통하는):

  • 웹 브라우저가 HTML의 소스 코드만으로 제목, 본문, 메뉴 등을 쉽게 구분
  • 사용자에게 보다 더 정확한 정보를 제공 할 수 있음
  • 문서구조화가 정확히 나눠지므로 다양한 기기의 화면에서 표현하기 용이
  • 웹사이트 검색시 핑효환 내용을 정확히 찾을 수 있음
  • <header>
    •  헤더영역
    • 사이트전체의 헤더 - 각 영역별 헤더
  • <nav>
    • 네비게이터
    • 링크등을 만들때 사용
  • <main>
    • 웹 문서의 핵심이 되는 내용
    • 웹 문서마다 다르게 보여지는 내용으로 구성
    • 한 문서에 한번만
  • <article>
    • 컨텐츠를 담음
    • 독립된 컨텐츠 항목
    • <section>태그 사용 가능
  • <section>
    • 컨텐츠 영역을 나타냄
    • 독립된 컨텐츠를 묶는 데 사용
  • <aside>
    • 사이드바를 만듦
  • <footer>
    • 사이트 정보나 저작권, 주소 등
  • <div>
    • division
    • 영역을 구별하거나 스타일을 만들 때 사용
    •  

 

728x90