학원 50일차 - HTML

·2021년 7월 10일
0
post-thumbnail

2021.06.07

이클립스 설정하기

  • 워크 스페이스 이동 -> C:\class\client
  • 인코딩 바꾸기
    • window - preferences - workspace - UTF-8로 변환
    • CSS, HTML, JSP 모두 UTF-8로 인코딩 변환
  • 폰트 바꾸기 등..

tomcat설치

tomcat이랑 이클립스 연결하기

  • preference - server - Runtime Environments
    • add > 8.5버전 선택 > C:\appache-tomcat-8.5.66 경로 설정
  • 프로젝트 만들기
    • new - Dynamic Web Project - 프로젝트명 : ClientTest
  • window - show view - Servers - link 클릭 - 8.5선택 - add

  • start 눌렀을때 에러가 나는 이유 > 포트번호가 겹쳐서 > 포트번호 바꿔주기
    • tomcat v8.5 Server at localhost더블클릭 > HTTP번호 8090으로 바꾸기 > ctrl + s 저장

  • 내장 브라우저

  • 기본 브라우저 : 크롬 또는 엣지로 설정하기 (브라우저마다 HTML 실행 결과가 달라진다.)

VSCODE

  • window 64bit 설치

설치 위치:
C:\Program Files\Microsoft VS Code

시작 메뉴 폴더:
Visual Studio Code

추가 작업:
아이콘 추가:
바탕 화면에 바로가기 만들기(D)
기타:
"Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가
"Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가
PATH에 추가(다시 시작한 후 사용 가능)

  • 폴더 열기
    • C:\class\client\ClientTest\src\main\webapp 경로 설정
  • 설정 > 글꼴 설정, 글씨 크기 설정

  • 줄바꿈여부 > on

  • 설정 > click open > dubleClick으로 설정하면 더블클릭해야 파일이 열린다.

  • 설정 > setting > 주석 색상, 글씨타입설정

"editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "comment",
                "settings": {
                    "foreground": "#CCCCCC",
                    "fontStyle": "normal"
                }
            }
        ]
    }
플러그인 설치


수업

  1. Java -> 프로그래밍 언어(O) + 제어 구조(O)
  2. Oracle
    • sql -> 프로그래밍 언어(X) + 제어 구조(X)
    • pl/sql -> 프로그래밍 언어(O) + 제어 구조(O)
  3. Web Client
    • HTML
    • CSS
    • JavaScript
    • 위의 3대 언어를 모두 합쳐서 브라우저에 보이는 웹페이지를 만들게 된다.

HTML, Hyper Text Markup Language

  • 하이퍼 텍스트 마크업 언어
  • Hyper Text : 링크(Link)
  • Markup Language: 태그(Tag)를 사용해서 문법을 표기하는 언어
    • 마크업을 사용하는 언어 : SGML, XML, HTML, XHTML 등...
  • 프로그래밍 언어(X) -> 표현 언어(O) : 브라우저 화면에 무언가를 출력하는 기능만 있는 언어
  • 난이도 하 -> 개발자 입장 -> 중하
  • https://www.w3.org/ -> The World Wide Web Consortium (W3C) > 웹 관련 기술 표준화 작업
  • HTML 1.0 ~ HTML5
    • HTML 4.01 : 대중화된 버전, 현재까지도 남아있음.
    • XHTML 1.0 : HTML + XML
    • XHTML 2.0 : 하위버전 호환X > 계획 발표 > 포기
    • HTML5 : 최신 버전
  • 수업 : HTML 1.01 + XHTML 1.0 + HTML5 한번에 수업.

브라우저, Web Browser

  • 웹 서버에 접속해서, 필요한 자원(HTML페이지, 이미지, 동영상 등등)을 다운로드 받아서
    처리 후에 화면에 결과를 출력하는 프로그램
  • HTML언어를 실행하는 환경 (HTML 언어 분석 + 파싱 + 번역(컴파일) + 실행 + 결과)
  • 자바에 비교하면 JDK + JRE와 유사

  • 언어(문법) + HTML(w3c 제작) -> 실행 환경은 여러 기업에서 만듦 > 기업마다 차별점을 주려고 하나의 언어를 다르게 해석하기 시작함...
    • 넷스케이프 네비게이터(NN) vs 마이크로소프트 인터넷 익스플로러(IE) > IE 브라우저 내장 > 브라우저 1차 대전 > 회사마다 자기들만의 기능 생성 > 사이트마다 브라우저를 달리해야했음.. > IE에서 에러를 브라우저에서 정상처리 > 환경 엉망 > IE 독주 > 나머지 회사 단합 > 개발 환경 표준화하자! > 2차 대전 > 웹표준화 자리잡기 시작

HTML 개발 환경

  • 텍스트 편집기
  1. 메모장
  2. IDE : Eclipes, Visual Studio, IntelliJ 등..
  3. SublimeText, Atom, Brackets, Visual Studio code 등..
  4. 나모 웹에디터, 프론트 엔드, 드림위버 등..

