배꼽파지 않도록 잘 개발해요

방송대 HTML5웹프로그래밍 - 1강. 웹 프로그래밍 개요 & HTML 요소 본문

방송대 컴퓨터과학과/HTML5 웹프로그래밍

방송대 HTML5웹프로그래밍 - 1강. 웹 프로그래밍 개요 & HTML 요소

꼽파 2023. 4. 18. 14:37

  • 1. 웹 개요

  • 2. 웹 프로그래밍 과정

  • 3. HTML요소: 텍스트 표현

    • 1. 웹 개요

    인터넷과 웹

    • Internet (derived by ARPANET)

       * 1969년 미 국방성 ARPA라는 곳에서 군사적 상황에서 연구소 사이 자원이나 정보를 공유하기 위해 만들어짐.

    - INTERconnected NETwork

    - 전 세계적으로 연결되어 있는 컴퓨터 네트워크 시스템

     

    • World Wide Web("웹") by Tim Berners-Lee

    - 하이퍼링크 개념과 GUI를 사용하여 다양한 형태의 데이터와 정보에 접근할 수 있는 인터넷 서비스

    - HTML로 작성된 웹 문서를 HTTP 프로토콜 기반으로 브라우저를 통해서 내려 받아서 읽을 수 있도록 구성됨.

    ☞ 인터넷 ≠ 웹

    기본 용어

    웹 관련 용어

    웹 사이트 웹 페이지들의 의미 있는 묶음
    웹 문서
    (HTML 문서)    		 브라우저로 볼 수 있는 형식의 문서 (보통 HTML로 작성됨)
    웹 페이지 각 브라우저 창에 표시되는 개별적인 문서
    - 하나의 웹 문서는 주제/내용에 따라 여러 웹 페이지 파일로 구분/작성
    홈페이지 웹 페이지 중에서 특별한 하나, 웹사이트에 접속했을 때 가장 먼저 접속되는 웹 페이지 (디폴트 웹페이지)
    하이퍼텍스트 단위 텍스트들과 이를 결합하는 하이퍼링크로 구성된 텍스트, 다른 정보를 쉽게 참조할 수 있도록 함.
    웹 서버 웹 서비스를 제공하는 컴퓨터 시스템
    웹 클라이언트  웹 서비스를 제공받아 사용하는 사용자/시스템
      (웹은 서버-클라이언트 구조에서 동작)
    HTTP 웹 서버와 웹 클라이언트 간의 필요한 데이터를 주고 받기 위한 통신 규약

     

     

    통신사 게이트웨이에 들어가서 DNS서버에 접속한 다음 아이피주소 물어봄

    도메인을 IP 주소로 변환함.

     프라우저가 서버에 요청함.

     

    URL

    웹 페이지의 구성

    		 HTML을 기반으로 웹 페이지를 제작한다는 것의 의미

    • HTML : 웹 페이지의 구조와 내용 정의
    (제목, 장, 절, 텍스트, 이미지, 표 등)

    • CSS : 웹 페이지의 출력 모양과 디자인 정의
    (글자체, 크기, 색상, 여백, 배경색 등)
    상위에서 정의되어 있는 스타일시트가 하위개념으로 상속됨.
    → 계층별 스타일 적용

    • JavaScript : 웹 페이지의 동작과 상호작용을 담당
    (이벤트 및 요소에 대한 동적 처리 등)

    '태그'와 '요소' 용어는 다름.  '요소' 용어를 많이 씀.
    가능하면 원서를 보는게 좋음.

    2. 웹 프로그래밍 과정

    웹 프로그래밍

    웹 사이트 또는 웹 페이지를 만드는 과정

    Front-end 프로그래밍
    (클라이언트 사이드 프로그래밍)    		 HTML + CSS + JavaScript → 모든 화면의 페이지 제작
    프레임워크 → React, Angular, Vue.js 등
    Back-end 프로그래밍
    (서버사이드 프로그래밍)    		 클라이언트에서의 동작/작업의 원활한 수행을 위한 처리 담당
    C/C++, Java, Python, JSP, Perl, PHP 등의 언어 사용
    프레임워크 → Node.js, Django, Spring 등

    HTML 문서의 구성 요소

    • HTML 문서 : 다양한 요소(element)들의 조합

    • 시작태그의 속성 : 요소에 추가적인 정보를 제공해서 명령어를 좀 더 구체화시키는 역할을 함.

    • 각 속성은 공백으로 구분함. (kr"공백target)

    • 속성값을 표현할 때 큰따옴표("")나 작은따옴표('')를 사용하는데, 필수는 아님.

      (단, 속성값 안에 공백을 포함하는 경우는 따옴표를 반드시 사용해야함.)

    • 종료태그 없이 사용하는 태그- <br>, <img> 등- 요소에서 나타내는 내용이 없기 때문에 종료태그가 필요하지 않음.- 사용방법 : ① <br>, ② <br></br>, ③ <br/>

    HTML 문서 작성 시 주의사항

    • 요소명과 속성명은 대소문자를 구분하지 않음

    - <TITLE> = <Title> = <title> → 소문자 표기를 권고

    • 파일명 확장자 지정 → '파일명.htm' 또는 '파일명.html'

    • 화이트스페이스(스페이스바, 탭)는 입력한 의도대로 적용되지 않음

    - 두 칸 이상의 연속된 공백은 하나의 공백으로 처리

    • 요소 안에 다른 요소 포함 가능 → 포함 관계 주의

    - <요소명1> ⋯<요소명2>~~</요소명2>⋯</요소명1>

    HTML 문서의 기본 구조

    <!DOCTYPE html> • 브라우저에게 페이지를 올바르게 표시할 수 있도록 문서 형식을 알려주는 지시어
    • 반드시 첫 줄에 위치
    <html> ⋯ </html> • 웹 페이지의 루트 요소 → HTML 문서의 시작과 끝을 알려줌
    <head> ⋯ </head> • 웹 문서에 대한 메타 정보를 포함 → 화면에 표시되지 않음
    • 메타 요소 : title, link, style, script, meta, base
    <body> ⋯ </body> • 브라우저 화면에 실제로 출력해서 보여주려는 문서의 본문에 해당하는 모든 내용을 포함하는 부분
    주석문
    <!-- 주석 내용 -->    		 • 문서 소스 내에 간단한 설명을 추가할 때 사용
    • 브라우저에 출력되지 않으므로 소스에서만 확인 가능
    • 문서의 어느 곳에든 위치 가능
    • '<!--' 와 '-->'는 하나의 문자 → 각 문자 사이에 공백 불가
    • 주석 내용으로 <, >, --는 사용하지 말아야 함.

    헤드 부분에 포함되는 메타 요소

    title 요소 브라우저 상단(탭)에 문서의 제목을 표시할 때 사용
    즐겨찾기 제목, 검색 엔진의 출력된 결과 페이지 제목으로도 사용
    link 요소 CSS 스타일 파일(*.css)을 가져와 웹 문서에 적용할 때 사용
    문서의 body 부분에 포함 가능

    <link rel="stylesheet" href="파일명.css">
    style 요소 웹 문서 전체에 적용할 CSS 스타일을 정의할 때 사용

    <style>
      CSS 스타일 정의 (예: h1{color: red;})
    </style>
    script 요소 자바스크립트 코드를 작성(또는 외부 코드 링크)할 때 사용
    body 부분에 포함 가능

    <script>
      자바스크립트 코드
    </script>

    <script src="파일명.js"></script>
    meta 요소 웹 문서에 대한 다양한 메타 데이터를 나타낼 때 사용

    문자 인코딩 방식 : <meta charset="UTF-8">
    내용 설명 : <meta name="description" content="문서 설명">
    키워드 : <meta name="keywords" content="키워드1, 키워드2, ⋯">
    저작자 : <meta name="author" content="문서작성자">
    base 요소 웹 문서의 기본 URL 경로 지정
    body 요소 내의 상대 경로로 표시된 URL을 절대 경로로 취급

    <base href="http://cs.knou.ac.kr/html5>"
    <a href="ex.html" → <a href="http://cs.knou.ac.kr/html5/ex.html">

    웹 페이지가 출력될 타깃 윈도우 지정

    <base target="_blank">
    <a href="ex.html"> → 연결된 문서가 새로운 창에서 열림

    <base target="_self">     (기본값)
    <a href="ex.html"> → 연결된 문서가 현재 있는 창에서 열림

     

    HTML 문서의 작성과 실행

    문서 작성을 위한 텍스트 편집기 문서 실행을 위한 웹 브라우저
    UltraEdit, EditPlus, Eclipse, Sublime, ⋯
    드림위버, 나모 웹에디터, ⋯
    윈도우메모장, notepad    		 크롬, 엣지, 파이어폭스, 오페라, 사파리

    * 교재, 강의 : 크롬 브라우저에서 실행

    3. HTML 요소: 텍스트 표현

    줄을 바꾸는 br 요소

    편집기에서 엔터키와 같은 기능 (줄바꿈)

    종료태그 </br>없이 사용

    br 요소를 사용하지 않은 경우

    단락을 나누는 p요소

    문단을 나누어 독립된 단락을 생성

    단락 구분을 위해 단락 전후에 빈 줄이 자동으로 추가됨

    p요소를 연속해서 여러 개 사용해도 한 번 사용한 것과 동일한 효과를 가짐

    수평선을 그리는 hr 요소

    텍스트 사이에 수평선을 그림 → 의미론적으로는 주제가 변경되는 콘텐츠를 구분하는 용도

    자동 줄바꿈, 종료태그 없이 사용

    단락의 제목을 지정하는 hn 요소

    n=1, ⋯, 6 → h1, h2, h3, h4, h5, h6

    제목 크기 → h1 > h2 > h3 > h4 > h5 > h6 (큼 → 작음)

    굵은 글자(볼드체), 자동 줄바꿈

    텍스트를 자유롭게 표시하는 pre 요소

    편집기에서 문자가 입력된 형태를 그대로 유지하여 출력

    특수 문자가 많은 텍스트(예, 프로그램 소스)를 표시할 때 유용

    텍스트는 고정폭(모든 글자의 폭이 다 같음)

    행의 길이가 브라우저의 폭 보다 길어져도 자동 줄바꿈이 되지 않음

    pre 요소 안에서 html요소는 문자로 취급되는게 아니라 그대로 적용됨. (<b></b>를 넣으면 그대로 반영됨.)

    인용문을 작성하는 blockquote 요소

    상하 빈 줄로 구분되는 인용문 단락의 생성 및 들여쓰기

    들여쓰기 간격의 인위적인 조정은 불가

    cite 속성 → 인용된 부분의 URL 지정

    인용문은 한 줄 띄고 들여쓰기 되는 걸 알 수 있음.

    &quot; : 따옴표

    공백 및 특수 문자 입력

    두 칸 이상의 연속된 공백, 예약어로 사용되는 문자, 키보드로 직접 입력할 수 없는 문자를 입력하는 방법

    연속된 여러 개의 공백 &특수이름;
    예약어로 사용되는 문자
    <, >, ", &     		 &#10진수코드;
    키보드로 직접 입력 할 수 없는 문자
    ⓒ, →, ♡, ☞, ⋯    		 &#x16진수코드;

    유니코드에 있는 문자 참고해서 쓰기

    문자 특수 이름 10진수 코드 16진수 코드
    < &lt; &#60; &#x3c;
    > &gt; &#62; &#x3e;
    & &amp; &#38; &#x26;
    " &quot; &#34; &#x22;
    공백 &nbsp;
    (not breaking space)    		 &#32; &#x20;
    ⓒ &copy; &#169; &#xa9;
    → &rarr; &#8594; &#x2129;
    ♡     &#x2661;
    ☞     &#x261e;

    글자 스타일 지정 요소

    물리적 스타일 관련 요소

    단순히 웹 브라우저에 표시되는 출력 모양만을 지정하는 요소

    b, i, s, u, sup, sub, small

    <b> 진하게 표시
    강조의 의미는 사라지고, 주목해야 할 단어를 표시
    <i> 기울어진 형태(이탤릭체)로 표시
    보통의 서술과 구분되는 다른 어조/분위기를 갖는 텍스트를 표시
    <s> 글자 가운데를 통과하는 줄(취소선)을 표시
    더 이상 정확하지 않거나 관련이 없는 내용을 표시
    <u> 밑줄을 표시
    철자가 틀린 단어나 불충분한 내용을 표시
    <sup> 글자를 위첨자로 표시
    <sub> 글자를 아래첨자로 표시
    <small> 기본 글자의 크기보다 작은 크기의 글자로 표시
    작게 표시해야 하는 내용(부수적인 해설이나 이용조건, 법적 공지 등)

     

    논리적 스타일 관련 요소

    출력 형태보다는 요소 자체가 의미를 갖고 사용되는 요소

    cite, code, samp, var, dfn, em, strong, abbr, address, kbd(키보드), "q"(인용), mark(강조)

    <cite> 책, 시, 그림, 영화 등의 작품 제목을 표시
    <code> 컴퓨터 코드를 표시
    <samp> 프로그램의 샘플 출력을 표시
    <var> 변수를 표시
    <dfn> 용어에 대한 정의를 표시
    <em> 강조하는 내용을 표시
    <strong> 중요한 내용을 표시
    진하게 표시됨.
    <abbr> 축약형을 표시
    <address> 실제 우편물 주소를 표시
    자동 줄바꿈 기능이 있음
    <kbd> 키보드로 입력한 내용임을 표시
    폰트가 다름
    <q> "짧은 인용구를 표시"
    내용 앞뒤에 큰따옴표가 붙음
    <mark> 시각적/의미적으로 특정 문구/단어 강조
    노란색 형광펜이 표시됨.

     

    블록요소 vs 인라인 요소

    블록 요소 인라인 요소
    문서 구조 요소 텍스트 요소
    항상 새로운 줄에서 시작해서
    하나의 줄을 전부 차지해서 내용 표시    		 입력하는 내용만큼의
    공간을 차지해서 내용 표시
    자동으로 줄바꿈 수행 줄바꿈 미수행
    → 앞뒤 내용이 이어져 한 줄에 쭉 표시
    div, p, h1, ⋯ span, img, strong, ⋯

    콘텐츠 컨테이너 요소: div, span

    div 요소 span 요소
    블록 요소 인라인 요소
    HTML 요소를 묶어 하나의 논리적인 단위의 영역을 구성 텍스트를 위한 컨테이너
    논리적으로 구분된 대량의 내용에 대해 
    CSS 스타일 지정 또는 전체 페이지의 공간을 분할하여
    레이아웃을 구성하는 데 사용
    (브라우저의 부하를 많이 가져오는 요소 → 사용 지양)    		 텍스트의 일부에 대해 CSS 스타일 지정
    또는 자바스크립트에서 조작할 때 유용

    height: 50px;

    728x90

    '방송대 컴퓨터과학과 > HTML5 웹프로그래밍' 카테고리의 다른 글

    방송대 HTML5웹프로그래밍 - 3강. 미디어, 시멘틱 요소  (1) 2023.04.19
    방송대 HTML5웹프로그래밍 - 2강. 리스트, 이미지, 하이퍼링크, 테이블  (0) 2023.04.19
    '방송대 컴퓨터과학과/HTML5 웹프로그래밍' Related Articles more