패스트캠퍼스 메가바이트스쿨 Day5 (1주차 금요일 - Web Programming)

Today Topic : Web Programming


🗝 Keywords


✅ 컴퓨터의 메모리

✅ 프로그래밍 언어

✅ 웹의 탄생

✅ HTML 구조

✅ HTML 기본 활용



1. 컴퓨터의 메모리 (with Web Programming)

  • 컴퓨터는 메모리에 있는 data를 cpu가 계산해주는 계산-기(compute-er)
  • 메모리는 입력된 신호(주소/데이터)에 대한 전자 상태를 유지하고 변경하기도 하는 장치
  • 가져오기 위한 주소신호와 데이터를 입력 받는 신호
  • 메모리 안에는 셀이 존재하고, 셀은 0(없음)과 1(있음)으로 나뉜다.

16진수의 탄생 배경

  • 각각의 메모리 주소는 16진수로 표기 되어 주소값이 나온다 .1~F까지의 숫자 각각의 주소값에는 데이터가 들어있음.
  • 주소를 표기하는 별명을 설정할 수 있고, 이는 변수/객체 등으로 나눈다.
  • 근데 각각의 주소/데이터가 너무 많으니까 분류를 하기 시작했다. 자녀라는 메모리주소에 주소값을 데이터로 넣어서 해당되는 주소값으로 이동해서 여러 데이터를 보관하기 시작함.



2. 프로그래밍 언어

🚀 프로그래밍 언어의 등장

  • 프로그램이 동작하려면 OS가 어셈블러로 기계코드로 변환해서 메모리에 입력을 해야만 CPU가 처리를 할 수 있음
  • 이전 프로그래밍에는 어셈블러(기계어로 전달할 수 있는 문법)을 하나씩 다 입력해야만 했음.
  • 그런데 어셈블러는 너무 인간에게 친숙하지 않기 때문에 우리가 입력한 데이터를 어셈블러로 변환해주는 것이 프로그래밍 언어이다.


3. HTML

3-1) DOCTYPE

<!DOCTYPE html>
<!DOCTYPE html PUBLIC "~~~>

🚀 해설

  • 문서의 HTML 버전을 지정함. 현재는 HTML5 버전을 표준으로 작성하고 있음.
  • 만약 아래와 같이 html 뒤에 PUBLIC "~~"가 붙어 있을 경우에는 이전 버전의 HTML이 사용되고 있는 것
  • 따라서 은 현재 웹브라우저에서 지원하는 가장 최신 버전의 HTML로 설정하는 것을 의미

HTML 버전

  • HTML 1
  • HTML 2
  • HTML 3
  • HTML 4
  • XHTML
  • HTML 5(표준)

3-2) 기본 태그

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    
</body>
</html>

🚀 기본태그

  • html 태그 : 웹브라우저에 나오는 문서 전체를 의미함
  • head 태그 : 문서의 정보를 나타내는 범위. 즉 제목, 설명, 파일 위치, 스타일 등 보이지 않는 정보를 작성하는 범위
  • body 태그 : 문서의 구조를 나타내는 범위 즉 사용자 화면을 통해 보여지는 로고,헤더,푸터, 이미지 같은 웹페이지의 보여지는 구조를 작성하는 범위

태그 기본 완성

  • vs code에서는 ! + tab 키를 누르면 아래와 같이 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>
```

3-3) html에 css,js 연결하기

  • css 연결하기
<head>
<link rel = "stylesheet" href="./파일명.css">
</head>
div {
  color: red;
  font-size: 100px;
}

아래의 div 명령어로 되어있는 css를 html에 연결하기 위해서는 head 태그 안에 link 태그로 연결할 수 있음.

  • js 연결하기
<head>
<script src="./파일명.js"></script>
</head>
console.log('ctaaag');

아래의 자바스크립트 명령을 html head 태그안에 script를 통해서 연결시킬 수 있음.

5-4) head 태그에 설정할 수 있는 태그들

  • style
<head>
 	<style>
        div {
            text-decoration: underline;
        }
    </style>
</head>

css를 파일로 만들어서 링크로 연결해주는 방식도 있고, html 헤드 태그 내의 style태그로 붙여도 적용이 가능함

  • title
<head>
	<tlte> 제목 </title>
</head>
  • link
<link rel = "stylesheet" href="./파일명.css" />
<link rel = "icon" href="./파일명.png">

link는 외부 문서를 가져와 연결할 때 사용함.(대부분 css 파일)
rel은 relation의 약어. 가져올 문서와 어떤 관계이지 의미함
href는 가져올 문서의 경로를 의미함.

  • script
<head>
<script src="./파일명.js"></script>
<script>
	<console.log('Hello World!')
</script>
</head>

script도 마찬가지로 외부 링크로도 연결가능하고, head내의 직접 스크립트 태그로 명령을 내릴 수 있음.

  • meta
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

meta 태그는 HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공함
여기서 viewport는 모바일과 관련된 작업을 할 때만 유용함. 왜냐면 뷰포트는 스마트폰 상의 화면을 의미하며, 해당 화면의 내용이 기기 넓이로 등록하고, 웹페이지와 1배수 즉 동일한 설정을 하는 것

5-5) 화면에 이미지 출력하기

<body>
  <img src="./폴더명/파일명" alt="./폴더명/파일명">
  <img src="이미지링크">
</body>
  • 최상위(root) 경로에 html을 놔둬야만 다른 js나 css 파일을 불러올 수 있음.
  • 컴퓨터 내부의 경로를 통해서 접근하거나, 이미지 웹 링크를 통해 접근 가능함.

5-6) 상대 경로 vs 절대 경로

상대경로
./ : 주변에서 찾기 단, ./는 생략이 가능함
../ : 상위폴더로 한 번 나가서 주변에서 찾기

절대경로
/ : 루트경로(최상위 폴더의 경로) 즉, 로컬호스트 프로젝트 전체를 말함.
// : https 로컬 전용 주소 즉, https(프로토콜)://localhost:5500/images/파일명

5-7) 페이지를 나누고 연결(링크)하기

만약 html 내부에서 특정 수식을 따로 관리하고 싶다면 다른 파일을 링크로 연결할 수 있다.
아래와 같이 해당 폴더에 연결을 하면 명령 하게 됨

<body>
  <a href="https://naver.com">NAVER</a>
  <a href="/about/about.html">About</a>
  <a href="/about">About</a>
</body>
  1. 기타 활용

    🚀 개발자도구 활용

  • 웹페이지 alt+opt+p 버튼을 누르면 개발자 도구 활용가능
  • 개발자도구 활용을 통해 웹페이지 요소,레이아웃 구성 등을 알 수 있음

🚀 codepen.io 활용
별도의 html,css,js를 연결하지 않아도 웹페이지 내에서 간단하게 테스트 해볼 수 있는 페이지
codepen

🚀 브라우저 스타일 초기화

  • 웹 표준에 의거해서 웹 브라우저마다 조금씩 다르게 나올 수 있음. 따라서 각 웹 브라우저마다 설정해놨던 값들을 초기화 한 상태에서 작업을 해주는 것이 좋음.
  • 대표적으로 reset.css cdn 있음.
  • 파일명.min.확장자는 해당 파일의 압축 버전임. 왠만하면 압축 파일 사용하는 것을 권장함
  • 우리가 사용하는 css파일링크 앞에 reset.css 링크 적용


    코드펜에서 초기화하기

좋은 웹페이지 즐겨찾기