실행환경

  • 브라우저

ex01.html

 <!-- 주석 -->
  • html:5 -> enter > 코드 조각 완성해준다.
<!--  
    XML -> DTD언어
    - 현재 문서가 어떤 종류의 문서인지(문서유형)를 알려주는 역할
    - 브라우저에게 알려줌

    선언문(Declaration)
    - HTML 선언
-->
<!DOCTYPE html>  <!-- HTML5 --> 

<!-- 
    <head></head> 
    - 문서의 모든 내용을 감싸는 역할> 문서 자체
    - 문서의 시작과 끝을 담당
    - 루트 태그, Root Tag

    <html> 자식
    1. <head> 태그
    2. <body> 태그
-->
<html lang="en"> 

    <!-- 
        <head> 태그
         - 문서의 정보를 담고 있는 태그
         - 브라우저에게 전달하는 정보(O), 화면에 보이는 출력 정보(X)
         - 문서 머릿말 (일반사람이 볼 필요 없는 내부적으로 필요한 정보)
         - 사람이 보는 정보(X)   
     -->
<head>

    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

    <!-- 
        <body> 태그
        - 브라우저에 출력된 내용을 담는 태그
        - 이 안의 내용은 화면에 출력이 된다.
        - 텍스트, 이미지, 동영상, 음악 등등,,
     -->
<body>
	홍길동입니다.
</body>
</html>

ex02_whitespace.html

공백문자, Whitespace

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        ex02.html

        HTML 문서 확장자
        1. *.html
        2. *.htm 

        공백문자, Whitespace
        - 스페이스, 탭, 개행문자
        - HTML 페이지 소스상에 존재하는 공백 문자열을 실행기(브라우저)가 처리하는 규칙
        - 거의 모든 브라우저가 동일한 규칙으로 처리한다.
        - 브라우저는 소스상의 연속된 공백 문자(종류와 상관없이)를 딱 1개의 스페이스로 치환해서 화면에 출력한다. 
        
        공백문자를 원하는 모습으로 화면에 출력하는 방법
        1. 스페이스 출력
            - 스페이스 1개당 > 엔티티(Entity) 1개 > &nbsp; (non-break space)
        
        2. 개행문자 출력 
            - <br> 태그 사용
            - line-break

        3. 탭문자
            - 없음
            - 브라우저 창은 편집기가 아니라서 탭이 존재하지 않기 때문에 
     -->

     하나&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;둘     셋
     <br>
     넷                                    다섯
     <br>
     여섯

     <!-- 
        교재 대용 사이트 
        - https://www.w3schools.com/
      -->
</body>
</html>


ex03.

