본문 바로가기
Programming/HTML & CSS & JavaScript

HTML 1일차 - title, style, script

by yoon9i 2024. 4. 18.

1. web 아키텍쳐( Architecture )
- 정적컴포넌트: 실행안됨.
- 동적컴포넌트: 실행됨.
- 랜더링: 화면에 보여지는것.
- 정적컴포넌트와 동적컴포넌트를 서비스 해주는 서버는 다르다.

클라이언트(client) 서버(server)
-------------------- -----------------------------
웹브라우저 웹컴포넌트(html,jsp,servlet)
html: 정적컴포넌트(*.html)
jsp:동적컴포넌트(*.jsp), 자바기술
servlet:동적컴포넌트(*.java), 자바기술

* html 인 경우
웹브라우저 <--------------------------->   서버 test.html ( 웹서버: Apache, IIS, ngnix )
1) 웹브라우저에서 서버에 test.html 요청
2) 서버에서 요청한 html 검색 ( 없으면 404 에러발생 )
3) 있다면 test.html 다운
4) 다운후 test.html 랜더링함.

=> 정적컴포넌트

 

* jsp 인 경우
웹브라우저 <--------------------------->   서버 test.jsp ( 웹서버기능을 포함한 컨테이너: Tomcat )
1) 웹브라우저에서 서버에 test.jsp 요청
2) 서버에서 요청한 jsp 검색 ( 없으면 404 에러발생 )
3) 있다면 test.jsp 가 test_jsp.java 생성
4) 컴파일 test_jsp.class 생성
5) 실행 ( JVM )
-> 실행결과는 html 로 만들어짐( 요청할때마다 실행됨 )
6) html 를 응답
7) html 랜더링함.

=> 동적컴포넌트

* servlet 인 경우
웹브라우저 <--------------------------->   서버 TestServlet.java ( 웹서버기능을 포함한 컨테이너: Tomcat )
1) 웹브라우저에서 서버에 TestServlet.java 요청
2) 서버에서 요청한 .java 검색 ( 없으면 404 에러발생 )
3) 컴파일 class 생성
4) 실행 
-> 실행결과는 html 로 만들어짐
5) html 응답
6) html 랜더링함.

 

2. 요청 URL
- 필요한 정보
1) 서버의 IP 정보 : (ex) 210.100.100.3
2) port 번호: (ex) 80 - Apache / 8080 - Tomcat / 3306 - MySQL
3) 타겟 컴포넌트
- http:// : 보안 x
- https:// : 보안 o

클라이언트 --------------------------> 서버쪽 PC ( ex) 210.100.100.3 )
------------                                        -------------
                                                      Apache웹서버(80)
                                                      ..
                                                      Tomcat 컨테이너(8080)
                                                      - html ( test.html, hello.html, ... ) 
                                                      - jsp 
                                                      - Servlet
                                                      ..
                                                      MySQL(3306)
                                                      Oracle(1521)
                                                      ..

클라이언트 -> 요청: http:// , https:// -> 서버쪽 PC
- URL 문법: http://서버IP:port번호/타켓
ex)
http://210.100.100.3:8080/test.html
http://도메인:8080/test.html

 

3. 환경설정

1)  node 설정
https://nodejs.org/ 다운받고 설치(기본설치)

cmd 창에서 node -v 입력하고 버전확인.

2) VSC( Visual Studio Code ) 설치
https://code.visualstudio.com/ 다운받고 설치(기본설치)

3) 워크스페이스 작성


4. 웹 (Web) 개요
- 1991 년에 World wid Web(WWW) 용어가 처음 나옴.
- 1993 년에 웹 표준단체 창설 ( W3C )
  http://www.w3.org

html표준
css표준 ------------------------------------> 웹브라우저실행( 구글, MS, Firefox,... )
js표준
(java의 인터페이스) -----------------------> ( 인터페이스 구현한 클래스 )

- 모질라( Mozilla ) 는 가장 빠르게 표준 준수해서 가이드 제공.
http://developer.mozilla.org

html 표준가이드: https://developer.mozilla.org/ko/docs/Web/HTML
css 표준가이드: https://developer.mozilla.org/ko/docs/Web/css
js 표준가이드: https://developer.mozilla.org/ko/docs/Web/JavaScript

==> 모든 브라우저가 제안된 표준안을 준수하지 못함. ( * )

 

5. 웹 표준
- 기본개념: 
특정 기기와 상관없이 누구든지 정보 접근이 가능한 웹을 만들어야된다.
( 시각장애인일지라도 )

- 구현방법1
역할 분담

1) html
- 데이터 구조( 웹페이지 뼈대제작 ) 담당
2) css
- 디자인 레이아웃 담당
3) javascript
- 동적처리 담당
- *.js

==> 모두 서버쪽에 저장되지만 실행은 웹브라우저인 클라이언트에서 실행

