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>- 기타 활용
🚀 개발자도구 활용
- 웹페이지 alt+opt+p 버튼을 누르면 개발자 도구 활용가능
- 개발자도구 활용을 통해 웹페이지 요소,레이아웃 구성 등을 알 수 있음
🚀 codepen.io 활용
별도의 html,css,js를 연결하지 않아도 웹페이지 내에서 간단하게 테스트 해볼 수 있는 페이지
codepen
🚀 브라우저 스타일 초기화
- 웹 표준에 의거해서 웹 브라우저마다 조금씩 다르게 나올 수 있음. 따라서 각 웹 브라우저마다 설정해놨던 값들을 초기화 한 상태에서 작업을 해주는 것이 좋음.
- 대표적으로 reset.css cdn 있음.
- 파일명.min.확장자는 해당 파일의 압축 버전임. 왠만하면 압축 파일 사용하는 것을 권장함
- 우리가 사용하는 css파일링크 앞에 reset.css 링크 적용
코드펜에서 초기화하기