HTML 구성 요소

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        HTML 구성 요소
        ---------------------
        1. 태그(Tag), 요소(Element)
        2. 속성 (Attribute)
        3. 텍스트 (PCDATA)
        --------------------- 1,2,3번이 가장 중요
        4. 주석 (Comment)
        ---------------------
        5. 선언문 (Declaration)
        6. 엔티티 (Entity)
        --------------------- 5,6번은 비중이 거의 없음


        1. 태그(Tag), 요소(Element)
            - 예약어 (명령어)를 <>로 묶어놓은 요소
            - HTML의 문법을 구성하는 주요 요소
            - HTML 문서의 골격(뼈대)을 만드는 역할(레이아웃을 잡는 역할) + 데이터(문자열, 이미지)를 출력하는 역할
            - 각 태그마다 역할 부여 -> 출력되는 형태나 기능이 다르다.
        
        HTML 태그 표현 방식
        a. <태그명></태그명>
            - 쌍태그
            - <태그명> : 시작 태그
            - </태그명> : 끝 태그
            - 영역을 가지는 태그({}역할)
            ex) <html></html>, <head></head>, <body></body>


        b. <태그명>
            - 단독태그, 빈태그
            - 영역을 가지지 않는 태그
            - 표기법
                1. <br>
                2. <br></br>
                3. <br/>
                    - HTML 4.01: 태그를 <BR> 대문자로 적도록 권장함. -> 옛날 자료
                    - XHML 1.0: 태그&속성 모두 소문자로 적도록 권장함. -> 모든 태그는 시작태그와 끝태그를 적도록 권장 <br></br>은 너무 길어서 -> <br/> -> <br />
                    - HTML5: <br>로 쓰기로 정착 <br />로 써도 무방함.   


        HTML 태그 내용의 형식, Content Type
            - <시작태그>내용</끝태그>    
            - 내용이 가질 수 있는 패턴

        a. 자식 태그
            - 내용의 영역에 또 다른 태그가 올 수 있다.
            - 텍스트는 올 수 없다.
            ex) <html>, <head>
        
        b. PCDATA(= 문자열)
            - Pased Character Data
            - 브라우저에 의해서 해석되는 데이터(문법 검사의 대상이 되는 데이터)
            - 내용의 영역에 문자열만 올 수 있다.
            - 자식 태그는 올 수 없다.
            ex) <title>

        c. Empty
            - 내용의 영역에 아무것도 오지 않는다.
            - 자식 태그(x), 문자열(x)
            - 빈태그, 단독 태그
            ex) <meta>, <br> : 사용 가능한 표현
            ex) <meta></meta>, <br></br> : 사용 가능한 표현 -> 귀찮아서 안씀


        d. Mixed, 혼합형
                - 내용의 영역에 모두 포함한다.
                - 자식 태그(O), 문자열(O), Empty(O)
                - 1 + 2 + 3
                ex) <body>, 대부분의 태그
        

        
        2. 속성 (Attribute)
            - 데이터의 쓰임 : 태그의 성질을 정의하는 역할
            - 태그가 가지는 데이터의 한 종류
            - 속성 표기법 
                    a. <시작태그 속성명="값"></끝태그>
                    b. <시작태그 속성명="값" 속성명="값" 속성명="값"></끝태그>
                    c. <시작태그 속성명="값"></끝태그>
                    d. <시작태그 속성명='값'></끝태그>
                    e. <시작태그 속성명=값></끝태그> : HTML에 한해서 ""생략가능 (XML에서는 에러)-> 사용금지! 
                    f. <시작태그 속성명="값"> : 단독태그
                    g. <시작태그 속성명="값 값 값"> : 속성값을 여러개 갖는 경우



        3. PCDATA, 문자열, 텍스트
            - 태그가 가지는 데이터의 한 종류
            - 데이터의 쓰임 : 주로 화면에 출력된다.
            - 시작태그와 끝태그 사이의 모든 문자열

        
        5. 엔티티(Entity)
            - 미리 정해져있는 표현을 소스에 표기하면, 브라우저와 약속된 표기법을 통해 표현하는 요소
            - 해석하면 안되는(파싱하면 안되는) 문자들을 화면에 출력하는 역할(일부 기능)
            - &엔티티명; //Built-in Entity
                a. &nbsp; // 공백문자표현
                b. &lt; // '<' -> less than
                c. &gt; // '>' -> greater than
                d. &amp; // '&'
                e. &quot; // "
                f. &apos; // '
                g. &copy; //©
                h. &#문자코드;
     -->


     <!-- 
        HTML 4.01 -> HTML5
        - 추가된 태그(다량)
        - 소멸된 태그(소량) -> legacy tag -> 앞으로 소멸 예정이니까 사용하지 말라고 권고.
      -->
    외부문자열 <font color="red" size="7">폰트입니다.</font> 외부문자열

    <div>오늘은 &lt;a&gt;태그에 대해서 수업을 합니다.</div>
    <div>&copy;Copyright 2021 test.com All right reserved.</div>
    <div>&#65;</div>
</body>
</html>
  • CSV -> 가독성 안좋음. (어떤게 영어점수인지 수학점수인지 알기 어려움)
  • XML -> 태그, 속성을 마음대로 설정가능, 구조화된 텍스트 문서, 의미 명확해서 관리 용이, 탐색하기 편리


ex04_head.html

<!DOCTYPE html>
<html lang="en">

<!-- 
    <head>태그
        - 문서의 내부 정보를 가진다.
        - 브라우저에게 전달한다.

    <head> 태그의 자식
        1. <meta>
            - 페이지와 관련된 여러가지 정보를 저장한다.(인토딩, 장치 정보, 저자, 키워드, 제작 툴..)
        2. <title>    
            - 문서의 제목
            - PCDATA만 가질 수 있다.
            - 반드시 기입해야한다.
            - 역할
                a. 브라우저의 타이틀바(제목표시줄)에 출력된다.
                b. 검색 사이트의 결과 제목으로 사용된다. + 검색 사이트의 수집 대상이 된다.
                c. 브라우저의 북마크 제목으로 사용된다.
        3. <style>
            - css
        4. <script>
            - Javascript
        5. <link>
            - css
        6. 기타 등등   
        
        
    검색 사이트(엔진)
    1. 디렉토리 서비스
            - 야후 > 각종 국내 사이트
    2. 키워드 검색 서비스
            - 알타비스타 > 심마니, 엠파스 > 대부분 사이트(구글)
            - 전 세계 사이트들을 돌아다니면서 정보를 수집하는 프로그램 > Bot, Spider > 정보 수집 > 정형화 > DB 저장(키워드 + URL) 

 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="홍길동"> <!-- 개발자명 -->
    <meta name="keyword" content="HTML,태그,수업,예제"> <!-- 페이지 키워드 -->
    <meta name="description" content="head 태그 예제입니다."> <!-- 문서에 대한 설명 -->
    <meta name="generator" content="Visual Studio Code"> <!--개발 도구 -->

    <title>제목입니다.</title>
</head>
<body>
    <!-- 
        ex04_head.html
     -->
     예제입니다.
</body>
</html>
profile
모르면 괴롭고 알면 즐겁다.

0개의 댓글