17일차 웹서버 구축 , html 웹언어, 색상표
---------------------------------------------------------------------------------------------
* Web
World Wide Web
전 세계에 있는 네트워크에 연결된 시스템을 통해 정보를 공유할 수 있는 정보 공간
* 웹구조
* HTTP
Hyper Text Transfer Protocol
/var/www/html 으로 들어간다.
클릭
시작과 끝을 알리는 <html> , </html>
이 안에 있는 것들은 html 규약을 따르겠다는 의미
head : 본문에 포함되는 내용은 아니지만 여러가지 스타일이 적용되는 곳
body : 본문 내용
title 이 적용된 모습
<!-- ~ --> : 주석 처리
<br> : 줄바꿈
<p> : br 두번 한 효과
</h1> 글자 크기 크기가 클수록 더 작아짐
<h1>은 자동으로 br 들어가고
font 는 안들어간다
<h>는 숫자가 클수록 점점 작아지고
font 는 점점 커진다.
위에 있는 verdana가 아니라 symbol 같은거로 하면 눈에 띄게 다르게 바뀐 것을 볼 수 있다.
* 색깔 넣기
다양한 색상 이름들이 있으니 골라서 해보자
스크립트들도 run 할 수 있고 좋은 사이트다.
중하반부에 내리면 color picker라고 있다.
코드 째로 붙이면 적용이 된다.
바뀐 것이 잘 적용됐는지 확인하려면 색깔을 매번 다르게 하는 것이 좋겠다.
* 메시지 창 띄우기
* html 인코딩
< 는 <
> 는 > 를 쓰면은 태그가 아니기 때문에 실행은 하지 않고 디코딩해서 <와 >로 나타내준다.
* 링크 걸기
* 그림 넣기
src 는 파일 위치와 이름
alt 는 이미지가 제대로 표시가 안될경우 나타날 문자열
width , height는 사이즈
* 프레임 넣기
안에 있는 프레임은 밖에 있는 프레임과 별개로 독립적으로 작동한다.
이렇게 넣어주면
테두리가 사라진다.
* Styling HTML with CSS(Cascading Style Sheets)
1. Inline : 태그 안에 들어가는 방법
2. Internal : head 태그 안에 들어가는 방법
3. External : css가 들어가 있는 다른 파일로 스타일을 잡아주는 방법
* Inline 형식
text-align 은 정렬이다. center니까 가운데가 되겠다.
h1도 추가적용 해봤다.
* Internal
inline 방식은 각각 태그를 할 때마다 매번 해줘야하지만
internal 방식은 head에 설정을 박아두고, 해당되는 태그를 할 때마다 적용이 되는 방식이다.
* external
따로 문서를 만들어준후 head 태그안에 링크를 걸어준다.
해시태그 셀렉터를 활용할 수 도 있다.
여러가지 서식을 섞어서 사용해야 할 때 유용할 것 같다.
적용을 더 해봤다.
이런식?
* Class를 이용한 방식
#대신 .을 사용
p 태그를 붙이면 p만 적용이된다.
이런 타입들이 있다.
두께
ridge 경우 2px 10px 4px 20px 이렇게 넣었는데
2px 부터 시계방향으로 두께가 조정된다.
위 2px
오른쪽 10px
아래 4px
아래 20px
만약 두개만 설정할 시 위아래, 왼쪽 오른쪽 설정된다.
예를들어 border-width:5px 8px 했으면
위 아래는 5px로, 왼쪽 오른쪽은 8px로 설정된다.
border-color:색깔 도 마찬가지다
축약도 가능하다.
왼쪽만 하고 싶을 때는 이렇게
위는 top
아래는 bottom
* 표
table 다음에 컴마가 빠져있다
table, th 이런식으로 해줘야한다.
border-collapse: collapse; 추가하면 한줄로 보인다
padding은 라인과 글자 사이에 간격을 주는 것이다.
* div
div로 공간을 분할할 수 있다.
Margin은 밖
padding은 안이다.
* list
ul과 ol이 있는데
ul은 unordered list
ol은 ordered list
차이를 확인해 보겠다.
ol은 1부터 숫자를 붙여서 리스트를 구성한다는 것을 볼 수 있다.
이런식으로 바꾸는것도 가능하다
링크도 이런식으로!
'정보보안' 카테고리의 다른 글
| 19일차 웹서버 php db careadmin (0) | 2017.03.03 |
|---|---|
| 18일차 웹서버 (0) | 2017.03.02 |
| 16일차 웹서버 (0) | 2017.02.27 |
| 보고서 프로젝트 (0) | 2017.02.23 |
| 11일차 VRRP / NMS (0) | 2017.02.17 |
