최초로 공개된 웹 페이지(1989년)
- 문서 공유를 위해 나옴.
http://info.cern.ch/
1. WEB 1.0
1). HTML(Hyper-Text Markup-Language)
- 언어라고 하기에는 부족 : 분기, 반복 , 함수 . . . 존재x
- HTML5: html + javascript
- 문서 표준 : 태그로 표현
head : 화면에 보이지 않는 것들
body : 화면에 보여지는 내용들
2). 태그(tag) Vs. 요소(elements)
- 컨텐츠(화면에 보여지는 내용)의 타입을 정하는 용도
- <tag name> contents </tag name>
opening tag , begin tag , closing tag, end tag
- <tag name/> : self clsing
3). 문서 표준
1~2 : block tag
inline tag : img ...
3-1). 글자를 표현할 수 있는 태그
1. 제목 : heading
- <h1> ~ <h6> //번호가 높아질수록 작은 제목을 표현
확장자를 html로 변경하여 저장한 후, 웹브라우저를 실행 시키면 아래와 같이뜬다.
태그가 있고와 없고의 차이
아래 그림 처럼 표준제약을 지키지 않아도 되긴한다. 표준이라 쓴 것이다.
2. 본문,문단, 단락 , ..
paragraph : <p>
<span>
<div>
enter와 같은 것 : <br> 딱히 표준을 안지켜도 되지만
지키 려면 <br> </br> 같이 한쌍으로 표현
3. 목차 : list 항목 : list item -> <li>
1). 정렬된 리스트 : ordered list
<ol> </ol>
2). 비정렬된 리스트 : unordered list
<ul> </ul>
3-2) 그림을 표현할 수 있는 태그
이미지 : image -> <img>
<img> . . . <img>
<img / >
[속성] : attribute
- 오프닝(시작) 태그에 작성
- 요소별로 속성항목은 다를 수 있다.
<img src="path"> //이미지 삽입
<img width ="가로" height="높이" src="path">
<img src="path"> //이미지 삽입
<img width ="가로" height="높이" src="path">
1. 개별 속성
2. 글로벌 속성
- 이벤트 속성 : 마우스,키보드, . . .
- 스타일 속성 -> CSS(Casding Style Sheet )
- id, class
id 와 class
1. id : 유일한 요소를 표현
<p id="unique"> 어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
이런식으로 id를 설정할 수 있다.
#을 이용하여 사용 한다.
#unique {
color : red;
}
2. class : 여러 요소를 표현
<p class="multi">내뱉는 숨마다<br>
가시 돋친 고통이어서 <br>
깊은 곳에 숨겨둔 사랑 또한<br>
그저 지워 내고</p>
이런식으로 class를 설정할 수 있다.
.을 이용하여 사용 한다.
.multi{
color : green;
}
CSS ( Cascading Style Sheet )
확장자명 .css로 저장
- link : 해당 문서와 연결된 정보
다른 메모장에 style의 정보를 입력하고 .css로 저장
원래 소스가 있는 메모장에서
style이 있던 head 부분을
<link type= "파일의 타입" href= "파일의경로" rel= "무엇을 표현하는지" />
<link type= "text/css" href= "style.css" rel= "stylesheet" />
로 변경
라이브러리 처럼 인식해 언제든지 꺼내 사용 가능
3-3) 표를 표현할 수 있는 태그
표 :table
<table>
<thead>
<tr> //표의 한줄
<td></td> //표의 한칸
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
속성을 추가 했을 때
(참고사이트https://www.w3schools.com)
table style ="테두리: 색 : 선 굵기"
rowspan ="칸" : 원하는 칸 만큼 합침
3-4). 링크를 표현할 수 있는 태그
링크 : anchor , link
- 하이퍼 링크
-anchor: <a href="path|url"> 링크문자 </a>
네이버를 클릭하게 되면 내가 적은 사이트로 이동되게 된다.
번외
1. style 속성을 이용한 스타일 지정
2. <style> 태그를 이용한 방법(head 부분에 사용 )
<style>
selector {
}
</style>
*selector: tag name , id , class
노래가사 페이지 만들기
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
color : white;
text-align: left;
}
body {
background-image:url("http://cphoto.asiae.co.kr/listimglink/6/2018020711081799066_1517969294.jpg");
background-repeat: no -repeat;
background-size : 120% 120%;
</style>
</head>
<body>
<h1> My Way</h1>
<p> 흐르는 물결이<br>
내 발목에 감겨 나가면 <br>
깊은 곳에 숨겨둔 아픈 기억<br>
모두 살아나고</p>
<p> 어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
<p>그댈 그린 밤들이<br>
내게 욕심이란 걸 맘 아프게 알아 <br>
나를 택한 운명이<br>
행여 그댈 맴돌아 붙잡지 못하게 <br>
이제 그대 곁에서 떠나가 </p>
<p>내뱉는 숨마다<br>
가시 돋친 고통이어서 <br>
깊은 곳에 숨겨둔 사랑 또한<br>
그저 지워 내고</p>
<p>어디에 기대 살아갈까 <br>
나를 스쳐가는 그 모든 것들이 상처인데</p>
<p>그댈 그린 밤들이<br>
내게 사치라는 걸 맘 아프게 알아 <br>
나를 택한 운명이<br>
행여 그댈 맴돌아 붙잡지 못하게 <br>
이제 그대 곁에서 떠나가</p>
<p>언젠가 그대 곁에 다시 돌아갈 수 있다면<br>
그때가 언제라도 나를 잊지 않았다면 </p>
<p>그댈 그린 날들이<br>
내게 마지막 남은 기쁨이었단 걸 <br>
내가 택한 운명이<br>
다른 무엇이 아닌 그대뿐이라는 걸</p>
<p>이제 그대 곁에서 영원히</p>
</body>
</html>
2. 참고 사이트
1). 동영상 강의
- 생활코딩 (유튜브)
2). 코딩 교육 : codecademy.com
멋쟁이 사자처럼
https://www.w3schools.com/
부트 스트랩 , Materialize : 디자인에 관련된 사이트
