웹언어
- 웹서버가 하는일
- 인터넷에서 웹브라우저의 요청을 기다리며 24시간 내내 쉬지않고 작동.
- 웹페이지가 요청을 접수하면, 요청에 해당하는 리소스를 찾고 브라우저에 적절한 응답을 보낸다.
인용구
- <q> 사느냐 죽느냐 문제다</q>
- 인용구. 인용구의 스타일을 줄 수 있다. 웹 페이지가 의미 있고 구조적이게 된다.(시각장애인 위한 음성 HTML을 생각해봐)
- 인라인 요소 – 시대의 흐름에 따라간다(q, a, em)
- <blockquote>q랑은 달리 문단과는 별도로 스스로 보여질 필요가 있는 긴 인용구</blockquote>
- 긴 인용구
- 블록 요소 – 스스로 자립가능(h1, p, blockquote) 앞과 뒤에 라인브레이크를 가지고있다.
링크
- <a href=”https://milooy.wordpress.com” title=”링크에 마우스 올리면 보이는 제목”>유림의 블로그</a>로 가봅시다.
- id 속성으로 <a>요소에 대한 목적지 생성하기
- 목적지를 찾고 id를 추가한다.
- <h2 id=”chai”>차이티라떼</h2>
- 연결하기
- <a href=”index.html#chai>차이티라떼로</a>
- 목적지를 찾고 id를 추가한다.
- 새 창에서 링크띄우기
- <a target=”_blank” href=”http://dddd”>링크링크</a>
- 블랭크 말고 “coffee”라고 쓰면: 커피라는 타겟이름을 가진 모든 링크가 같은 창에서 열릴것이다. _blank는 브라우저에 항상 새 창을 사용하라는 특별한 경우.
이미지 다루기
- <img src=”../images/green.jpg” alt=”>
- 인라인 요소(앞 뒤로 라인브레이크 삽입 안함)
- alt : 만약 이미지가 보이지 않으면 이 텍스트가 대신 사용됨
표준
- HTML5 doctype
- <!doctype html>
- 유효성 검사
CSS
- font-family : sans-serif;
- color : gray;
- border-bottom : 1px solid black;
- <link type=”text/css” rel=”stylesheet” href=”lounge.css”>
- link : 외부정보와 링크로 연결.
- type : 정보의 유형이 text/css. CSS스타일 시트라는 뜻.
- href : 스타일시트가 위치해있는 곳.
- font-size: 14px(혹은 %로도 표현가능), font-weight:bold, text-decoration: underline
- line-height : 1.6em //줄간격은 폰트의 1.6배
- class: 한개이상의 요소에 스타일을 줄때 이용.
- p.specials {} : special클래스에 있는 문단만 선택
- .specials {} : special클래스에 있는 모든 요소 선택
- id : 꾸미고자하는 스타일이 유일하고 페이지 내에서 오직 한개일때.
- #footer {} : footer id를 가진 임의의 요소 선택
- p#footer {} : 만약 <p>요소가 footer id를 가지고 있다면, <p>요소를 선택.
- 한 페이지 내에서 오직 하나의 요소와 일치해야 함.
- background-image : url(images/backgound.gif);
- url은 페이지에 이미지를 넣기 위한게 아님. 이미지 넣으려면 <img>요소 사용.
- 배경이미지는 그저 보여주는 용도일 뿐. 장식을 위한 것.
- url주위에 따옴표 없음
- background: white url(images/cocktail.gif) repeat-x;
- 한줄에 쓸수도 있다.
- border-style : 다양하게 많음
- border-radius : 둥근모서리 지정.
- text-align : 안에 있는 모든 인라인 콘텐츠가 정렬.
- 오직 블록 요소에만 설정해야 함.
- 인라인 요소에 직접적으로 사용하면 아무런 영향 없음(<img>요소처럼)
박스
- 패딩 : 콘텐츠에 여유공간을 제공
- 마진 : 요소와 다른 요소 사이에 여백 줌
블로그 이사갔어요! https://milooy.github.io/ 