yuu_na_callia.log https://velog.io/ Preliminary Prospective Designer Tue, 13 Jul 2021 20:22:39 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed yuu_na_callia.log https://images.velog.io/images/yuu_na_callia/profile/41684526-c7ad-4949-8df3-eb3a7a55aa2a/IMG_9098.jpg https://velog.io/ Copyright (C) 2019. yuu_na_callia.log. All rights reserved. <![CDATA[선택자]]> https://velog.io/@yuu_na_callia/%EC%84%A0%ED%83%9D%EC%9E%90 https://velog.io/@yuu_na_callia/%EC%84%A0%ED%83%9D%EC%9E%90 Tue, 13 Jul 2021 20:22:39 GMT 선택자

선택자에는 저번 강의에서 배운 class 외에도 id가 존재한다. class에 대한 스타일을 지정할 때 다음과 같은 코드를 태그 안에 넣어주었다.

<style>
  .js {
    color: red;
  }
</style>

id는 class와는 달리 .대신 #을 붙여야 한다는 차이점이 있다. 

<style>
  #first {
    color: green;
  }
</style>

Class와 Id의 차이점

class라는 단어는 그룹을 의미하고, id는 특정한 것을 식별한다는 의미이다. class 선택자는 같은 스타일이 지정될 그룹을 의미하는 것이고, id는 특정한 태그에만 지정하고 싶은 스타일을 나타내는 것이다. 그래서 class는 중복될 수 있지만, id는 한 페이지에서는 딱 한번만 쓰이게 되는 것이다.

즉, class 선택자가 id 선택자에 비해서 더 포괄적이다. class 선택자를 이용하면 광범위한 효과를 줄 수 있고, id 선택자를 이용하면 예외적으로 디자인을 바꿀 수 있는 것이다. 그렇기 때문에 class 위에 id를 얹어서 구현하는 것이 효율적이다.

선택자의 우선순위

만약 앞에 .과 # 모두 지정하지 않으면 그것은 태그 이름을 의미한다. 즉 아래와 같은 코드를 사용하면 이 페이지에서 span이라는 이름의 태그는 모두 디자인이 바뀌는 것이다.

<style>
  span {
    color: blue;
  }
</style>
<span id="first" class="js">Javascript</span>

이 태그는 span이기 때문에 파란색이 될 수도 있지만, id가 first이기 때문에 초록색이 될 수도 있고, class가 js이기 때문에 빨간색이 될 수도 있다. 과연 어떤 색깔이 나타나게 될까?

정답은 초록색이다. id의 우선순위가 가장 높은 것입니다. 만약 id를 지우게 되면 class의 속성이었던 빨간색이 나타나게 된다. id와 class를 모두 지워야지만 span의 스타일인 파란색이 나타난다.

즉, id > class > 태그 순서로 우선순위를 가지게 된다.

]]> <![CDATA[style 태그]]> https://velog.io/@yuu_na_callia/style-%ED%83%9C%EA%B7%B8 https://velog.io/@yuu_na_callia/style-%ED%83%9C%EA%B7%B8 Tue, 13 Jul 2021 20:02:34 GMT Span과 Div 태그

우리가 CSS를 이용해서 문단의 특정 부분에만 스타일을 주어서 강조를 하고 싶다고 해 보자. 이 때 이 부분을 감싸줄 수 있는 HTML 태그가 필요하다.

이를 위해서 우리는 div와 span이라는 태그를 사용한다. 둘 모두 어떠한 특정한 기능이 있는 태그가 아니고, CSS나 Javascript 코드를 삽입하기 위해서 존재하는 태그이다. div 태그는 화면 전체를 사용하기 때문에 줄바꿈이 되고, span은 줄바꿈이 되지 않는다.

이제 이러한 div와 span 태그 안에 style 속성을 부여하면 이 태그로 감싸진 부분에만 디자인이 적용되게 된다.

하지만 이렇게 모든 부분을 div나 span 태그로 감싸려고 한다면 이를 쓰기도 힘들고, 수정하기는 더욱 힘들 것이다. 이를 위해서 CSS에는 선택자라는 기능이 존재한다.

Class

이를 위해서는 <head> 태그 안에 <style>이라는 새로운 태그를 만들어 준다. 이 style 태그 안에는 CSS 코드가 들어가게 된다. 그리고 js라는 class를 생성해 보자. 

