Mo's Develog

JS에서 변수는 var로 시작한다. var은 Variable(변동성이 있는, 변할 수 있는 등) 이라는 문자를 줄인 것이며, 의미 그대로 같은 변수라도 내용이 계속해서 변할 수 있는 존재이다. 변수를 쉽게 이해하기 위해서 서랍이나 상자의 예시를 들 수 있다. 예시를 보면서 이해해보자. ▲ var이라고 시작하면서 변수를 선언하겠다는 것을 말하고 있다. var을 생략 할 수도 있지만 이것은 유효범위라는 것에 영향을 미친다. 때문에 var의 의미를 명확히 이해하기 전까지는 var을 붙여서 변수를 선언하는 것이 권장된다. 아무튼 'a 라는 변수(=서랍 or 상자)에 숫자 1(=양말)을 집어 넣는다' 라고 생각하면 조금 도움이 되려나? 기호 '=' 뒤에 있는 것을 '=' 앞에 있는 것에 집어 넣는다(대입한다) 등..

앞선 포스팅에서 큰 따옴표(")나 작은 따옴표(')가 붙지 않은 숫자는 숫자로 인식한다고 했다. 그 말인 즉슨 큰 따옴표(")나 작은 따옴표(')가 붙은 숫자는 숫자가 아니라는 말이다. 즉, 문자로 본다는 것이다. 큰 따옴표(")나 작은 따옴표(')로 감싸게 되면, 그것이 문자이건 숫자이건 결과적으로 browser는 문자열(String)으로 인식한다는 것이다. 또한 큰 따옴표(") 또는 작은 따옴표(')중 하나로 시작하면 동일한 종류의 따옴표로 끝나야한다. ▼ 큰 따옴표로 시작하면 큰 따옴표로 끝나야하고, 작은 따옴표로 시작하면 작은 따옴표로 끝나야 한다는 것. 만약 문자안에 따옴표를 넣고 싶으면 어떻게 하면 될까? ▲ 웹브라우저에서 실행했다면 아무것도 실행되지 않을 것이고, 개발자 도구와 같은 cons..

여타 다른 언어에서도 동일하게 JS에서도 큰따옴표(")나 작은따옴표(")가 붙지 않는 숫자는 숫자(number)로 인식한다. 하지만 문법은 각 언어마다 조금씩 다르니 직접 해보면서 익혀야겠다. 위의 기본적인 숫자출력관련 내용을 하나만 응용해보자면 아래와 같이 사용할 수 있을 것이다. ▲ 두 자리 자연수를 랜덤하게 뽑을 수 있다.

Flexbox에는 justify-content나 align-items 말고도 몇 가지의 속성이 더 있다. Main axis와 Cross axis의 위치를 서로 바꾸고 싶을 때 사용하는 'flex-direction' https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction (flex-direction 설명) 화면의 크기에 따라 box들이 겹치지 않게 사용하고 싶을 때 사용하는 'flex-wrap' https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap(flex-wrap 설명) 더 다양한 flex 기술들이 있겠지만 초심자인 나 같은 사람은 Flexbox part1,2의 내용을 기초로 하여 지식을 늘려가자.

Flexbox는 CSS에서 정~말 필수적으로 알아야 할 개념이다. Flexbox를 사용할 때 지켜야할 규칙들이 몇가지 있는데 정말 중요하다. 만약 자식(Children) element를 움직이게 하고 싶다면 부모(Parents) element에 말해야 한다는 것이다. 자식 element에는 어떤 것도 말하면 안된다. '무슨 소리야?'라는 생각이 들 수 있으니 바~로 예시로 보도록 하자. ▲ 위처럼 박스 3개를 만들어 주겠다. ▼ 결과값은 당연히 아래와 같다. ▲ 하나의 덩어리로 보이겠지만 3개의 box가 존재하고 있는 중이다. 앞선 다른 포스팅에서도 말했듯이 box는 block 속성을 가지고 있어서 자신의 주변에 다른 누가 오는 것을 허용하지 않기에 아래로 3개의 box가 붙은 형태가 되었다. 자 이제,..

▼아래처럼 입력해서 ▼아래와 같이 출력했다. 여기서 나는 짝수번째 의 색을 다른 색으로 하고 싶을때는 어떻게 해야할까? 앞선 다른 포스팅에서 사용한 고유한 값인 id를 사용해보자 ▼ 아래처럼 두번째, 네번째, 여섯번째 에 각각 다른 id를 부여하고, 또 각각의 id에 style값을 지정하면 된다. 또는 ▼ 아래처럼 모아서 입력할 수도 있을 것이다. ▼ 그러면 아래처럼 출력될 것이다. 하지만 만약 이런 코드가 1억개가 있다고 생각한다면 코드가 너무 지저분해지고 클린하지 못할 것이다. 따라서 이럴때는 요소를 가리킬 수 있으면서도 겹쳐도 되는 방법이 있으면 훨씬 좋을 것이다. 이럴 때 사용하면 좋은 것이 바로 'class'이다! class는 유일할 필요가 없고 여려 요소에서 사용할 수 있고 많은 곳에서 원하는..

Padding은 Margin과 반대방향의 속성이다. Padding이란? box의 경계로부터 '안쪽'에 있는 공간이다. Padding 적용 전과 적용 후 예시를 각각 보자. 이제 Padding을 적용해보면 ▲위와 같이 body에 Padding값을 주니까 body의 border(경계)를 기준으로 안쪽으로 공간이 생긴 것을 볼 수 있다. padding값을 좀 더 세밀하게 조정하고 싶을 때는 아래와 같은 방법을 사용하면 된다.

앞서 살펴본 block형과 inline형의 내용에서 는 block형이라고 하였다. 그리고 는 box형이다. 즉 box는 기본적으로 block의 속성을 가지고 있다. 는 아무의미 없지만 구분하기 위해 우리가 사용하는 박스 또는 서랍과 같은 존재이다. 이런 box는 정말 중요하고 재미있는 속성을 가지고 있다. 바로 Margin, Border 그리고 Padding이라는 속성이다. ▲ CSS에서 박스 모델(Box model)은 정말 정말 중요하다. 이번글에서는 Margin에 대해 적어본다. Margin이란? Box(박스)의 Border(경계)의 바깥에 있는 공간이다. ▼ 아래과 같이 에 크기 값을 주고 box형 모델을 만들어 보자. ▼ 출력된 값은 다음과 같다. 보시다시피 주황색 box()와 녹색의 html사이..

HTML에서 사용하는 tag들의 속성에는 block과 inline 속성이 있다. block 속성을 가진 tag들은 자신의 옆에 다른 누구도 올 수 없도록, 말그대로 'block=막다' 의 의미를 가진 tag이고 inline 속성을 가진 tag들은 자신의 옆에 다른 tag들도 위치할 수 있는, 'in the same line=같은줄에' 라는 의미의 tag이다. 예시를 보자. ▲ 다음과 같이 입력하면 출력값은 아래와 같이 나온다. 모두 다른 줄에 입력을 했지만 에 해당하는 내용은 옆에 다른 누가 오는 것을 허용하지 않았다. 하지만 에 해당하는 내용은 나란이 출력된 것을 볼 수 있다. 는 box형, 즉 기본적으로 block의 속성을 가진 tag이고, 은 기본적으로 inline 속성을 가졌기 때문이다. 해당페이..

Semantic HTML은 문서를 보기만해도 그 의미를 짐작할 수 있는 것을 뜻한다. 과거에는 아무의미 없지만 구분하기 위해 사용하는 tag를 많이 사용하였다. 물론 지금도 많이 쓴다. 하지만 코드를 작성하면서 대부분을 div를 사용하여 구분한다면 코드를 볼 때 어떤 의미인지 알기가 힘들다. 때문에 이럴 때는 누구나 봤을 때 내용을 알 수 있게 해주는 tag인 Semantic tag를 쓰는걸 권장한다. 예시를 보자. 과거에는 위의 코드처럼 div와 id를 이용하여 구분하는 것들을 많이 사용했다고 한다. 하지만 페이지나 사이트가 커질수록 div가 떡칠되어 있어 가독성에 있어서도 불편했다고 한다. 따라서 요즘은 아래와 같이 많이 사용하는 추세이며 권장한다. 같은 내용이고 출력값 또한 같지만 누구나 봐도 내용..