웹서버 구성 / html 기본구조 및 태그에 대해서 정리한다.
최초의 웹사이트 - info.cern.ch ( 1989년 )
* 웹 구성 및 동작
Web Browser ↔ Web Server ↔ Application(CGI)
* 현재는 front-end와 back-end로 나뉘면서 웹이 더욱 커졌다.
클라이언트:
- 웹 브라우저: 크롬
- 프록시 툴, 와이어 샤크, ...
서버:
- 아파치 웹 서버
- DBMS: mysql
- 웹 어플리케이션: php
1. 클라이언트측 언어
- HTML, Javascript, XML, ...
2. 서버측 언어
- jsp, php, python, ruby, ...
3. SQL
- MYSQL
4. 게시판 작성
- ipsum lorem
* 웹페이지를 만들때 내용이 들어가면 어떻게 보이는지 보고 싶을때 이 사이트에서 넣을 수 있는 내용을 만들어준다.
( 내용 자체는 그냥 아무 의미 없는 내용이다... )
HTML( Hyper Text Markup Language )
- markup: <...>
- 언어라고 볼 수 는 없다.
- 문서의 구조를 표현
- 문서: 제목, 본문, 표, 그림, ...
! 언어의 필수 요소: 분기, 반복
! HTML5 표준에서는 javascript를 표준에 포함시키면서 이 문제를 해결
1989년도에 웹이 제일 처음 발표
팀 버너스리에 의해서 콘소시엄이 만들어진다(w3c)
html1 ~ html4(1997년) -> html5(2014) 표준 정의
1. 아파치 웹 서버 설치: httpd
#> yum install httpd.i686
...
#> service httpd start
- 아파치 기본 디렉토리: /var/www/html
( 웹 서버를 이용하면 해당 문서를 저장매체를 이용하지 않고도 손쉽게 문서의 공유가 가능해진다 )
1. html 문서의 기본 구조
- 태그(엘리먼트/요소)와 속성으로 이루어져 있다.
1). tag
<tagname> contents </tagname>
<tagname /> : self closing ( contents가 없는 경우 사용 )
2). 기본구조
<!doctype html> : 문서 시그니처( html5는 무조건 넣어야된다 )
<html> : html 시작을 알리는 태그
<head></head> : 화면에 보여지지 않는 메타정보들이 일반적으로 들어간다.
<body> : 화면에 보여지는 모든 내용은 body안에 들어간다.
</body> : body 끝을 알리는 태그
</html> : html 끝을 알리는 태그
! 참고사이트
- 생활코딩 + 구글 -> 코딩야학
- w3schools
- codecademy
3). 문서를 표현하는 기본적인 태그들
태그 종류: 블록기반의 태그, 인라인 태그, ...
1. 글자: 제목, 본문(단락)
- heading: <h1> ~ <h6> ( 블럭기반의 태그 )
* 웹 브라우저에서 확인 했을때 자동 줄바꿈이 된것처럼 보이지만 블럭기반의 태그이기 때문에 한줄을 다 차지하고 있는것이다..
* 단락을 표현할때 사용하는 태그 ( 태그 없이 사용해도 되지만 단락을 구분할때 사용 )
- paragraph: <p>
- div: <div>
* 줄바꿈을 하는 태그
- <br>
* html에서 spacebar 또한 1칸까지만 표현되고 그 이상을 표현하려면 태그를 이용한다.
( <h1> ~ <h6> 태그를 이용해보면 차이를 금방 알 수 있다 )
( <h1> ~ <h6> 태그는 뒤에 적힌 숫자가 커질수록 더 작은 글씨 크기의 제목으로 표현 되는걸 볼 수 있다 )
! 속성
- 글로벌 속성: 모든 태그에 동일하게 적용되는 속성
- 태그별 속성: 해당 태그에 종속적인 속성
- 스타일 속성: 내용에 대한 스타일
- 이벤트 속성: 이벤트를 다루기 위한 속성 ( 글로벌에 속한 속성 )
2. 목차
1). 정렬된 목차: ordered list
- <ol>
2). 비정렬된 목차: unordered list
- <ul>
3). 아이템: 목차안에 들어가는 내용( list item )
- <li> 아이템 </li>
* 정렬된 목차는 아이템에 번호가 붙고 비정렬은 번호가 붙지 않는 차이가 있다.
* 정렬된 리스트안에 비정렬된 리스트를 넣는것도 가능하다.
( 비정렬된 리스트가 반드시 하위로 들어가줘야 된다 )
( ol 태그와 ul 태그에는 똑같이 아이템이 들어가지만 밑에 그림을 보면 다른점을 쉽게 이해 할 수 있다 )
( ol 태그를 이용하면 정렬이 되면서 옆에 순서대로 숫자가 표시되고
ul 태그를 이용하면 비정렬 상태인 그냥 점으로 표시 되는걸 볼 수 있다 )
( 목차 태그를 조금 응용해보면 정렬 목차 안에 비정렬 목차가 들어가는것도 가능하다 )
( 정렬 목차 안에 비정렬 목차가 들어가는것도 가능하지만 그렇게 되려면 비정렬 목차인 ul 태그가 ol 태그의 하위에 위치해줘야 한다 )
3. 그림
4. 표
5. 링크
6. 음악
7. 동영상
'프로그래밍 > WEB HACKING' 카테고리의 다른 글
| [WEB HACKING] php 간단한 로그인 창 만들기 / 쿠키 & 세션 이용방법 (0) | 2017.08.29 |
|---|---|
| [WEB HACKING] php 연관 배열, foreach / 데이터를 서버로 전달하는 방법( GET / POST / 쿠키 ) / 웹 인증 방법 (0) | 2017.08.17 |
| [WEB HACKING] javascript 이벤트 / php 개념 및 슈퍼 글로벌 변수 (0) | 2017.08.17 |
| [WEB HACKING] javascript 반복문( while, for, for in ), 배열 / 간단한 야구게임 만들어보기 (0) | 2017.08.14 |
| [WEB HACKING] html 태그(이미지, 표, 링크, 오디오, 비디오) / javascript 문법, 변수, 입/출력 (0) | 2017.08.12 |
댓글