<head>
  <style>
    .js {
        font-weight: bold;
        color: powderblue;
    }
  </style>
</head>

이 때 js 앞에 찍혀있는 점은 js라는 이름이 class 이름이라는 것을 나타낸다. 이렇게 class를 만들었으니, 이를 HTML 코드의 곳곳에 적용시키면 된다. 예를 들어 어떤 문장에서 Javascript라는 단어에만 이 class를 적용시켜서 볼드체로 만들고 싶다면 다음과 같이 쓰면 된다.

<span class="js">Javascript</span> is wonderful!

이렇게 하면 이제 js라는 class를 가진 모든 태그를 한 번에 바꿀 수 있다. style 태그 안에 있는 .js만 수정하면 모든 부분을 한 번에 바꿀 수 있는 것이다.

]]> <![CDATA[변수와 대입연산자]]> https://velog.io/@yuu_na_callia/%EB%B3%80%EC%88%98%EC%99%80-%EB%8C%80%EC%9E%85%EC%97%B0%EC%82%B0%EC%9E%90 https://velog.io/@yuu_na_callia/%EB%B3%80%EC%88%98%EC%99%80-%EB%8C%80%EC%9E%85%EC%97%B0%EC%82%B0%EC%9E%90 Sat, 10 Jul 2021 14:03:36 GMT 변수

변수란 말 그대로 바뀔 수 있는 수를 말한다. 예를 들어서 다음 코드를 실행한다고 해보자.

x=1;
y=1;
x+y;

마지막 줄에서 x+y의 결과값은 얼마가 될까? 2가 될 것이다. 

x=1000;
x+y;

같은 x+y이지만, x의 값이 1000으로 바뀌었기 때문에 결과는 1001이 될 것이다. 여기서의 x처럼 값이 바뀔 수 있는 것을 변수라고 한다.

이 때 =는 대입 연산자라고 부른다. 왼쪽에 있는 변수에 오른쪽에 있는 숫자를 대입한다는 의미이다.

1=2;

하지만 이처럼 실행해보면 에러가 나게 된다. 바로 1은 변수가 아니기 때문이다. 1은 언제나 1이다. 이렇게 바뀌지 않는 수를 상수라고 한다.

변수의 필요성

그렇다면 변수는 왜 사용하는 것일까? 그 이유는 무척 다양하다.

그 중 하나의 이유는 바로 변수를 이용해서 여러군데 흩어져 있는 값들을 한 번에 바꿀 수 있다는 것이다. 예를 들어 한 문자열 안에서 같은 "hello"라는 단어가 여러 번 나올 때, 이를 모두 "hi"로 바꾸고 싶다고 해 보자. 이 때 모든 "hello"들이 변수로 나타나 있다면, 변수만 바꿔주면 한 번에 모든 hello들을 hi로 바꿀 수 있다는 것이다.

변수를 쓸 때 한 가지 알아두면 좋은 점은 다음 코드와 같이 변수 이름 앞에 var을 붙이면 좋다는 점이다. 이 때 var은 변수의 영어 단어인 variable의 약자이다.

var word = "hello"
"~~~~~~~~~~" + word + "~~~~~~~~~~~~~~~"
]]> <![CDATA[데이터 타입(문자열과 숫자)]]> https://velog.io/@yuu_na_callia/%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EB%AC%B8%EC%9E%90%EC%97%B4%EA%B3%BC-%EC%88%AB%EC%9E%90 https://velog.io/@yuu_na_callia/%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EB%AC%B8%EC%9E%90%EC%97%B4%EA%B3%BC-%EC%88%AB%EC%9E%90 Thu, 08 Jul 2021 16:11:03 GMT Javascript의 데이터 타입

컴퓨터 프로그래밍에서는 많은 데이터를 처리하게 되고, 이를 위해서는 특히 데이터를 종류별로 분류하는 일은 아주 중요하다.

숫자(Number)

예를 들어 1+1을 실행시키면 2가 출력된다. 숫자 데이터 타입의 가장 중요한 점은 연산이 가능하다는 것이다. 즉, 1+1에서는 +라는 연산이 왼쪽에 있는 값과 오른쪽에 있는 값을 더해서 하나의 값을 만들어내게 된다. 그렇기 때문에 +를 이항 연산자라고 부른다. 계산을 하기 때문에 산술 연산자라고 부르기도 합니다. 여러분이 흔히 아는 사칙 연산 (+, -, , /)는 모두 산술 연산자에 속한다. 즉, *사칙 연산을 이용해서 숫자 데이터 타입을 계산할 수 있는 것이다. **

