---------------------------------------------------------------------------------------------


* 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 인코딩



< 는 &lt;

> 는 &gt; 를 쓰면은 태그가 아니기 때문에 실행은 하지 않고 디코딩해서 <와 >로 나타내준다.






* 링크 걸기





* 그림 넣기




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부터 숫자를 붙여서 리스트를 구성한다는 것을 볼 수 있다.













이런식으로 바꾸는것도 가능하다











링크도 이런식으로!







li a:hover은 마우스 올렸을 때 



'정보보안' 카테고리의 다른 글

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

티스토리툴바