공부용/Web

1. 대충 만들어보는 웹사이트

Fepick 2022. 9. 27. 01:03
728x90

웹 페이지의 주소는 URL

위키백과에서 퍼옴

 scheme://<user>:<password>@<host>:<port>/<url-path>
  • RFC 1738에서 정의되어 있으며, 지정된 scheme에 따라 표현방법이 다를 수 있다.
    • 일반적으로 많이 사용하는 HTTP URL의 scheme은 다음과 같이 표현한다. 
      http://<host>:<port>/<path>?<searchpart>

주로 HTTP에는 80번 포트를, FTP에는 20번 포트를 사용

 

 

웹 페이지의 3요소는 이러함

  1. 웹 페이지의 구조와 내용(HTML태그)
    제목/본문/머리말/꼬리말/주석
  2. 웹 페이지의 모양(CSS : Cascading Style Sheet)
    글자크기/배경색/밑줄/선/점선/여백
  3. 웹 페이지의 행동 및 응용 프로그램(javascript)
    사용자의 입출력/계산/차트/3D

이 3요소를 분리하여 웹 페이지를 개발하게 된다

 

 

 

HTML을 익히기 위해 직접 코딩을 해 보자

 

평소에 자주 쓰던 vscode에 html 관련 확장을 설치해서 작업함

 

<!DOCTYPE html>
<html>
<head>
    <title>주소창에 보여줄 사이트 이름</title>
</head>
<body>
    내용
</body>
</html>

일단 이게 가장 기본적인 틀이라고 볼 수 있겠다

 

 

여기다가 이런저런 태그를 집어넣어서 꾸민다

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지의 구성 요소</title>
    <style>
        body{ background-color: linen; color: green;
        margin-left: 40px; margin-right: 40px;}
        h3{ text-align: center; color: darkred;}
        hr {height: 5px;border: solid grey;background-color: grey;}
        span{color: blue;font-size: 20px;}
    </style>
    
</head>
<body>
    <h3>Elvis Presley</h3>
    <hr><!--가로로 길게 줄이 그러진다-->
    He was an American singer and actor.
    In November 1956, he made his film debut in <span>Love Me 
        tender</span>. He is often reffered to as 
        "<span>the King of Rock and Roll</span>".
</body>
</html>

그냥 따라 쳐보기만 해도 굉장히 직관적임을 알 수 있다

개쉬움

 

여기다 javascript 코드를 추가해, 사용자와 상호작용한다

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지의 구성 요소</title>
    <style>
        body{ background-color: linen; color: green;
        margin-left: 40px; margin-right: 40px;}
        h3{ text-align: center; color: darkred;}
        hr {height: 5px;border: solid grey;background-color: grey;}
        span{color: blue;font-size: 20px;}
    </style>
    <script>
        function show(){
            document.getElementById("fig").src="CB2.PNG";
        }
        function hide() {
            document.getElementById("fig").src="";
        }
    </script>
</head>
<body>
    <h3 onmouseover="show()" onmouseout="hide()">
        Elvis Presley</h3>
    <hr>
    <div><img id="fig" src=""></div>
    He was an American singer and actor.
    In November 1956, he made his film debut in <span>Love Me 
        tender</span>. He is often reffered to as 
        "<span>the King of Rock and Roll</span>".
</body>
</html>

CB2.png 파일이 html 파일과 같은 폴더에 있어야 한다

 

 

Elvis Presley에 마우스를 올리면 사진이 나타나고 마우스를 떼면 사진이 사라진다

이 화면에서 F12를 눌러 개발자도구로 진입하면 사이트의 소스들이 보인다

 

 

공부한 책 : 명품 html5 CSS3 Javascript 웹 프로그래밍 / 황기태 저

저작자표시 (새창열림)