문자열(String)

문자열은 따옴표로 시작해서 따옴표로 끝나게 된다. 작은 따옴표로 시작하면 작은 따옴표로 끝내고, 큰 따옴표로 시작하면 큰 따옴표로 끝내면 된다. 문자열에서 흔히 사용하는 연산으로는 length가 있다. 문자열 뒤에 .을 붙이고 length를 입력하면 그 문자열의 길이를 알려준다.

그 외에도 문자를 처리하는 데 다양한 명령어를 사용할 수 있다. 구글에서 javascript string 이라고 검색하면 여러 관련된 다양한 명령어를 찾을 수 있다. 예를 들면 str.toUpperCase() 를 사용하면 str 안에 들어 있는 모든 문자열의 문자들이 대문자로 바뀌게 된다. str.indexOf('hi') 를 하면 str 안에 있는 hi 라는 문자열을 찾아서 그 부분이 앞에서부터 몇 번째 문자인지 알려준다.

데이터 타입의 중요성

그렇다면 이제 조금 전에 숫자 데이터 타입에서 봤던 연산을 문자열에 적용시켜 보자. 다음 코드를 실행하면 어떻게 될까?

"1" // 문자열
> "1"

1 // 숫자

1

"1"+"1" // 문자열

"11"

여기에서 "1"은 **따옴표로 둘러싸여 있기 때문에 문자열**입니다. 이 때 이 코드의 실행값은 문자열이기 때문에 "11"이 된다.

1+1 // 숫자

2