6. html 개요
- hyper text markup language 의 약자로서 웹페이지 작성을 위한 언어.
hyper text 의미: 링크 의미
markup language 의미: 정보표시용 태그( <> ) 의미

7. html 특징
- 태그로 구성
- 시작태그와 종료태그 그리고 몸체(body) 인 3가지로 구성됨.

 

<html>몸체</html> 
몸체? 또 다른 태그가 가능
ex)
<html>
    <body> 
         <p>hello</p>
    </body>
</html>

- 몸체없는 빈태그(empty) 가능

empty tag( 빈 태그 )
ex) <태그></태그> ==> <태그 />

- 종료태그가 없는 태그 가능
ex)
<br>, <hr>, <img>, <input>, <link>

- 소문자 권장
- 시작태그에는 속성을 포함할 수 있다.
ex)
<p>class</p>
<p class="x" id="y">hello2</p>

속성명은 정해져 있으나 커스텀 속성 가능함.
커스텀 속성 문법: data-속성명="속성값"

<p class="x" id="y" data-ssg="z" >hello2</p>

모든 시작태그에 범용적으로 사용할수 있는 속성( class, id style, name 등..)이 있고
태그에 종속적인 속성( ex) <a href=""></a> ) 도 있다.

 

8. html 버전
- html5 사용예정
- 웹브라우저에 html 버전을 반드시 알려줘야 된다.
  DOCETYPE 이용해서 버전정보를 알려준다.

문법: html5 doctype 문법

<!DOCTYPE html>


9. html 기본구조
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>


     </body> 
</html>


10. html 주석문

     <!--
         <p>hello</p>
      -->

 

11. live server
http://127.0.0.1:5500/template.html

서버IP: 127.0.0.1 ( 로컬의미 )
          localhost
port번호: 5500
targaet컴포넌트: template.html

 

< html 기본구조 >

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    
</body>
</html>

 

 

12. <head> 태그의 몸체

1) <title>태그
- 문서의 타이틀 지정용도
- 웹브라우저의 탭에 보임
- 즐겨찾기 추가할때 저장됨

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>hello</title>
</head>
<body>
    
</body>
</html>

 

2) <style>태그
- css 설정 방법 3가지 중에서 내부 css 스타일 정보 지정용.

* css 설정 3가지방법
가. 인라인 css 스타일
- 시작태그의 style 속성에 css 를 적용하는 방법
ex) <p style="color: aqua;">Hello1-인라인스타일</p>

나. 내부 css 스타일
- <style> 태그에서 css 적용할 html 태그를 선택해서 적용하는 방법
ex)
<!DOCTYPE html>
<html lang="en">
<head>
    <title>style</title>
    <style>
        #xxx {
            /* 내부스타일 */
            color: blue;
        }
    </style>
</head>
<body>
    <p id="xxx">Hello2-내부스타일</p>
</body>
</html>

다. 외부 css 스타일
- *.css 가진 외부파일로 스타일 생성하고 html 에서 호출해서 사용
- <link rel="stylesheet" href="external.css" >

* {
 margin: 0;
 padding: 0;
}

/*     css 주석문       */  

#yyy {
    color: blueviolet;
    font-size: 30px;
}

 

3) 태그
- 외부 css 스타일 지정시 사용
- favicon 경로지정시 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <title>style</title>
    <!-- 외부스타일 -->
    <link rel="stylesheet" href="external.css">
    <style>
        /* 내부스타일 */
        #xxx {
            color: blue;
        }
    </style>
</head>
<body>
    <p style="color: aqua;">Hello1-인라인스타일</p>
    <p id="xxx">Hello2-내부스타일</p>
    <p id="yyy">Hello3-외부스타일</p>
</body>
</html>

 

4) <script> 태그
- 자바스크립트 사용
- <body>태그안에서도 사용가능

 

* js 설정방법 2가지
가. 내부
- <script> js 코드 </script> 사용

나. 외부
- <script src="*.js"></script> 사용
- 외부파일인 *.js 만들고 html 에서 불러다가 사용.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>script</title>
    <script>
        // 내부 js
        alert("내부 js"); // 경고창
    </script>
    <script src="external.js"></script>
    <!-- 내부js -> 외부js -> body js 순으로 출력 -->
</head>
<body>
    <script>
        // 내부 js
        alert("내부 js(2)"); // 경고창
    </script>
</body>
</html>

 

<external.js>

// external.js
alert("external.js");

 

 

 

'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글

HTML 1일차 - a, 링크, 경로  (1) 2024.04.18
HTML 1일차 - header, p, br, hr, 텍스트포멧  (0) 2024.04.18
Google Api -Youtube data Api v3  (0) 2023.12.26
Instagram API 를 이용하여 게시물 가져오기(수정본)  (0) 2023.12.20
Instagram API 를 이용하여 게시물 가져오기  (0) 2023.12.20

관련글

티스토리툴바