1) 인터넷 == 웹 ??
웹이 자동차라면 인터넷은 도로, 웹이 건물이라면 인터넷은 건물
팀 버너스 리는 World Wide Web(WWW)의 창시자로 WWW관련 기술들을 만들어 인터넷을 대중에게 가져다준 인물이다.
스위스의 CERN(유럽 입자 물리 연구소)에서 팀 너버스 리가 1990년 쯤 유럽 입자 물리 연구소에 인터넷이 들어오고 마크업언어, 인터넷, 하이퍼텍스트를 합성해서 웹을 만들었다. 그 후 CERN에서 저작권을 포기하게 하여 public domain으로 만들었다.
2) IP 어드레스
IP 어드레스는 웹서버와 웹브라우저 모두에 있다. 하지만 이를 인간이 전부 기억하기 어려우므로 이름을 붙인다. info.cern.ch → 이런식으로 IP 어드레스에 이름을 붙이는데 이를 domain name이라고 부른다. 따라서 실제로는 기계는 domain name이 아닌 IP 어드레스로 통신한다.
3) HTML
HTML은 웹을 이루는 기본적인 뼈대가 되는 언어
<html></html> 이와 같이 여는 태그와 닫는 태그로 이루어져 있다.
옷에 붙어있는 태그와 같다. 옷의 태그는 태그안에 가격과 세탁방법 브랜드 등 여러 정보가 적혀 있고, 이 태그가 하는 일은 이 옷을 설명 하는 일이다. 따라서 HTML의 태그가 하는 일은 WEB의 구성을 설명하는 역할이다.
- <head>
<title>WEB</title>
<meta charset="utf-8">
해당 내용은 본문을 설명하며, 따라서 이를 <head>태그로 묶는다. 이중 meta는 charset (character set) 특성을 변경하는 태그이며 UTF-8은 규칙이다. 해당 규칙은 각종 내용들을 인코딩하여 한글을 웹에 작성할 수 있도록 해준다.
* 사람이 볼 수 있는걸 기계가 볼 수 있게 바꾸는 것 - 인코딩 / 기계가 볼 수 있게 바꾼 걸 사람이 볼 수 있게 바꾸는 것 - 디코딩
- <body>
<h1>WEB</h1>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
<h2>Welcome</h2>
해당 내용은 본문이므로 <body>로 묶는다.
최종으로 전체적인 내용은 <html>로 묶는다.
* 이는 약어로 래핑 기능으로 사용 가능한데, 명령 팔레트를 이용하여 명령어를 지정하여 (ctrl + cmd + r) 로 가능하다.
4) CSS
CSS는 HTML내에서 해당 웹페이지를 꾸미는 역할을 한다.
- CSS를 주는 방법
1. 인라인 스타일 시트 : 태그 속에 직접 스타일 속성값attr을 넣는 방법
2. 인터널 스타일 시트 (내부참조) : 스타일 태그를 추가하는 방법
3. 익스터널 시타일 시트 (외부참조) : 외부 css파일을 연결하는 방법
- CSS 파일을 연결하기 위해 참조하는 방법.
1. CSS 파일을 생성 [ex) (index.css)]
2. CSS 파일 내부에 스타일의 대상, 속성을 작성
- .class 이름 : 대상 클래스를 지명
- .class tag : 대상 클래스의 태그를 지명
3. 아래와 같이 html 파일의 head 태그에 css 파일을 링크한다.
<link rel="stylesheet" href="index.css">
<link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.
따라서 rel 속성은 <link> 요소에 반드시 명시되어야 하는 필수 속성이다.
참고 : http://www.tcpschool.com/html-tag-attrs/link-rel
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
- CSS 파일에서 해당 속성을 선택하는 방법
class의 이름은 .
id의 이름은 # 으로 선택하며
공백 : 해당 클래스 또는 아이디 또는 태그안의 모든 속성
꺽쇠 (>) : 바로 아래 있는 자식 속성만 선택
* float으로 정렬이 가능하나. flex 기능을 관련하여 알아보고 사용하는 것이 훨씬 용이하다.