```

즉, 문자열인지 숫자인지에 따라 연산의 결과가 크게 달라질 수 있다는 것이다.

]]> <![CDATA[HTML과 JS의 만남 : 콘솔]]> https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-%EC%BD%98%EC%86%94 https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-%EC%BD%98%EC%86%94 Thu, 08 Jul 2021 15:24:48 GMT 콘솔 (Console)

웹 브라우저에서 오른쪽 버튼 > 검사 를 누르면 뜨는 창을 잘 살펴보면 Console이라는 이름의 탭이 보일 것이다. 이 콘솔을 이용하면 파일을 만들지 않고도 바로 Javascript 코드를 실행할 수 있다.

예를 들어서, 어떤 문자열(Hello, World!)의 길이를 알고 싶다고 해 보자. 이 때 바로 이 콘솔 창에서 다음과 같이 치고 엔터를 누르면 문자열의 길이를 현재 페이지에서 바로 경고창으로 출력할 수 있다.

**alert(**'Hello, World!'**.length)**

즉, 콘솔을 통해서 입력된 코드는 현재 페이지에서 즉석으로 실행되는 것이다.

그렇다면 이런 콘솔을 어떻게 활용할 수 있을까? 예를 들어서 여러분이 페이스북에 댓글을 남기는 이벤트를 개최했다고 해 보자. 이 때 아주 많은 참가자들 중 당첨자를 뽑아야 하는데, 여기서 콘솔을 사용할 수 있다. 미리 짜 둔 Javascript코드를 콘솔 창에 적은 후 실행시키면 당첨자를 쉽게 뽑을 수 있다.

정리하자면, 콘솔을 이용하면 웹사이트에서 간단한 문제를 간편하게 Javascript를 실행시켜서 해결할 수 있는 것이다.

]]> <![CDATA[Font-variant]]> https://velog.io/@yuu_na_callia/Font-variant https://velog.io/@yuu_na_callia/Font-variant Thu, 08 Jul 2021 14:36:38 GMT Font-variant

글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있다.

font-variant : normal | small-caps | initial | inherit ;

< 속성 값 > normal : 기본 값 small-caps : 소문자를 작은 대문자로 변형한다.

]]> <![CDATA[Font-style]]> https://velog.io/@yuu_na_callia/Font-style https://velog.io/@yuu_na_callia/Font-style Thu, 08 Jul 2021 14:33:04 GMT Font-style

글꼴의 스타일을 지정하는 속성이다.

< 속성 값 > normal : font-family 내에 분류된 기본 값 italic : italic 스타일로 표현합니다. oblique : oblique 스타일로 표현합니다.

oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있다. font-weight oblique <각도>;

유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용된다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어진다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브라우저에서만 사용 가능하다.

]]> <![CDATA[Font-weight]]> https://velog.io/@yuu_na_callia/Font-weight https://velog.io/@yuu_na_callia/Font-weight Thu, 08 Jul 2021 14:24:50 GMT Font-weight

글꼴의 굵기를 지정하는 속성

<속성 값> normal : 기본 값 (400) bold : 굵게 표현(700) bolder : 부모 요소 보다 두껍게 표현 lighter : 부모 요소 보다 얇게 표현

number : 100, 200, 300, 400, 500, 600, 700, 800, 900 (클수록 더 두껍게 표현)

실무에서는 normal과 bold를 많이 사용하고, 부모 요소에 영향이 있는 bolder와 lighter는 사용을 될 수 있으면 지양하는 편이다. 물론 상속 관계에서 바뀌어야 하는 스펙이라면 당연히 유용하게 사용될 수 있다.

font-weight는 normal, bold와 같은 키워드 외에 숫자로도 그 굵기를 표현할 수 있다. 100~900까지 100단위로 값을 지정하여 사용할 수 있고 숫자가 커질수록 더욱 굵게 표현된다.

기본적으로 400은 normal과 같고, 700은 bold와 같다.

그러나 수치를 이용한 font-weight는 폰트 자체에서 지원을 해야 표현할 수 있다. 폰트에 따라 font-weight를 적용해도 굵기에 변화가 없을 수도 있으며, normal과 bold만 지원하는 폰트일 경우에는 100500까지는 normal로, 600900까지는 bold로 표현된다.

폰트가 점차 다양해지면서 굵기 자체를 폰트 family-name으로 가지고 있는 경우도 있다. 또한, 디바이스별로 조금 다르게 표현될 수도 있다.

font-weight와 font-family, font-size는 서로 밀접하게 연관되어있다.

]]> <![CDATA[HTML과 JS의 만남 : 이벤트]]> https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-%EC%9D%B4%EB%B2%A4%ED%8A%B8 https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-%EC%9D%B4%EB%B2%A4%ED%8A%B8 Sun, 04 Jul 2021 15:46:40 GMT Event

웹브라우저 위에서 일어나는 여러가지 사건들, Javascript와 사용자의 상호작용을 지칭한다.

Javascript에서는 다음과 같은 코드를 통해서 alert 경고창을 만들 수 있다.

alert('hi')

그렇다면 이제, 사용자가 어떤 버튼을 눌렀을 때 이 alert 창이 뜨도록 만들어 본다면, 먼저 빈 화면에 버튼을 만들고(input type), 이 버튼을 눌렀을 때 어떤 동작이 실행되도록 하는지 지정하는 속성인 onclick에 이 javascript 코드를 넣어보자. 아 그리고 버튼에 이름을 붙일 때는 value 속성에 이름을 지정해주면 된다. 이렇게 하면 다음과 같이 버튼을 눌렀을 때 hi라는 내용의 경고창이 뜨게 된다.

<input type="button" value="hi" onclick="alert('hi')">

Onclick 속성

HTML 태그 안에서 onclick 속성은 javascript 코드를 가지게 된다. 그리고 onclick이 포함된 태그가 클릭되었을 때 이 javascript 코드에 따라서 웹 브라우저가 동작된다. 즉, 위의 코드에서 웹 브라우저는 alert('hi') 라는 코드를 기억하고 있다가, 사용자가 클릭하면 이를 실행해주는 것이다.

이렇게 웹 브라우저에서 일어나는 유용한 사건을 이벤트(Event)라고 한다.

onclick 이벤트

사용자가 어떤 것을 클릭하는 사건을 의미한다.

onchange 이벤트

예를 들면 다음과 같은 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미하는 것이다. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 바뀌었는지 확인한다는 점도 알아두자.

이 외에도 총 10~20가지 정도의 이벤트가 존재한다. 더 알아보고자 한다면, 예를 들어서 키보드를 누르는 이벤트를 알아보고 싶다면, 구글에 "javascript keydown event"라고 검색하면 onkeydown 이라는 이벤트를 쉽게 찾을 수 있다. 이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 된다.

]]> <![CDATA[HTML과 JS의 만남 : script 태그]]> https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-script-%ED%83%9C%EA%B7%B8 https://velog.io/@yuu_na_callia/HTML%EA%B3%BC-JS%EC%9D%98-%EB%A7%8C%EB%82%A8-script-%ED%83%9C%EA%B7%B8 Sun, 04 Jul 2021 14:39:37 GMT script 태그

Javascript는 HTML 위에서 동작하는 언어이다. HTML의 태그 중 하나인 script 태그 안에는 Javascript 코드를 쓸 수 있다. 둘 사이를 연결해주기 위해서 *script 태그를 활용해 "이게 바로 javascript 라는 것"을 웹 브라우저에게 알려준다. *

<body>
  <script>
    document.write('hello, world!');
  </script>
</body>

위와 같은 코드를 <body> 태그 안에 넣어서 웹페이지를 띄워보면 페이지에 hello,world! 라는 글자가 뜨는 것을 볼 수 있다. 하지만 이러한 기능은 다음과 같이 HTML만 사용해서 구현할 수도 있다.

<body>
  hello, world!
</body>

그렇다면 이 둘의 차이점은 무엇일까?

바로 Javascript로 쓴 코드는 동적이라는 것이다. 만약 hello,world! 대신 1+1을 출력한다고 해 보자. 이때는 HTML과 Javascript로 쓴 코드의 결과가 아래와 같이 달라진다.

즉, HTML로 쓴 코드는 정적이기 때문에 문자 그대로를 출력하지만, Javascript 코드는 동적으로 이를 계산할 수도 있다는 것이다.

]]> <![CDATA[Font-size]]> https://velog.io/@yuu_na_callia/Font-size https://velog.io/@yuu_na_callia/Font-size Sun, 04 Jul 2021 14:27:47 GMT Font-size

글꼴의 크기를 지정하는 속성이다.

font-size: keyword | length | initial | inherit ;

부모 요소의 font-size 기준의 퍼센트로 지정한다.

  • absolute size (keyword) 기본 값인 medium 에 대한 상대적인 크기로, 브라우저마다 사이즈가 다르게 정의되어 있다.
  • relative size (keyword) 부모 요소의 font-size 크기에 대해 상대적입니다. smaller는 0.8배, larger는 1.2배입니다.
  • length px, em, rem 등의 단위를 이용하여 고정된 크기를 지정할 수 있다. [ em : 부모 요소의 font-size에 em 값을 곱한 크기 / rem : 루트의 font-size에 rem 값을 곱한 크기 ]
  • percent (%) 부모 요소의 font-size를 기준으로 백분율 계산된 값을 지정할 수 있다.
  • viewport units vw, vh 단위로 뷰포트를 기준으로 하여, 유동적인 font-size를 지정할 수 있다. vw는 뷰포트 width의 1%, vh는 뷰포트 height의 1% 값을 가진다.
]]> <![CDATA[Line height]]> https://velog.io/@yuu_na_callia/Line-height https://velog.io/@yuu_na_callia/Line-height Sun, 04 Jul 2021 14:21:53 GMT Line height

텍스트 라인의 높이를 의미하는 것으로 주로 행간(줄 간격)을 제어할 때 사용한다.

line-height: normal | number | length | initial | inherit ;

행간을 제어할 때 사용하는 속성이라서 줄간격으로 생각해 오해하기 쉬울 수 있다. 줄 바꿈이 되었을 때, 윗줄의 텍스트 하단과 아랫줄의 텍스트 상단까지의 여백 간격이라고 생각할 수도 있지만, line-height로 제어되는 부분을 line-box라고도 하며 이는 타이포그래피 구조에서 배웠던 [em 박스] + [상하단의 여백]까지를 의미한다.

  • normal 기본값으로 브라우저의 기본 속성을 따른다.
  • 폰트에 따라 브라우저에 따라 다르지만 보통 1.2 정도로 할당되어 있다.
  • 단위가 없는 숫자만 기록 가능한 특징이 있다.

주의할 점은, line-height의 값으로 number를 선언할 때와 %로 선언할 때의 차이이다. 두 값 모두 font-size를 기준으로 동작하기 때문에 1이나 100%를 같은 것이라고 오해할 수 있다. 하지만 두 값은 큰 차이가 있다. 바로 line-height의 값이 자식 요소로 상속되었을 때의 계산 방식이다.

아래 코드를 예시로 보자면,


> body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
  body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */

두 경우 모두 <body>에 똑같이 line-height: 40px이 적용된다.

하지만 자식 요소로 <p>와 같은 자식요소가 있다고 생각을 하면 얘기가 달라진다.

body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                       /* line-height = 20px; */


body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                          /* line-height = 40px; */

number - 부모 요소의 숫자 값이 그대로 상속된다. 즉, 자식 요소에서도 또 한 번 자식 요소의 font-size를 기준으로 계산된 값을 가진다.

% - 부모 요소에서 %값이 그대로 상속되는 것이 아니고, %에 의해 이미 계산된 px값이 상속됩니다.

이처럼 계산된 값이 아닌 숫자 값을 상속한다는 사실 때문에, 숫자 값을 사용하면 부모 엘리먼트에서 계산된 값 대신 비율을 그대로 상속받을 수 있으므로, 가능하면 단위가 없는 숫자 값을 사용하는 것이 좋다.

]]> <![CDATA[Java Script]]> https://velog.io/@yuu_na_callia/Java-Script https://velog.io/@yuu_na_callia/Java-Script Fri, 02 Jul 2021 15:13:30 GMT Java Script

Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것이다. 웹 브라우저는 한 번 출력되면 바뀔 수 없지만, Javascript 코드에 따라서 style 속성이 추가되면서 디자인이 바뀌는 것입니다. 이러한 Javascript의 특성을 이용해서 우리는 웹페이지를 더 동적으로 만들 수 있게 된다.

(크롬 기준으로) 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 된다. 여기에서 Elements (elements = tag이다) 탭을 보면, 페이지를 구성하는 HTML 태그들이 나와 있다.

night/day 버튼을 눌러보면 누를 때마다 body 태그의 style 속성이 바뀌는 것을 볼 수 있다. 버튼은 type이 button인 input 태그로 이루어져 있다. value는 버튼의 이름을 나타낸다. 그리고 onclick이라는 속성에 바로 javascript가 들어가게 된다. 즉, 이 버튼을 누르면 이 javascript 코드가 실행되는 것이다.

onclick에는 이런 javascript 코드가 적혀있다.

document.querySelector('body').style.backgroundColor='black'

먼저, 문서(document)에서 body라는 태그를 선택(Selector)한다. 그리고 난 후 style 속성값에서 backgroundColor를 'black'으로 설정한다는 뜻이다.

이렇게 부여된 속성값은 아까 살펴봤듯이 body 태그의 style 속성으로 들어간다. 이 style 속성은 CSS이다.
]]> <![CDATA[Typography]]> https://velog.io/@yuu_na_callia/Typography https://velog.io/@yuu_na_callia/Typography Fri, 02 Jul 2021 14:12:48 GMT FONT-FAMILY

-> 글꼴을 지정하는 속성이다.

font-family는 family-name **과 generic-family** 으로 구성 되어있다.

family-name

: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할 수 있습니다. 먼저 선언된 순서대로 우선순위가 결정된다.(지정순서로 폰트의 우선순위를 결정한다.) 한글 폰트인 경우에는 컴퓨터가 인식을 못할 수도 있기 때문에 반드시 영어도 같이 선언해주어야한다. 이름 중간에 공백이 있거나, 한글일 경우 홑따옴표로 묶어서 선언한다.

generic-family

: family-name으로 지정된 글꼴을 사용할 수 없을 경우를 대비해, 브라우저가 대체할 수 있는 적절한 폰트를 선택할 수 있게 해준다. font-family 속성의 맨 마지막에 선언해야 하며, 키워드이기 때문에 따옴표 등의 인용부호로 묶지 않는 것이 원칙이다. 예를 들면 아래와 같이 선언하여 사용할 수 있다. 

font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용된다. 만약 "abc 가나다 123" 이라는 글자가 있다면, "abc"와 "123"은 Helvetica로 표현이 되고, "가나다"는 Dotum으로 표현이 된다. "가나다"가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문이다.

한가지 살펴본다면 돋움체를 영문으로 한번, 한글로 한번 선언 하였다. 그 이유는 한글을 지원하지 않는 디바이스일 경우 해당 한글 폰트를 불러올 수 없으므로 영문명으로도 선언해 주어야하기 때문이다. 그리고 마지막에는 반드시 generic-family를 선언 해주어야 한다. 그 이유는 선언된 모든 서체를 사용할 수 있다는 보장이 없기 때문이다. 이때 generic-family를 선언해주면, 시스템 폰트 내에서 사용자가 의도한 스타일과 유사한 서체로 적용되기 때문이다. 또한, 자식 요소에서 font-family를 재선언하면 부모에 generic-family가 선언되어있어도 다시 선언해주어야 한다.

Generic-Family에는 대표적인 서체로 serif, sans-serif가 있다. serif는 삐침이라는 뜻이고, sans는 프랑스어로 '~이 없이'라는 의미가 있다. serif는 글자 획에 삐침이 있는 폰트로 대표적으로 명조체가 있으며, sans-serif는 획에 삐침이 없는 폰트로 대표적으로 돋움체가 있다.

]]> <![CDATA[WebSocket]]> https://velog.io/@yuu_na_callia/WebSocket https://velog.io/@yuu_na_callia/WebSocket Sun, 27 Jun 2021 17:27:55 GMT WebSocket 의 개념

HTML, AJAX 등의 고질적인 문제인 서버는 요청이 없으면 응답을 못한다는 걸 해결하고자 나타난 대책이다! 이런 상황에서 양쪽 모두가 통신을 주고받을 수 있는 규약이 만들어졌는데, 이것이 바로 양방향 통신 프로토콜, 웹소켓(WebSocket)이다. 서버와 클라이언트 간에 Socket Connection을 유지해서 언제든 *양방향 통신 또는 데이터 전송이 가능하도록 하는 HTML5 표준 기술로, 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다. *

Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. 현재 API는 W3C에서 관장하고 있으며 프로토콜은 IETF에서 관리하고 있다. 웹소켓은 별도의 포트를 사용하지 않고 HTTP와 같은 80번 포트를 사용하고 있는데, 이 때문에 클라이언트인 웹 브라우저뿐만 아니라 웹 서버도 기능을 지원하고 있어야만 한다.

Real-time web application 구현을 위해 널리 사용되어지고 있다. (SNS어플리케이션, LoL같은 멀티플레이어 게임, 구글 Doc, 증권거래, 화상채팅 등)

웹소켓의 등장 배경

초창기 웹은 단순히 인터넷에 접속한 사용자에게 콘텐츠를 전달하는 역할에 지나지 않았다. 사용자와의 상호작용은 크게 중요하지 않았으며, 정보의 검색 및 열람 수준에 그쳤다. 하지만 웹을 통해 사용자들이 정보를 교환하고 스스로 커뮤니티를 만들어 교류하고자 하는 수요가 늘어나면서 게시판, 블로그 등과 같은 서버와 클라이언트 간의 상호작용을 하는 부분들이 생기기 시작했다. 오늘날의 웹은 일상생활 깊숙이 파고들었고, 네이티브 애플리케이션을 대체하는 수준에 이르렀다. 특히 전형적인 브라우저 렌더링 방식은 HTTP 요청에 대한 HTTP 응답을 받아서 브라우저의 화면을 모두 지우고 받은 내용을 새로 표시하는 방식이었다. 그때 Ajax와 같은 기술이 나타나면서 사용자와 긴밀히 상호작용하는 웹 서비스가 등장하였고 인기를 끌기 시작했다. 이러한 RIA(Rich Internet Application) 기술의 발달이 웹소켓의 등장 배경이라고 할 수 있다.

웹소켓의 사용이유

기존에는 서버와 클라이언트가 실시간으로 상호작용하는 웹 서비스를 개발하기 위해서 숨겨진 프레임을 이용하는 방법이나 Long Polling, Stream 등과 같은 다양한 방법을 사용했었다. 하지만 이 방식은 브라우저가 HTTP 요청을 보내고 웹 서버가 이 요청에 대한 HTTP 응답을 보내는 단방향의 메시지 교환 방식을 유지하는 선에서 구현된 방식이다. 즉, 기존의 방법에 일종의 트릭을 사용한 방법이다. 이 때문에 기존의 웹 기술을 이용하여 실시간 웹 서비스를 만드는 일은 복잡하고 어려웠다.

바로 이러한 불편함과 사용자와 긴밀히 상호작용하는 웹 페이지를 더 쉽게 만들고자 하는 개발자의 요구가 브라우저와 웹 서버 사이의 자유로운 양방향 메시지 송수신 방법으로써 HTML5 표준안의 일부인 웹소켓 API가 등장한다.

사용 방법은 Ajax와 비슷하지만, 개념 면에서 Ajax와 차이를 두고 있다. Ajax의 경우는 웹 브라우저에서 데이터를 호출하면 웹 서버에서 호출된 값을 검색, 작성해서 웹 브라우저로 메세지를 보내는 형식의 구조라면 웹소켓의 경우는 *웹 브라우저에서 호출해서 데이터를 가져가는 기능을 포함하여 반대로 서버에서 클라이언트를 호출할 수 있는 기능까지 있다. *

예로 채팅프로그램을 만든다고 가정할 때, 우리가 채팅을 서버로 보내는 건 가능하다. 그러나 Ajax로 만든 웹 페이지라면 서버 측에게 클라이언트가 보낼 수가 없다. 대응책으로 10초마다 데이터를 갱신해서 확인할 수 있지만, 웹소켓은 서버에서도 클라이언트를 인지하는 상태이기에 양방향 통신이 가능하다.

HTML5 웹소켓은 매우 유용한 기술이지만, 브라우저별로 지원하는 웹소켓 버전이 다르며 오래된 브라우저의 경우 아예 지원하지 않는다. 따라서 자바스크립트를 이용하여 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.io를 좀 더 많이 사용하고 있다.

작동원리

HTTP와 같은 통신 프로토콜으로, 양방향 통신이라는 것 빼고는 모두 동일하다. (API는 W3C에서 관장하고, 프로토콜은 IETF에서 관장한다고 한다) HTTP와 마찬가지로 IP와 PORT(80)로 통신을 하며, Upgrade 헤더를 통해 웹서버에 요청을 한다.

서버와 클라이언트 간의 WebSocket 연결은 HTTP프로토콜을 통해 이루어진다. 만약 연결이 정상적으로 이루어 진다면 서버와 클라이언트 간에 WebSocket연결이 이루어지고 일정 시간이 지나면 HTTP연결은 자동으로 끊어진다.

]]> <![CDATA[REST API]]> https://velog.io/@yuu_na_callia/REST-API https://velog.io/@yuu_na_callia/REST-API Sun, 27 Jun 2021 16:52:59 GMT REST API (RESTful API)

REST 아키텍처의 제약 조건을 준수하는 애플리케이션 프로그래밍 인터페이스를 뜻함. REST는 Representational State Transfer의 줄임말 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 하는 배경이 있음.

사용자 또는 클라이언트, 그리고 사용자와 클라이언트가 얻으려 하는 리소스 사이의 조정자로 생각하면 됨. API는 조직이 보안 및 제어를 유지관리(누가 무엇에 액세스할 수 있는지 결정)하면서 리소스와 정보를 공유할 수 있는 방법이기도 함.

컴퓨터나 시스템과 상호 작용하여 정보를 검색하거나 기능을 수행하고자 할 때 API는 사용자가 원하는 것을 시스템에 전달할 수 있게 지원하여 시스템이 이 요청을 이해하고 이행하도록 할 수 있음. 애플리케이션 소프트웨어를 구축하고 통합하는 정의 및 프로토콜 세트 때때로 API는 정보 제공자와 정보 사용자 간의 계약으로 지칭되며 소비자에게 필요한 콘텐츠(호출)와 생산자에게 필요한 콘텐츠(응답)를 구성함.

장점 - 리소스 검색 방법 또는 리소스의 출처에 대한 지식 없이도 사용이 가능함.

rest api 의 구성

자원(RESOURCE) - URI 행위(Verb) - HTTP METHOD 표현(Representations)

rest api의 디자인 가이드

첫 번째, URI는 정보의 자원을 표현해야 한다. 리소스 명은 행위나 동사보다는 명사를 사용함.

GET /members/delete/1

위와 같은 방식은 REST를 제대로 적용하지 않은 URI임. URI는 자원을 표현하는데 중점을 두어야 함. delete와 같은 행위에 대한 표현이 들어가서는 안됨.

두 번째, 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현한다. 위의 잘못 된 URI를 HTTP Method를 통해 수정해 보면,

DELETE /members/1

으로 수정할 수 있음. 회원정보를 가져올 때는 GET, 회원 추가 시의 행위를 표현하고자 할 때는 POST METHOD를 사용하여 표현함.

HTTP METHOD의 역할

METHOD : 역할 POST : 해당 URI를 요청하면 리소스를 생성함. GET : 해당 리소스를 조회하고 해당 도큐먼트에 대한 자세한 정보를 가져옴. PUT : 해당 리소스를 수정함. DELETE : 리소스를 삭제함.

]]>