앞서 2주 동안 javascript의 일반적인 기본 내용들을 배웠다면 오늘은 웹브라우저 상의 화면에 보이는 사이트(페이지) 또는 웹 앱을 표현하는 도구인 HTML과 CSS를 배웠다.
HTML은 쉽게 말해 tag들의 집합체이며 트리구조라고도 불리우며 아래처럼 기본적인 태그들로 이루어져 있음을 알 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> 이 문서가 HTML 문서임을 명시
<html> html 시작 태그로, 문서 전체의 틀을 구성
<head> head 태그는 문서의 메타데이터를 선언
<title>Page title</title> 문서의 제목, 브라우저의 탭에 보여짐
</head> </태그이름>은 해당 태그가 끝났음을 의미
<body> body 태그는 문서의 내용을 담는 곳
<h1>Hello world</h1> heading을 의미하며, 크기에 따라 h1부터 h6까지 있음
<div>Contents here content division을 의미하며, 줄바꿈됨
<span>Here too!</span> 줄바꿈이 없는 content 컨테이너
</div> div 태그가 끝났음을 의미
</body> body 태그가 끝났음을 의미
</html> html 태그가 끝났음을 의미
|
cs |
태그 중에는 꼭 사용 후 닫지 않아도 되는 태그도 존재한다.(ex)이미지 삽입 태그))
위에 것 말고도 여러 가지 코드가 존재하는데
링크삽입코드는 아래와 같이 사용 가능하며 뒤에 target="blank" 부분은 네이버라는 텍스트 링크를 클릭하면 새로운 창으로 네이버가 실행될 수 있게 해 준다.
|
1
|
<a href="https://www.naver.com" target="_blank">"네이버"</a>
|
cs |
그리고 ul,li 를 이용하여 내용들을 리스트업 해서 정리를 할 수 있다.
|
1
2
3
4
5
6
7
8
9
|
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3
<ul>
<li>Option 3-1</li>
</ul>
</li>
</ul>
|
cs |
- Option 1
- Option 2
- Option 3
- Option 3-1
[위 코드를 변환한 모습]
|
1
2
3
4
5
6
7
8
9
10
|
<input type="text" placeholder="type here">
<div>
<input type="radio" name="choice" value="a"> a
<input type="radio" name="choice" value="b"> b
</div>
<textarea></textarea>
<div>
<input type="checkbox" checked> checked
<input type="checkbox"> unchecked
</div>
|
cs |
이밖에도 텍스트를 입력할 수 있게 해주는 input의 text타입과 체크 기능인 radio타입과 checkbox타입이 존재하며 radio 타입 같은 경우는 name을 3,4번 줄처럼 똑같이 정해주면 a와 b 중에 하나만 고를 수 있게도 구현 가능하며 체크 박스 같은 경우는 다중 선택이 가능한데 8번 줄 처럼 checked라고 넣어주게 된다면 실행했을 시 체크가 이미 되어서 나오는 것을 표현하게 할 수도 있다.
그리고 이 밖에도 <button>출력내용</button>으로 버튼도 만들어 낼 수 있다.
이러한 HTML에 우리가 배웠던 javascript를 사용하려면 어떻게 해야 할까?
HTML의 내부에 작성하는 방법과 외부에 작성하는 법으로 두 가지로 들 수 있다.
아래에 그림처럼 script 태그를 이용하여 내부에 작성하거나
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
console.log('write your JS here');
</script>
<body>
</html>
|
cs |
아래에 그림처럼 외부에 있는 "main.js"에서 script 태그의 src 속성을 이용해 이용이 가능하다.
|
1
2
3
4
5
|
<script src="main.js"></script>
console.log('write your JS here');
|
cs |
또 아래와 같이 (head 태그에 들어가서 한글을 사용할 수 있게 하는) 유니코드 세팅과
ex) <meta charset = "UTF-8"?>
여러 가지 수많은 코드들이 존재한다.
'개념정리' 카테고리의 다른 글
| 8/11[TIL] DOM (0) | 2020.08.11 |
|---|---|
| 8/10[TIL] CSS (0) | 2020.08.10 |
| 개발자로의 커리어 전환 2주일... (1) | 2020.08.10 |
| 8/7[TIL]매개변수 (0) | 2020.08.07 |
| 8/7[TIL]객체 지향 (0) | 2020.08.07 |
