HTML로 웹페이지를 작성할 때, 기본적인 구성에 대해 알아보려 한다.

HTML 문서는 크게 doctype, head, html, body 태그로 이루어진다.

Doctype는 현재 사용하는 html의 버전을 웹 브라우저에게 알린다,

Html은 문서의 처음과 끝을 표시한다.

Head에는 메타 데이터, 문서 타이틀, 외부 파일 링크가 포함된다.

Html문서 작성 예시는 다음과 같다.

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a website.</p>
</body>
</html>

'HTML&CSS' 카테고리의 다른 글

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21

선배님의 권유로 시작한 자바스크립트 공부... 기초 문법까지는 그래도 어려움 없이 쏙쏙 알겠는데..!


뒤로 갈 수록 HTML/CSS과 연관된 내용들이 나오기 시작해서 여기서 자바스크립트는 잠깐 멈춰두고 이 두개를 공부한 후에 자바스크립트를 보는게 맞다 싶어 황급히 배우는 중...


전체 내용을 한번 훑어봤는데 생각보다 어려운  내용이 아닌것 같아 짧은 기간 안에 빠르게 배우는것을 목표로 해보도록 한다.


요즘 게임만 하느라 많이 해이해졌는데... 


하루에 최소 두시간정도는 책상앞에 앉아있자. ^^...

'잡다한 이야기' 카테고리의 다른 글

램 디스크 (RAM disk)  (0) 2020.02.27
블로그 개시!  (0) 2018.12.31

처음 c언어를 배울 때 가장 어려움을 느꼈던 부분이 문자열 부분이었는데, 자바스크립트에서는 상대적으로 문자열을 관리하기 간편하게 되어있다.


1
2
3
4
5
6
7
8
"string" + "test"
"stringtest"
 
"string" + "5"
"string5"
 
"string" + 5
"string5"
cs

기본적으로 자바스크립트에서는 문자열을 합칠 떄 +연산자를 지원한다.

이 때, "string" + 5 와 같이 문자열과 숫자를 +연산할 경우에는 숫자를 문자열로 형변환해 결과가 "string5"가 되는것을 알 수 있다.


1
2
3
4
5
6
7
8
let string = "문자열"
undefined
 
string[2]
"열"
 
string.length
3
cs



다음은 문자열의 특정 문자에 접근하는 방법이다.

특정 문자에 접근하려면 위 코드와 같이 "문자열"[num]형식을 사용하면 된다.

문자열의 길이를 받아오려면 "문자열".length를 사용하면 문자열의 길이를 구할 수 있다.



'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

프로그래밍 언어를 c/c++로 처음 접한 나로서는 '===' 연산자는 굉장히 생소했다.



기본적으로 ==과 ===의 기능은 동일해 보인다. 


다음 코드를 참고해보자.



1
2
3
4

5
6
7
8

9
10
11
12
//동일한 type간의 비교연산
1 == 1
true
1 === 1
true

'hello' == 'hello'
true
'hello' === 'hello'
true

'hello' == 'goodbye'
false
'hello' === 'goodbye'
false
cs


여기까지는 ==과 ===의 차이는 드러나지 않는다.


하지만 다음 코드에서 다른 점을 알 수 있다.



1
2

3
4
//다른 type간의 비교연산
1 == '1'
true

1 === '1'
false
cs

왼쪽 항은 숫자 오른쪽 항은 문자열을 넣고 비교연산을 수행해보았다.

'=='연산자는 true를 반환하고 '==='연산자는 false를 반환한다.

그렇다면 이 차이는 왜 발생하는것일까?



기본적으로, JavaScript에서 지원하는 비교연산자에는

1.strict equality comparison operator(===, !==)과 

2.type-converting equality comparison operator(==, !=)가 있다.


'==='연산자(strict comparison)는 각 피연산자가 반드시 같은 type이어야 하고, 문자열에서는 각 문자열의 문자, 위치, 순서가 완전히 일치할 경우에만 true가 리턴된다.


반면에 '=='연산자(type-converting comparison) 는 각 피연산자가 다른 type이더라도 비교를 시도하고 일치하면 true를 리턴한다.

이 때문에 '=='연산자는 의도치 않은 오류를 불러올 수 있는 문제를 갖고있다.



그렇기 때문에 비교연산이 필요한 대부분의 상황에서 '==='연산자 사용을 권장한다. 




아래 코드에서 '=='연산자의 특성을 확인할 수 있다.


1
2

3
4

5
6

7
8

9
10

11
12

13
14

15
16
'' == '0'
false

0 == ''
true

0 =='0'
true

false == 'false'
false

false == '0'
true

false == undefined
false

false == null
false

null == undefined
true

cs


아직 입문 단계이기때문에 여기까지만 이해하고 넘어가지만 추후에 조금 더 깊이있게 공부해보고싶은 내용이다.


'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24



야심차게 만든 블로그!


평소 공부한 내용이나 게임포스팅이 주를 이룰듯합니다


가능한 꾸준히 올리는게 장기적인 목표



힘내서 가봅시다~


'잡다한 이야기' 카테고리의 다른 글

램 디스크 (RAM disk)  (0) 2020.02.27
HTML을 공부해보자  (0) 2019.02.02

+ Recent posts

티스토리툴바