본문 바로가기
Programming/Web Programming (2021)

[웹프로그래밍] 2. 월드와이드웹과 HTML

앤 썸 2021. 3. 29. 10:38
반응형
  •  웹 프로그래밍 구조
    • 클라이언트
      • 웹 서비스를 이용하는 사용자
    • 서버
      • 웹 서비스를 제공하는 서비스 공급자
    • 프론트엔드 프로그래밍 [CSR; Client Side Rendering]
      • 클라이언트 중심 프로그래밍
        • HTML, Javscript, CSS
    • 백엔드 프로그래밍 [SSR; Server Side Rendering]
      • 서버 구성하고 서비스 제공 중심 프로그래밍
        • 웹서버SW, 웹 프레임워크, 데이터베이스
  • 클라이언트 중심 프로그래밍
    • HTML
      • 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 마크업 언어
      • Hyper Text
        • 링크가 포함된 텍스트
      • Markup Language
        • 문서에 주석을 다는 시스템
    • CSS
      • HTML 문서에 레이아웃과 디자인을 정의하기 위한 규격
      • HTML에서 내용과 구조를 정의하고  CSS에서 위치, 정렬 크기, 여백 ,색상 등을 정의
      • 셀렉터로 지정해 원하는 디자인 속성을 부여한다. 
    • Javascript
      • HTML 문서의 이벤트 처리, 동적 변화 표현, 서버와의 연결을 통해 데이터를 전달받는 등 프로그램 요소
      • 웹에서 동적으로 변화하는 요소는 서버에서 DB연동 등을 통한 백엔드 프로그램을 통해 구현한다
      • 서버에 새로 접속하지 않고 화면의 정보를 변하는 기능을 구현
      • 서버에서 정보를 갱신하지 않고(SSR) 클라이언트에서 자바스크립트를 이용해(CSR) 정보를 갱신하는
        기술을 사용하고있다
  • HTML 태그
  • 태그
    • HTML의 기본 구성요소
    • <>를 사용해 나타낸다
    • 보통 시작과 끝을 표시하는 2개의 쌍으로 이루어진다.
    • 종료 태그 앞에는 /를 붙인다
    • 이름으로 규칙이 정해져 있으며 태그마다 역할이 다르다
<시작태그 속성 = "값" 속성="값"...>태그콘텐츠</종료태그>
  • <h1> hello world</h1> 처럼 쌍으로 사용해 표현한다
  • 태그 안에 태그가 중첩될 수 있다. 단 순서대로 닫아야 한다.
  • 닫는 태그가 없는 태그도 있다.
  • 주석은 <!-- ~ -->형식을 사용한다.
<!-- 주석 입니다.-->
<body>
<h2>Hello World</h2>
<hr>
</body>

 

  • 속성
    • HTML에 부가적인 정보를 제공
    • 실예로 <img>태그는 위치를 지정하기 위한 <src> 속성이 있다.
    • 동일한 속성을 반복 사용해야하기 때문에 변경이 힘들고 유지보수가 불가능하기 때문에, 글자 색이나 배경같은 디자인적 요소들의 속성은 CSS를 이용한다.
<img src="/img/smile.jpg" width="500" height="300">
  • 항상 시작 태그에 작성하고 이름=값으로 구성
  • 태그에 따라 속성이 다르고 여러 속성을 나열해 지정
  • HTML5부터는 디자인 속성은 CSS로 이전되어 태그에서 사용하는 속성이 많지 않다

  • 태그바디
    • 태그와 태그 사이의 콘텐츠를 의마
    • 태그 바디는 다른 태그를 포함하며 단순 텍스트만 올 수도 있다.
<h2> Hello World</h2>
<ul>
	<li>item1</li>
    <li>item2</li>
</ul>
  • <ul> 태그가 부모 태그이고 안에 들어 있는 <li>태그가 자식 태그이다
    • 부모의 속성을 자식에게 물려줄 수 있으며 상속이라고 부른다
  • 태그마다 사용가능한 태그바디 요소가 정해져있다.
  • HTML 기본 문서 구조

  • 웹 프로그래밍 구조
    • 클라이언트
      • 웹 서비스를 이용하는 사용자
    • 서버
      • 웹 서비스를 제공하는 서비스 공급자
  • 프론트엔드 프로그래밍 [CSR; Client Side Rendering]
    • 클라이언트 중심 프로그래밍
    • HTML, Javscript, CSS
  • 백엔드 프로그래밍 [SSR; Server Side Rendering]
    • 서버 구성하고 서비스 제공 중심 프로그래밍
    • 웹서버SW, 웹 프레임워크, 데이터베이스
  • 클라이언트 중심 프로그래밍
    • HTML
      • 웹 문서의 구조를 정의하고 콘텐츠를 표현하는 마크업 언어
    • Hyper Text
      • 링크가 포함된 텍스트
    • Markup Language
      • 문서에 주석을 다는 시스템
    • CSS
      • HTML 문서에 레이아웃과 디자인을 정의하기 위한 규격
      • HTML에서 내용과 구조를 정의하고 CSS에서 위치, 정렬 크기, 여백 ,색상 등을 정의
      • 셀렉터로 지정해 원하는 디자인 속성을 부여한다. 
    • Javascript
      • HTML 문서의 이벤트 처리, 동적 변화 표현, 서버와의 연결을 통해 데이터를 전달받는 등 프로그램 요소
      • 웹에서 동적으로 변화하는 요소는 서버에서 DB연동 등을 통한 백엔드 프로그램을 통해 구현한다
      • 서버에 새로 접속하지 않고 화면의 정보를 변하는 기능을 구현
      • 서버에서 정보를 갱신하지 않고(SSR) 클라이언트에서 자바스크립트를 이용해(CSR) 정보를 갱신하는
        기술을 사용하고있다
  • HTML 태그

  • 태그
    • HTML의 기본 구성요소
    • <>를 사용해 나타낸다
    • 보통 시작과 끝을 표시하는 2개의 쌍으로 이루어진다.종료 태그 앞에는 /를 붙인다
    • 이름으로 규칙이 정해져 있으며 태그마다 역할이 다르다
