패키지

HTML,CSS 본문

Server-Side/Javascript

HTML,CSS

업단업업 2015. 5. 8. 17:30



 << 웹 어플리케이션  >> 

웹클라이언트                 웹서버
---------------------------------------
브라우저(IE, FF, CR)         Apache Tomcat(Java기반)
1.요청(웹주소-영문도메인, IP주소)                         
                             2.응답 및 결과 반환
                             HTML,CSS,Javascript,JSP,Servlet
3.반환된 결과 출력
HTML,CSS,Javascript -> 웹페이지
---------------------------------------


 * HTML 

HTML(Hyper Text Markup Language)
1. 웹페이지 작성용 언어. Markup Language의 한 종류. 
태그(<태그명>) 형태의 명령으로 구성된 언어.
마크업 언어는 특정 데이터를 표식하는 언어.
예를 들어,
홍길동 -> 데이터 자체
<이름>홍길동</이름> -> 태그로 표시된 데이터 형식.

2. HTML 기본 구성
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		 콘텐츠 작성 영역
	</body>
</html>
3. 마크업 언어의 기본 규칙
- <태그명>데이터</태그명> : 시작 태그와 끝 태그의 쌍으로 구성.
- 태그명은 식별자 작성 규칙에 맞춰서 작성. 일반적으로 소문자 사용.
- 부모 태그와 자식 태그로 구성될 수 있다. 최상위 부모를 루트라고 한다.
예를 들어,
<루트>
	<부모태그>
		<자식태그></자식태그>
	</부모태그>
</루트>
- 태그 안에는 부가적인 정보를 위해서 속성을 추가할 수 있다.
예를 들어,
<태그명 속성="값" 속성="값" ...>데이터</태그명>

 * CSS 

CSS (Cascading Style Sheets)
1. HTML 태그만으로는 표현 부분이 부족하기 때문에 CSS를 이용해서 출력 형태를 지정하게 된다.

2. CSS 기본 형식
"CSS 속성명 : 값" 형태의 명령을 특정 대상에 적용하면 지정된 속성에 따라 출력 형태가 달라진다.
예를 들어,  "color:red" 명령을 이용하면 특정 대상의 전경색이 빨간색으로 출력된다.

3. CSS 적용 방법
- 인라인 단위 적용 방법 : 특정 태그에만 적용되는 CSS. 웹페이지 내에서 특정 부분에만 적용하는 스타일 지정시 사용.

- 페이지 단위 적용 방법 : 특정 페이지에만 적용되는 CSS. 웹페이지 전체의 스타일 지정시 사용. - 파일 단위 적용 방법 : 특정 파일 단위로 적용되는 CSS. 웹사이트 전체의 스타일 지정시 사용. 4. 인라인 단위 적용 방법 <태그명 style="CSS속성:값; CSS속성:값; ...">데이터</태그명> 5. 페이지 단위 적용 방법 <style type="text/css"> 선택자 { CSS속성:값; CSS속성:값; ... } </style> -> 선택자는 여러가지 표현에 의해 특정 태그를 찾는 명령이다. 한 개 이상의 태그를 동시에 찾을 수 있다.



Comments