자바스크립트의 배열은 c언어와는 사뭇 다른 느낌이다.

자바스크립트의 배열에 대해 살펴보자.


1
2
let array = [1, 2, 3];
let ARRAY = Array(1, 2, 3);
cs

배열은 두가지 방법을 통해 생성할 수 있다.

1번 라인처럼 대괄호 안에 배열의 요소를 넣는 방법,

2번 라인처럼 Array() 안에 배열의 요소를 넣는 방법이 있다.

배열의 인덱스는 0부터 시작한다.(위 예시의 경우 array[0] === 1, array[1] === 2 ...)


그리고 자바스크립트의 배열의 경우 c언어의 배열보다는 c++의 벡터 클래스와 유사하다.

인덱스를 통해 엘리먼트에 접근할수 있고, 서로 다른 타입의 요소가 들어갈 수 있으며, 배열이 동적이다.

1
let array = [1'한글'null];
cs


현재 배열의 크기를 넘어서는 인덱스에 새로운 요소를 추가한다면 어떻게 될까?

1
2
3
let array = [1'한글'null];
 
array[5= 'english';

cs



이와 같은 경우, array[3]과 array[4]가 undefined가 되고, array[5]에 새로운 값이 들어가게 된다.


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

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

미디어 쿼리 (반응형 디자인-Responsive Web)은 브라우저 창의 크기/ 디스플레이 환경에 반응해 웹페이지의 출력을 다르게 할 수 있는 기능이다.

<style>

...

@media(min-width:800px){

div{display:none;

}

}

</style>


@media(조건){실행}으로 생각하면 된다.

소괄호의 조건에 맞는 경우(width가 800px보다 클경우) 참을 반환하고 중괄호 안의 내용을 실행한다.


not, and, only 같은 논리연산자도 사용 가능하다.

 

ex)

@media(조건1)and(조건2)


not의 경우에는 해당 미디어쿼리 전체에 대한 반대를 반환하므로


@media not (조건1)and(조건2)일 경우 우선순위는

@media not((조건1)and(조건2)) 이다.

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

<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 기본 구성  (0) 2019.02.20

Div 태그와 span 태그의 차이점에 대해 알아볼것이다.
<div>와 <span> 태그는 사용자가 원하는 요소를 태그로 묶어 관리하기 용이하도록 한다.
그렇다면 <div>와 <span>태그는 어떤 차이점이 있는것일까?

<div>태그는 기본적으로 블록레벨 엘리먼트고, <span>태그는 인라인 엘리먼트이다.

다음 그림을 보자.



그림과 같이 블록 레벨 엘리먼트는 간단히 말해서 해당 요소가 페이지의 왼쪽에서 오른쪽 끝까지 차지하는것이다.
워드를 작성할 때 이미지를 첨부하면 해당 위치에 있던 문자들이 이미지 밑으로 밀려나는것을 생각하면 이해하기 쉽다.

인라인 엘리먼트는 해당 요소가 있는 부분의 공간만 사용을 하는것이다.
마찬가지로 워드에서 이미지 첨부 후 편집을 통해 이미지 옆에 문자들이 작성될 수 있도록 설정하는것을 생각하면 이해하기 쉽다.

<div>태그는 width와 height 속성 값에 영향을 받는다. 하지만 <span>태그는 요쇼가 차지하는 공간만을 사용하기 때문에 width와 height값에 영향을 받지 않는다.

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

-CSS- 미디어 쿼리  (0) 2019.03.10
-CSS-<style>태그  (0) 2019.03.03
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

CSS는 HTML과는 다르게 웹페이지의 디자인을 담당하는 언어이다.


다음은 style 태그의 사용 예이다.



<style>

a{

color:red;

}

</style>




여기서 a를 선택자, color를 속성, red를 이라 칭한다.


또한 color:red를 선언이라 한다.


위 문장은 모든 <a>태그에 대해 {}안의 동작을(글씨의 색을 red로) 수행할것 이라는 명령을 내리는 문장이다.




style은 다른 방법으로도 사용 가능하다.


태그 안의 속성으로 추가하는 방법인데, 사용법은 다음과 같다.


<a href="http://blackjellybear.tistory.com" style="color:red"검은젤리곰의 블로그</a>


이처럼 html의 태그 안에 속성으로 추가가 가능하다.


그리고 이 방법은 처음의 방법과는 달리 속성이 쓰인 태그에 대해서만 적용된다.


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

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-HTML- 링크  (0) 2019.02.27
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

오늘은 HTML의 링크에 대해 알아보자.

기본적인 사용법은 다음과 같다.

<a> 여기를 클릭하세요. </a>

이처럼 <a> 태그로 링크를 걸고싶은 단어나 문장을 감싸면 된다. 간단하다.


하지만 한가지 중요한 정보가 빠져있다.

링크를 클릭했을 떄 어느곳으로 링크되는지 정보가 없으면 태그가 제대로 작동하지 않는다.

따라서 링크될 페이지의 주소가 필요하다.

<a href="https://blackjellybear.tistory.com/"> 여기를 클릭하세요.</a>

href 속성으로 어디로 이 링크가 연결될지 정보를 추가했다.

이 링크를 클릭하면 해당 주소로 링크될것이다.


a태그에 속성도 추가할 수 있다.

링크를 클릭했을때 새로운 탭에서 열리게 하거나 링크에 마우스를 올리면 해당 링크에 대한 설명을 출력하게 해보자.

<a href="https://blackjellybear.tistory.com/" target="_blank" title="검은젤리곰의 블로그로 연결됩니다."> 여기를 클릭하세요.</a>


이처럼 간단하게 링크를 생성하는 방법에 대해 알아보았다.




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

-CSS- 미디어 쿼리  (0) 2019.03.10
<div>와 <span>태그  (0) 2019.03.06
-CSS-<style>태그  (0) 2019.03.03
-HTML- 태그 <br> vs <p>  (0) 2019.02.21
HTML 기본 구성  (0) 2019.02.20

오늘은 html의 태그들 중 경쟁구도에 있는 br과 p태그에 대해 알아보았다.



br은 줄바꿈을 하는 태그이다.

<br><br>과 같이 연속으로 사용함으로 문단을 나눌 수 있게 된다.



<p></p>는 문단을 만드는 태그이다.
<p>로 문단을 나누었을 경우, 문단과 문단 사이의 거리가 일정하게 고정되므로 비교적 자유도가 떨어져보일 수 있다.


하지만 CSS와 함께 사용했을 경우 차이점이 발생한다.
<p>의 문단 간격은 CSS로 조절 가능하다.
Ex) <p style: margin-top="24px;">

더불어 HTML 코드를 볼 때, <p>태그를 사용하는것이 가독성에 있어서 우수하기 때문에
문단을 나누는 용도로는 <br>태그보다 <p>태그는 사용하는것을 권장한다.

'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 기본 구성  (0) 2019.02.20

+ Recent posts