HTML과 CSS
HTML : 문서의 구조와 내용을 다루는 언어이다. 문서의 틀을 만드는 언어, 웹페이지의 틀을 만드는 마크업 언어이다~
- HTML은 tag들의 집합이다.
- HTML과 CSS는 웹브라우저 상에서 화면에 보여지는 사이트 혹은 웹 앱을 표현하는 도구입니다.
tag란
- 부등호(<>)로 묶은 HTML의 기본 구성 요소이다.
Tree Structure
<!DOCTYPE html> <!--HTML 문서 시작 선언-->
<html>
<head>
<title>codestates</title>
</head>
<body>
<h1>Hello Word!</h1>
<div>Contents here
<span>Here too!</span>
</div>
</body>
</html>self-closing tag
- 닫는 태그가 없음
<img src='img.png'/>html에서 많이 사용하는 tag
<div></div> <!--한 줄을 차지한다.-->
<span></span> <!--컨텐츠 크기만큼 공간을 차지한다. -->
<img src=img.png /> <!-- src는 태그의 속성 -->
<a href="https://www.google.com" tartget = "_balck">구글</a> <!-- target속성으로 새 페이지에서 구글 페이지로 링크 -->
<ul> <!--Unordered List -->
<li>item1</li> <!--li : List Item -->
<li>item2</li>
<li>item3</li>
</ul>
<ol></ol><!--숫자 기호 -->
<input type="text" placeholder="내용을 입력하세요." > <!-- 텍스트 박스 -->
<input type="password">
<input type="checkbox">
<input type="radio"> <!--그룹 설정 가능, 그룹 설정 시 name속성으로 그룹 지정한다.-->
<textarea></textarea> <!--<input>태그와 다르게 줄바꿈이 가능-->
<button>submit</button>CSS란
- CSS는 HTML 구조에 디자인을 부여하는 도구이다.
- 웹 페이지 구성요소의 스타일을 정의한는 언어이다.
CSS를 HTML에 적용하는 세가지 방법
1. inline
- h1태그에 style 속성을 부여해 색상 및 폰트를 변경
<h1 style="color: red; font-style: italic">Hello world</h1>2. HTML 내부에 StyleSheet 작성
- 보통
<head>태그 안에서 작성 - 태그를 선택하는 규칙에 따라 일괄 적용
<html>
<head>
<title>Hello~</title>
<style>
h1 {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<h1>Welcome HTML</h1>
</body>
</html>3. HTML 외부에 StyleSheet 작성
- link 태그 이용
- css 확장자로 저장된 stylesheet 파일을 href 속성을 이용
<html>
<head>
<title>Hello~</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<h1>Welcome HTML</h1>
</body>
</html>CSS에서 요소(element)를 선택하는 규칙
- HTML 외부에서 stylesheet 적용할 때 css는 요소를 선택하는 방법
1.id 속성을 이용
#hello { color: red; }
#codestates { color: blue; }2.class 속성을 이용
.red { color: red; }
.blue { color: blue; }3.여러 class 속성을 이용
//javascript
<h1 class="impact red">Hello world</h1>/*css*/
.impact { font-size: 2em; font-weight: bold; }
.red { color: red; }class selector와 id selector
| class | id |
|---|---|
| 동일한 값을 갖는 요소가 많음 | 유일한 값 |
| element가 여러 값을 가질 수 있음 | element는 단 하나의 값을 가짐 |
semantic tag와 semantic web
semantic tag 링크
