HTML
HTML이란 HyperText Markup Language 의 약자로 웹페이지 문서를 작성하기 위해 사용하는 마크업 언어이다
Tag
HTML은 Tag를 이용해서 문서를 작성할 수 있다 대표적인 태그는 아래와 같다
- head : html문서의 부수적인 정보를 담고 있는 태그
- body : html문서의 메인내용을 담고 있는 태그
- div : 단락을 구분하는 태그
- span : 태그가 감싸고 있는 컨텐츠 만큼만 공간을 차지 하는 태그
- img : 이미지를 담는 태그
- a : 링크를 삽입하는 태그
- ul&li : 리스트를 나타내는 태그
- input : 입력란을 사용하는 태그
- textarea : text를 입력할 수 있는 태그
- button : 사용자로 부터 입력을 받을 수 있는 태그
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>제목</title>
</head>
<body>
<div>이 태그는 div</div>
<span>아 태그는 span</span>œ
<div>
<img
src="https://image.dongascience.com/Photo/2018/01/15159739972169[1].jpg"
/>
</div>
<div>
<a href="https://www.naver.com" target="_blank">네이버 링크</a>
</div>
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>
Item 3
<ul>
<li>Item 3-1</li>
</ul>
</li>
</ul>
<div>
<input type="text" placeholder="type here" />
</div>
<div>
<input type="password" name="" id="" />
</div>
<div>
<input type="checkbox" name="" id="" /> 다음의 들어올 때 아이디 기억하기
</div>
<div>
<input type="radio" name="choice" id="" />옵션 A
<input type="radio" name="choice" id="" />옵션 B
</div>
<textarea name="" id="" cols="30" rows="10">줄바꿈이 됩니다</textarea>
<div>
<button>Submit</button>
</div>
</body>
</html>
class,id
각 태그 별로 고유한 값을 지정할 수 있는데 이것을 class,id를 이용해서 할 수 있다 일반적으로 class는 댓글,게시물,버튼등 여러번 반복하는 태그들을 종합적으로 관리할 때 사용한고 id는 그 태그만 가지고 있을 수 있는 고유한 값을 나타 낼 때 사용한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
<a id="naverLink" href="https://www.naver.com" target="_blank">네이버 링크</a>
</div>
<ul>
<li class="listContent">Item 1</li>
<li class="listContent">Item 1</li>
<li class="listContent">
Item 3
<ul>
<li>Item 3-1</li>
</ul>
</li>
</ul>
javascript 코드 사용법
html문서에서 자바스크립트를 사용하는 방법은 3가지 이다
- html문서 내부에 작성하는 방법
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script>
alert('javascript alert');
</script>
</body>
</html>
- html문서 외부에 작성하는 방법 아래와 같이 작성하고 main.js 파일에서 alert함수를 호출하면 똑같이 작동한다
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
CSS
CSS는 Casecading Style Sheet 의 약자이고 HTML문서의 디자인을 나타내기 사용한다 원래는 태그의 속성을 태그에 style 속성에다 작성하지만 css를 사용하면 이 각 태그마다 속성을 한번에 적용할 수 있다 사용법은 2가지가 있다 각 태그에 속성을 정하기 위해서 일단
- html 내부에서 사용하는 방법 이 방법은 간단한 스타일을 별도 파일 생성없이 적용할 수 있다 이 css에서는 태그를 이용해서 속성을 부여하고 있다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- html 외부에서 사용하는 방법 이 방식은 새로운 css파일을 만들어서 적용하는 방식이고 css내부에서 class를 호출하여 속성을 부여하느 것을 볼 수 있다 class의 경우 . dot 을 이용하여 호출이 가능하고 id는 #을 이용하여 호출이 가능하다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>css연습</title>
<link rel="stylesheet" type="text/css" href="myFirstStyle.css" />
</head>
<body>
<div class="impact red">
<div>
<span><h1>Supreme</h1></span>
<span><h1>Supreme</h1></span>
<span><h1>Supreme</h1></span>
<span><h1>Supreme</h1></span>
<span><h1>Supreme</h1></span>
</div>
</div>
</body>
</html>
css파일
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
color: white;
box-sizing: border-box;
background-color: red;
text-align: center;
width: 180px;
float: left;
border: 3px solid white;
}
div {
width: 100%;
}
.impact {
font-style: italic;
}
selector
css에서 요소를 선택하는 규칙이다 위에서 본것 처럼 여러가지 규칙이 있다
- 기본적으로 태그를 이용하여 선택이 가능하다
- class 는 . , id 는 # 을 이용하여 선택이 가능하다
- 태그 내부의 포함된 바로 다음 자식 태그는 다음 과 같이 접근이 가능하다 - div > p(자식 태그)
- * 는 모든 태그를 의미한다
- 원하는 태그의 클래스나 아이디를 선택하고 싶다면 - div.classname or div#idname
