HTML & CSS
2018. 7. 25. 15:11ㆍIT관련
반응형
World Wide Web(WWW, W3)
- 인터넷에 연결된 컴퓨터들을 통해 정보를 공유할 수 있는 정보 공간
- HTTP 프로토콜, 하이퍼텍스트, HTML 등을 이용하여 그림과 문자를 교환하는 전송방식
- 최초의 웹사이트
Web Server(HTTP Server)
- Apache(Web Server)
- https://httpd.apache.org/
- HTML, PHP, CGI 요청을 처리
- Apache Tomcat(Web Application Server, Apache + Tomcat)
- http://tomcat.apache.org/
- JSP 서블릿 요청을 처리
- Nginx
- https://nginx.org/
- 비동기 이벤트 기반 서버
- IIS(Internet Information Server)
- ASP 요청을 처리
HyperText Markup Language(HTML)
- HTML Element
- <tag>보이는 내용</tag>
- <tag attribute1="value1" attribute2="value2">보이는 내용</tag>
- 자세한 사항은 W3School.com을 참조.
Sample HTML Documents
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Cascading Style Sheets(CSS)
- 웹사이트의 레이아웃과 스타일을 정의할 때 사용
- HTML과는 다른 markup language
- https://www.w3schools.com/css/css_syntax.asp
문법
The element selector
p {
color: red;
text-align: center;
}
The id selector
#para1 {
color: red;
text-align: center;
}
The class selector
.center {
color: red;
text-align: center;
}
Grouping selector
h1, h2, p {
color: red;
text-align: center;
}
Three Ways to Insert CSS
External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal Style Sheet
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
CSS Box Model
- 웹페이지의 layout을 구성하는 중요한 방법이다.
- 참조: https://blog.naver.com/dorumugs/221316805038
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
HTML Block and Inline Elements
- Block-level element는 항상 new line과 full width를 가진다.
- Inline element는 new line에서 시작하지 않고 필요한 만큼의 width를 가진다.
- https://www.w3schools.com/html/html_blocks.asp
<meta>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
CSS @media query
- 반응형 웹UI를 구성할때 자주 사용된다.
- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
반응형
'IT관련' 카테고리의 다른 글
| Requests: HTTP for Humans (1) (0) | 2018.11.30 |
|---|---|
| JavaScript & Ajax (0) | 2018.07.27 |
| SW 61 XY, 6C XY 응답의 대응방법 (0) | 2018.07.20 |
| Nest Cam IQ indoor 사용기 (15) | 2018.04.02 |
| 맥북에어 2011에 Windows 10 설치 (9) | 2017.10.26 |