<시작태그 속성 = "값" 속성="값"...>태그콘텐츠</종료태그>
  • <h1> hello world</h1> 처럼 쌍으로 사용해 표현한다
  • 태그 안에 태그가 중첩될 수 있다. 단 순서대로 닫아야 한다.
  • 닫는 태그가 없는 태그도 있다.

 

 

  • 주석은 <!-- ~ -->형식을 사용한다.
<!-- 주석 입니다.-->

<body>

<h2>Hello World</h2>

<hr>

</body>

 

 

  • 속성
    • HTML에 부가적인 정보를 제공
    • 실예로 <img>태그는 위치를 지정하기 위한 <src> 속성이 있다.
    • 동일한 속성을 반복 사용해야하기 때문에 변경이 힘들고 유지보수가 불가능하기 때문에, 글자 색이나 배경같은 디자인적 요소들의 속성은 CSS를 이용한다.
<img src="/img/smile.jpg" width="500" height="300">
  • 항상 시작 태그에 작성하고 이름=값으로 구성
  • 태그에 따라 속성이 다르고 여러 속성을 나열해 지정
  • HTML5부터는 디자인 속성은 CSS로 이전되어 태그에서 사용하는 속성이 많지 않다

 

 

  • 태그바디
    • 태그와 태그 사이의 콘텐츠를 의마
    • 태그 바디는 다른 태그를 포함하며 단순 텍스트만 올 수도 있다.
<h2> Hello World</h2>

<ul>

 <li>item1</li>

    <li>item2</li>

</ul>
  • <ul> 태그가 부모 태그이고 안에 들어 있는 <li>태그가 자식 태그이다
  • 부모의 속성을 자식에게 물려줄 수 있으며 상속이라고 부른다
  • 태그마다 사용가능한 태그바디 요소가 정해져있다.
  • HTML 기본 문서 구조

 

[그림 : HTML 문서구조]

  • <!DOCTYPE html>
    • HTML5 문서를 선언하는 구문. 웹브라우저에게 문서가 HTML5로 작성됨을 알림.
  • <HTML>...</HTML>
    • HTML 문서의 시작과 끝.
  • <HEAD>...</HEAD>
    • CSS, JavaScript, <TITLE>태그, <meta>태그 등의 위치
  • <BODY>...</BODY>
    • 문서 본문에 해당하는 부분으로 실제 화면에 나타나는 메인 부분
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Page Title</title>
</head>
<body>
    
</body>
</html>
  • meta 태그
    • 문서의 기본적인 정보를 설정하는 태그
  • charset
    • 캐릭터셋으로 정상적인 한글 처리를 위해서는 반드시 UTF-8로 설정.
  • viewport
    • 모바일등 서로 다른 크기의 장치에서 화면 최적화를 위한 설정.
  • http-equiiv
    • HTTP 헤더 정보를 설정하는 속성.
  • X-UA-Compatible
    • 브라우저의 호환성보기 설정으로 ie=edge 설정은 항상 최신 렌더링 엔진을 사용한다는 의미

[그림 : 웹페이지 레이아웃]

  • 일반적인 웹페이지는 상단 배너, 좌측/우측 메뉴, 중앙 콘텐츠, 하단 공통 영역등으로 구성.
  • HTML5 에서는 <header>,<nav>,<section>,<aside>등의 시멘틱(Semantic)태그를 통해 영역 구분을 지원
    • 시멘틱 태그는 의미적으로 레이아웃을 구분하는 것으로 실제 적용은 css로 한다.
반응형
저작자표시 비영리

'Programming > Web Programming (2021)' 카테고리의 다른 글

[웹프로그래밍 실습] 6. CSS 기초  (0) 2021.04.19
[웹프로그래밍] 6. CSS 기초  (0) 2021.04.19
[웹프로그래밍 실습] 2. 월드와이드웹과 HTML  (0) 2021.04.05
[웹프로그래밍] 1. 개발환경 구축하기  (0) 2021.03.14
웹 프로그래밍 공부하기  (0) 2021.03.14

'Programming/Web Programming (2021)' Related Articles

티스토리툴바