HTML
html이란
Hypertext Markup Language의 약자
1990년도 이후 웹에서 사용하는 문서 양식
작동원리
- 클라이언트가 브라우저를 통해 웹에 접속한다.
- 웹을 통해 서버에게 요청을 한다.
- 서버는 클라이언트의 요청 내용을 분석하여 결과값을 HTML로 전송한다.
- 클라이언트는 해당 요청을 브라우저에 내장된 엔진을 통해 html tag를 해석하여 화면에 표현한다.
HTML 5
- 별도의 플러그인 없이 멀티미디어를 재생할 수 있음.
- 서버와 클라이언트 소켓 통신이 가능.
- Sematic Tag 추가 (특정 tag에 의미를 부여하여 해당 tag가 사용된 부분만 검색해서 검색엔진이 더 빠르게 검색을 함.)
CSS
Cascading Style Sheets란 html 문서를 화면에 표시하는 방식을 정의한 W3C 공인 표준 언어이다.
어떤 style을 적용 하는지에 따라, 같은 구조도 여러가지로 표현할 수 있다.
html이 웹의 뼈대를 만든다면, css는 살을 만드는 역할을 한다.
구성
CSS는 선택자(selector)와 선언(declaration)으로 구성된다.
선택자는 규칙이 적용되는 엘리먼트를 특정하는 것이다.
선언은 선택자로 특정된 해당 엘리먼트에 적용될 스타일을 정의한 것이다.
body { margin: 10px; }
선택자 {선언부}적용방법
- 외부 스타일 시트
css 파일을 link 태그 또는 @import로 html 문서에 연결해서 사용.
같은 스타일이라면 다른 문서에서도 불러와서 똑같이 사용 가능하다.
<link type = "text/css" rel="stylesheet" href ="./style.css"> // link
<style type= "text/css"> //import
@import url("./style.css");
</style>- 내부 스타일 시트
style 태그를 이용해 html 파일 내부에 css를 적용
매 페이지마다 같은 스타일을 적용해도 똑같이 작성해야하는 단점이 있다.
<style type="text/css">
body {margin:"10px"}
</style>- 인라인 스타일 시트
style attribue를 사용하여 개별 엘리먼트에 스타일을 적용.
세가지 방식 중 가장 우선순위가 높은 반영 => 더 구체적일 수록 우선순위가 높음
<body style =" margin :10px;">Tag
글로벌 속성
어느 tag에서나 사용할 수 있는 속성
- id : 태그에 유일한 아이디를 지정한다.
- class : 태그에 적용할 스타일의 이름을 지정한다. 중복이 가능하다.
- dir : 텍스트의 방햐을 지정
- style : 인라인 스타일 지정
- title : 태그에 추가 정보를 지정, 마우스를 갖다대면 정보가 나온다.
공간 분할 태그
html에는 크게 black과 inline 두 가지 형식의 엘리먼트들이 있다.
- block 형식은 해당 엘리먼트가 한 줄을 모두 사용한다. 엘리먼트가 추가되면 옆이 아닌 다음 줄로 이동한다.
- inline 형식은 해당 엘리먼트 크기만큼만 공간을 사용한다. 엘리먼트가 추가되면 옆에 나타난다
