Koras02코딩웹

[CSS] CSS 3강 - CSS의 작동방식

Koras02 — Fri, 24 Feb 2023 10:06:34 +0900

이번 시간에서는 브라우저가 CSS와 HTML을

가져와서 웹 페이지를 만드는 방법을

살펴 보도록 하겠습니다.

CSS는 실제로 어떻게 작동하는가?

브라우저가 웹 페이지에 문서를 표시할 때

문서의 콘텐츠와 해당 스타일 정보를

서로 결합해야 합니다.

아래 나열된 여러단계로 문서를 처리합니다

이것은 브라우저가 웹 페이지를 로드할 때

발생하는 작업의 매운 단순화된 버전으로

다른 브라우저가 다른 방식으로 작업을

처리하는다는 점을 명심하시면 됩니다.

브라우저는 HTML(ex.네트워크에서 HTML 수신)을 로드
HTML을 DOM(Document Object Model)로 변환함
DOM은 컴퓨터 메모리의 문서를 나타내는 요소
그 다음 브라우저는 포함된 이미지 및 비디오와 같은
HTML 문서에 연결된 대부분의 리소스와 연결된 CSS를
가져옴, Javascript는 작업에서 나중에 처리됨
브라우저는 가져온 CSS를 구문 분선 후 선택자 유형별로
다음 규칙을 따른 "buckets"으로 정렬함
정렬 시에는 요소,클래스,ID 등 찾은 선택자를 기반으로
DOM의 어느 노드 어떤 규칙을 적용할지 결정하고 필요에
따라서 스타일을 첨부함

DOM 정보

DOM은 트리와 같은 구조를 가지고 있습니다.

마크 업 언어의 각 요소, 속성 및 텍스트는

트리구조 DOM node가 됩니다.

노드는 다른 DOM 노드와 관계에 의해

정의 되고, 일부 요소는 자식 노드의 부모이고

자식 노드에는 형제가 있습니다.

DOM은 CSS와 문서의 내용이 만나는 곳이라

DOM을 이해한다면 CSS를 설계, 디버그 및

유지 관리에 큰 도움이 될 것 입니다.

브라우저 DevTools로 작업 시, 적용할 규칙을

보기 위해 항목을 선택 시 DOM을 탐색합니다.

실제 DOM 표현하기

실제로 HTML에서 DOM을 표현하기 위해서는

아래에 HTML이 DOM을 변환하는 코드를 작성합니다.

<p>
   Let's use developer:
   <span>Cascading</span>
   <span>Style</span> 
   <span>Sheets</span>
</p>

DOM 에서,  요소애 해당하는 노드는 부모 요소로

자식은 텍스트 노드며  요소에 해당하는 세 개의

노드입니다.  요소는 부모로 텍스트 노드는 자식입니다.

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

브라우저가 이전 HTML을 해석하는 방법입니다.

DOM 에 CSS 적용하기

CSS를 문서에 추가해 스타일을 지정했다고

가정하고 HTML을 다시 작성해 봅시다.

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

다음 CSS를 적용한다고 가정 해보면

span {
  border: 1px solid black;
  background-color: lime;
}

브라우저는 HTML을 구문 분석하고 그로부터

DOM을 작성한 다음 CSS를 구문 분석합니다.

CSS에서 사용할 수 있는 유일한 규칙으로

span 선택자가 있으며, 브라우저는 CSS를

매우 빠르게 정렬할 수 있습니다.

이 규칙을 세 개의  각각에 적용한

다음 최종 시각적 표현을 화면에 표시합니다.

브라우저에 인식하지 못하는 CSS는 어떻게 할까?

브라우저가 규칙을 구문 분석하고 이해하지

못하는 속성 이나 값을 발견하면 이를 무시하고

다음 선언으로 넘어가 줍니다.

오류가 발생해 속성 또는 값의 철자가 틀렸거나

속성 또는 값이 너무 새롭고 브라우저가 아직

이를 지원하지 않을 경우, 이 작업을 수행합니다.

마찬가지로, 브라우저가 이해하지 못하는

선택자를 만난다면 전체 규칙을 무시하고

다음 규칙으로 넘어갑니다.

아래 예는 글자를 파란색으로 영국식 철자를

사용했는데, 그 속성은 인식되지 않기 떄문에

이것은 유효하지 않습니다.

그래서 단락은 파란색으로 표기되지 않습니다.

유효하지 않은 것을 제외한 부분은 전부 표기되며

유효하지 않은 것만 브라우저에서 제외됩니다.

<p>이 텍스트를 크고 굵은 파란색으로 표기</p>

p {
  font-weight: bold;
  colour: blue; /* color  속성의 잘못된 철자 */
  font-size: 200%;
}

이 동작은 매우 유용하며, 이는 새로운 CSS를

향상된 기능으로 사용할 수 있음을 의미하며

새 기능을 이해하지 못할 경우 오류가 발생하지

않습니다, 브라우저는 새로운 기능을 얻거나

얻지 못하며 cascade 작동 방식 및 브라우저가

스타일이 동일한 마지막 CSS를 사용한다는

사실과 동일한 특성을 가진 두 규칙이 있을 경우

새 CSS를 지원하지 않는 브라우저에 대한

대안을 제공할 수 있습니다.

이것은 새롭고 모든 곳에서 지원되지 않는 값을

사용할 경우 특히 효과적인데 예를 들어서

구형 브라우저는 calc()를 값으로 지원하지 않습니다.

박스에 대해 대체 너비를 픽셀 단위로 지정 후

calc() 값을 100% - 50px로 너비를 지정합니다.

오래된 브라우저는 픽셀 버전을 사용하나

이해하지 못하는 calc()에 대한 라인은 무시합니다.

새로운 브라우저는 픽셀을 사용할 경우

라인을 해석하는 기능을 가지고 있으나

나중에 cascade에서 나타날 떄 calc()를

사용하여 라인을 재정의 합니다.

.box {
  width: 500px;
  width: calc(100% - 50px);
}

참고 자료

CSS 작동 방식 | MDN

CSS 기본 사항, CSS 의 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.

developer.mozilla.org

GitHub - CSS-STR/css-blog-tutorial

Contribute to CSS-STR/css-blog-tutorial development by creating an account on GitHub.

github.com

[CSS] CSS 2강 - CSS의 구조를 알아보자

Koras02 — Mon, 20 Feb 2023 18:57:47 +0900

이번 시간에는 CSS의 언어 자체 구조를

조금 더 깊이 살펴볼 시간을 가져봅시다.

HTML에 CSS 적용하기

가장 먼저 살펴볼 부분은 CSS를 문서내에

적용하는 세 가지 방법입니다.

외부 스타일 시트

CSS를 시작하기 앞서 외부 스타일 시트를

페이지에 연결했습니다. CSS를 여러 페이지에

연결할 수 있으며,CSS를 문서에 첨부

하는 가장 일반적이고 유용한 방법이며

모두 동일한 스타일 시트로 CSS 스타일을

지정할 수 있습니다. 대부분의 경우 사이트의

다른 페이지는 모두 동일하게 보이기 때문에

기본 모양과 느낌에 동일한 규칙을 사용할 수

있습니다.

외부 스타일 시트는 CSS 확장자가 .css인

별도의 파일로 작성하고, HTML의 <link> 요소

에서 참조하는 경우입니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1-2-1.css-exterio</title>
    <link rel="stylesheet" href="css/1-2-1.css-exterior.css">
</head>

<body>
    <h1>Hello World!</h1>
    <p>CSS first example</p>
</body>

</html>

CSS 파일내 구조는 다음과 같습니다.

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

<link> 요소의 href 속성은 여러분의 파일 시스템

파일을 참조해야 합니다.

위 예에서, CSS 파일은 HTML 문서와

동일한 폴더가 있지만, 다른 곳에 저장한다면

지정된 경로를 다음과 같이 조정할 수 있습니다.

<!-- 현재 폴더의 styles 라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/style.css">

<!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 -->
<link rel="stylesheet" href="../styles/style.css">

내부 스타일 시트

내부 스타일 시트는 외부 CSS 파일이 없는 대신

HTML <head> 태그 안에 포함된 <style> 요소

내부에 CSS를 배치해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>1-2-2.css-interior-style-sheet</title>
    <style>
        h1 {
            color: palegoldenrod;
            background-color: yellowgreen;
            border: 1px solid black;
        }

        p {
            color: lavender
        }
    </style>
</head>
<body>
    <h1>Hello World</h1>
    <p>it's my first css Example!</p>
</body>
</html>

이는 일부 상황에서 유용할 수 있지만 CSS가

필요한 외부 스타일 시트 만큼 효율적 이지

않습니다.

웹 사이트에서, CSS가 모든 페이지에서 반복되고

변경이 필요한 경우 여러 위치에서 업데이트 됩니다.

인라인 스타일

인라인 스타일은 style 속성 내 포함된 한

요소에만 영향을 주는 CSS 선언입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-2-3.css-inline-style</title>
</head>
<body>
    <h1 style="color:aqua; background-color: beige; border: 1px solid brown">
        Hello World!
    </h1>
    <p style="color:blueviolet;">첫번째 CSS 예제</p>
</body>
</html>

하지만 이런 코드방식은 유지 관리가 좋지 않고

프레젠테이션 CSS 정보와 HTML 구조 정보를

혼합해 코드를 읽고 이해하기 어렵게 만듭니다.

다른 유형의 코드를 분리하여 유지하면

코드 작업을 하는 모든 사람이 훨씬 쉽게

작업할 수 있습니다.

인라인 스타일이 더 일반적이거나 권장되는

곳이 몇군데 있습니다. 작업 환경이 실제로

제한적인 경우 이를 사용하는 것이 좋습니다.

또한 가능한 많은 전자 메일 클라이언트와

호환되도록 HTML 전자 메일이 많이 사용된

것을 볼 수 있습니다.

이 기사에서 CSS 실습하기

이 기사에는 많은 CSS 예제가 있습니다.

이렇게 하려면, 컴퓨터에 새 디렉토리/폴더를

작성하고 그 안에 다음 두파일의 복사본을

작성하시는 것이 더욱 좋습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1-2-4.css-test</title>
    <link rel="stylesheet" href="css/1-2-3.css-test.css">
</head>

<body>

    <p>테스트용 HTML을 작성</p>

</body>

</html>

p {
  color: blue;
}

그 다음, 실험하려는 CSS를 발견하면

HTML <body> 콘텐츠를 스타일을 지정할

HTML로 바꾸고 CSS를 추가하여

CSS 파일 내에서 스타일을 지정해줍니다.

선택자 (Selectors)

선택자를 만나지 않고서야 CSS에 대해서

자세하게는 이야기 할 수 없습니다.

선택자란 스타일을 적용하기 위해

HTML 문서에서 무언가를 대상으로 하는

방법입니다.

스타일이 적용되지 않는다면 선택자가

일치해야 하는 것과는 동일하지 않을 수

있습니다.

각각의 CSS 규칙은 선택자 또는 선택자

목록으로 시작하여 규칙을 적용해야 하는

요소 또는 요소 규칙을 브라우저에 알려줍니다.

다음은 모두 유효한 선택자 또는 선택자

목록의 예입니다.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

위의 선택자를 사용하는 CSS 규칙과 스타일을

적용할 일부 HTML을 만들어 봅시다!.

우선 순위 (Specificity)

두 선택자가 동일한 HTML 요소를 선택할 수 있는

경우가 종종 있습니다. 단락을 파란색으로 설정하는

p 선택자 및 선택한 요소를 빨간색으로 설정하는

class가 있는 아래 스타일 시트를 입력해줍니다.

.special {
  color: red;
}

p {
  color: blue;
}

HTML 문서에 special 클래스가 있는 단락이

있다고 가정합니다. 두 규칙이 모두

적용 될 수 있으므로 어느쪽이 우선일까요?

우리의 문단은 어떤 색이 될까요?

<p class="special">나는 무슨 색?</p>

CSS 언어에서 클래스와 태그가 충돌 시

어떤 규칙이 이기는지 제어하는 규칙이 있습니다.

이러한 규칙을 계단식(cascade) 및 우선 순위(specificity)

라고 합니다. 아래 코드를 블록에서 p 선택자에

대해 두 가지 규칙을 정의했지만, 단락이

파란색으로 표시됩니다. 파란색으로 설정한

선언은 스타일 시트에서 나중에 나타나고 이후

스타일은 이전 스타일을 재정의 하기 떄문입니다.

이것은 실제로 계단식(cascade)라고 합니다.

p {
  color: red;
}
p {
  color: blue;
}

그러나, class 선택자 및 요소 선택자가 있는

이전의 블록의 경우에 class가 이기고 단락이

빨간색으로 표시됩니다.

class는 요소 선택자 보다 더 구체적이거나

더 우선 순위가 높은 것으로 설명되 이깁니다.

속성 및 값

css에 가장 기본적인 수준에서, CSS는

두 가지 요소로 구성됩니다.

속성(Properties): 변경할 스타일 기능( font-size, width 등)
을 나타내는 식별자 이다.
값(Values): 지정된 각 속성에는 값이 지정되어 있으며
이는 해당 스타일 기능을 변경하는 방법(글꼴, 너비 또는 배경색)
을 나타냅니다.

아래 이미지는 단일 속성과 값을 강조 표시합니다.

속성 이름은 color이고 값은 blue 입니다.

값 과 쌍을 이루는 속성을 CSS 선언(description)

이라고 합니다. CSS 선언은 CSS 선언 블록 안에 있습니다.

다음 이미지는 선언 블록이 강조 표시된 CSS를

보여주고 있습니다.

마지막으로 CSS 선언 블록은 선택자와 쌍을 이뤄

CSS Rulesets (또는 CSS 규칙)를 생성합니다.

이미지에는 h1 선택자 및 p 선택자의 두 가지

규칙이 있습니다. h1의 규칙이 강조 표시됩니다.

CSS 속성을 특정 값으로 설정하는 것을

CSS 언어의 핵심 기능입니다.

CSS 엔진은 페이지의 모든 단일 요소에

적용할 선언을 계산하여 적절하게 배치하고

스타일을 지정해주는 역할을 합니다.

기억해야 할 부분은 CSS에서 속성과

값이 모두 대소문자를 구분한다는 것 입니다.

각 쌍의 속성과 값은 콜론 ( : )으로 구분 됩니다.

다음 속성의 다른 값을 찾아 다른 HTML 요소에

적용하느 CSS 규칙을 작성합니다.

font-size
width
background-color
color
border

함수 (function)

대부분의 값은 비교적 간단한 키워드 숫자 값이지만

함수의 형태를 취하는 몇가지 가능한 값이 있습니다.

calc() 함수를 예로 들자면, 이 함수를 사용하면

CSS 내에서 간단한 계산을 수행할 수 있습니다.

<div class="outer">
   <div class="box">The inner box is 90% - 30px</div>
</div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: magenta;
  color: white;
}

함수는 함수 이름과 해당 함수에 허용된 값이

배치되는 괄호들로 구성됩니다.

위의 calc() 예제의 경우, 이 박스의 너비는

블록 너비의 90% 에서 30px를 뺀 값을 요구합니다.

이것은 90%가 무엇인지 알지 못하기 떄문에 미리

계산하고 CSS에 값을 입력할 수 있는 것이 아닙니다.

모든 값과 마찬가지로 MDN의 관련 페이지에

사용법 예제가 있으므로 기능의 작동 방식을

더욱 자세히 살펴볼 수 있습니다.

또 다른 예로 rotate()와 같은 transform 에 대한

다양한 값으로 아래와 같이 입력합니다.

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

다음 속성의 다른 값을 찾아 다른 HTML 요소에

적용하는 CSS 규칙을 작성합니다.

transform
background-image, in particular gradient values
color, in particular rgb/rgba/hsl/hsla values

@rules

아직, 우리는 @rules가 발생하지 않았습니다.

이것들은 CSS에 행동방법에 대한 지침을 제공하는

특수 규칙으로, 일부 @rules는 규칙 이름과 값으로

단순합니다. 예를 들어, 추가 스타일 시트를

기본 CSS 스타일 시트로 가져오려면 @import를

사용할 수 있습니다.

@import 'style.css'

여기서 접하게 될 가장 일반적인 @rules 중 하나는

media-query(미디어 쿼리)인 @media입니다.

이는 특정 조건이 참일 떄만 CSS를 적용할 수

있는 미디어 쿼리를 사용할 수 있습니다.

아래 CSS에는, <body> 요소에 분홍색 배경색을

주는 스타일 시트가 있습니다. 그러나 @media를

사용해서 30em 보다 넓은 viewport가 있는

브라우저에만 적용되는 스타일 섹션을 만들 것

입니다. 브라우저가 30em 보다 넓을 경우

배경색은 갈색으로 변경됩니다.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: brown;
  }

  h1 {
    color: #fff;
  }
} ;

viewport는 너비에 따라 스타일을 변경하는

미디어 쿼리를 CSS에 추가할 수 있므며

결과를 직접 브라우저에서 테스트

해보실 수 가 있습니다.

속기 (shorthands)

font, backgroud, padding, border, margin

등의 일부 속성들은 속기 속성이라 불리며

이는 여러 줄의 속성 값을 한줄로 설정 해

시간을 절약하고 작업에서 코드를 깔끔하게

만들 수 있기 때문입니다.

/* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 
시계방향) 순서로 값이 적용됩니다.
위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 
shorthand 유형 (예: 2-값 shorthands)도 있습니다. */
padding: 10px 15px 15px 5px;

이것들은 모두 똑같을까요?

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

아래 한줄의 코드가

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

아래 코드와 같이 같은 작업을 수행합니다.

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

주석(comments)

CSS도 HTML과 마찬가지로 주석을 달아

몇 달 후에 코드가 다시 작동할 때

코드 작동 방식을 이해하고 코드를 사용하는

다른 사람들이 이해하도록 도와주는 게 좋습니다.

CSS의 주석은 /*로 시작하고 */ 로 끝납니다.

아래 코드 블록에서 주석을 사용하여 다른

고유 코드 섹션의 시작을 표시했습니다.

코드가 더욱 커질수록 코드를 탐색하는 데

더욱 유용합니다. 코드 편집기에서도 주석을

검색할 수 가 있습니다.

/* 기본 요소 스타일링 처리 */
/* =================================================== */

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (max-width: 1200px) {
  /* 1200px 이상 환경에서는 전역 
   여백 크기를 더욱 높힙니다. */
  body {
    padding: 12px 14px;
  }
}

/* DOM에 중첩된 특정 요소 처리 */

div,
p,
#id:first-child {
  background-color: red;
}

div p + p {
  padding-top: 0;
}

주석은 테스트 목적으로 코드의 특정 부분을

일시적으로 "주석 처리"하는 경우에도 유용합니다.

예를 들어서, 코드의 어느 부분에서 오류가

발생했는지 확인하려고 하는 경우, 다음 예제에서는

.special 선택자에 대한 규칙을 주석처리 했습니다.

/*.special {
  color: red;
}*/

p {
  color: blue;
}

CSS에 주석을 추가해 더욱더 익숙해 져야 합니다.

공백(whitespace)

css에서 공백은 실제 공간, 탭 및 줄 바꿈을

의미합니다. HTML과 같은 방식으로 브라우저는

CSS 내부의 많은 공백을 무시하는 경향이 있고,

가독성을 돕기위해 많은 공백이 존재합니다.

아래 첫 번째 예제에서는 각 선언(및 규칙시작/종료)이

각 라인에 있습니다. 이는 CSS를 유지 관리하고

이해하기 쉽기 때문에 CSS를 작성하는 좋은 방법입니다.

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}
@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}
div p {
  margin: 0;
  padding: 1em;
}
div p + p {
  padding-top: 0;
}

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

대부분의 공백을 제거한 상태에서 정확히

동일한 CSS를 작성할 수 있습니다.

이것은 첫번째 예제와 기능적으로 동일하나

읽기가 다소 어렵다는 단점이 있습니다.

예를 들어, 다음 선언은 유효한 CSS입니다:

margin: 0 auto;
padding-left: 10px;

그러나 다음은 유효하지 않습니다:

margin: 0auto;
padding- left: 10px;

참고 문서

CSS 의 구조 | MDN

CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다.

developer.mozilla.org

GitHub - CSS-STR/css-blog-tutorial

Contribute to CSS-STR/css-blog-tutorial development by creating an account on GitHub.

github.com

[CSS] CSS 1강 - CSS 시작하기

Koras02 — Sat, 18 Feb 2023 10:17:39 +0900

이번 시간에는 CSS를 사용하는 방법을 알아보는

시간을 가져보도록 하겠습니다.

HTML로 CSS 시작하기

CSS를 시작하기 위해서는 먼저 HTML 문서를

작성후 그안에 CSS 요소를 작성해야 합니다.

자신의 컴퓨터에서 작업할 경우 아래 코드를

입력후 index.html 파일로 저장해줍니다.

<!DOCTYPE html>
<html lang="ko-KR">

<head>
    <meta charset="UTF-8">
    <title>1-1.CSS-start</title>
</head>

<body>
    <h1>CSS 시작점</h1>

    <p>단락 부분 본문에는 <span>span 요소</span>와 <a href="http://example.com">
            링크</a>가 포함됨</p>

    <ul>
        <li>항목 하나</li>
        <li>항목 둘</li>
        <li>항목 <em>셋</em></li>
    </ul>
</body>

</html>

문서에 CSS 추가하기

문서에 CSS를 추가하기 위해 가장 먼저

해야될 것은 HTML 문서에 사용하려는

CSS 규칙이 있다는 것을 알리는 것 입니다.

CSS를 HTML 문서에 적용하는 방법은

세 가지가 있는데, 지금은 문서의 head에서

연결하는 가장 일반적이고 유용한 방법이

있습니다.

style.css 파일을 index.html에 링크하려면

HTML 문서의 <head> 태그 안에 다음 행을

추가해 줍니다.

 <link rel="stylesheet" href="./css/index.css">

이 <link> 요소는 rel 속성을 사용하는

스타일 시트와 해당 스타일 시트의

위치를 href 속성의 값으로 브라우저에게

알려줍니다. style.css 에 규칙을 추가하여

CSS 가 작동하는지 테스트 할 수 있습니다.

코드 편집기를 사용해 CSS파일에 다음과

같이 추가해줍니다.

h1 {
   color: purple;
}

HTML 및 CSS 파일을 저장하고 웹 브라우저

에서 페이지를 다시 리로드 해줍니다.

문서 상단의 레벨 1 제목은 purple이어야 합니다.

HTML 요소 스타일링

제목을 보라색으로 해 HTML 요소를 대상으로

스타일링을 지정해 주었습니다.

이 작업은 요소 선택자를 대상을 수행됩니다.

문서의 모든 단락을 대상으로 하려면

선택자 p태그를 사용합니다.

모든 단락을 녹색으로 바꾸려면

다음 코드를 입력해 줍니다.

p {
  color: green;
}

선택자를 쉼표로 구분해 여러 선택자를

한 번에 대상으로 지정할 수 있습니다.

모든 단락과 모든 목록 항목을 녹생으로

만드려면 규칙은 다음과 같습니다.

p,li {
  color: green;
}

요소 (elements)의 기본 동작 변경

예제와 같이 간단한 HTML 문서를 살펴보면

기본 스타일을 추가해 브라우저가 HTML을

읽을 수 있게 만드는 방법을 알 수 있습니다.

제목은 크고 대담하며 목록에는 글머리

기호가 있습니다.

이는 브라우저에서 기본 스타일을

포함하는 내부 스타일 시트가 있기 때문에

기본적으로 모든 페이지에 적용됩니다.

종종 브라우저에서 선택한 것 이외의

것을 원하고, 변경하려는 HTML 요소를

선택하고 CSS 규칙을 사용하여

모양을 변경하시면 됩니다.

CSS 규칙을 사용해 모양을 변경하는

예로 ul 태그가 있습니다.

만약 ul 태그 글머리 기호를 없애려면

다음과 같이 제거할 수 있습니다.

li {
  list-style: none;
}

class 추가하기

지금까지 HTML 요소 이름을 기반으로

요소의 스타일을 지정했습니다.

그런데 대부분의 경우에 이렇게 태그로

스타일할 경우 모든 태그 요소들이

스타일링되서 만약 원하는 태그만

스타일링 하려다 모든 태그가 전체

스타일링이 이뤄지는 현상이 발생합니다.

이를 방지하기 위해서는 태그를 사용하지 않고

바로 class요소를 사용해서 css 스타일링을

하시면 되겠습니다.

<ul>
    <li class="special">항목 하나</li>
    <li>항목 둘</li>
    <li>항목 <em>셋</em></li>
</ul>

.special {
  color: rgb(255, 91, 236);
  font-weight: bold;
}

저장 후 새로고침해 결과를 확인해봅니다.

이 목록 항목과 동일한 모양을 원하는

페이지의 모든 요소에 special class를

적용할 수 있습니다.

예를 들어, 단락의 도 주황색과

굵게 표시할 수 있습니다.

special class를 추가한 다음, 페이지를

새로 고침하여 어떻게 되는지 봅시다.

li,
.special {
  color: rgb(255, 91, 236);
  font-weight: bold;
}

이 코드는 spacial class를 가진 모든 li 요소를

대상으로 하는 코드입니다.

이 작업을 수행하려면, 단순히 class를

추가하기만 하면 더이상 calss를 또는

다른 요소에 적용할 수 없습니다.

해당 요소를 선택자 목록에 추가합니다.

li.special,
span.special {
  color: orange;
  font-weight: bold;
}

문서 위치에 따라 스타일 지정하기

문서에서의 위치에 따라 무언가

다르게 보일 때가 있습니다.

이 문서에는 두 개의 요소가

있습니다. 하나는 단락 안에

또 하나는 목록 항목 안에 있습니다.

<li> 요소 안에 중첩된 태그만

선택하려면 descendant combinator라는

선택자를 사용하면 됩니다.

스타일 시트안에 다음과 같은 규칙을

추가해 줍니다.

li em {
  color: royalblue;
}

이 선택자는 <li>의 하위 요소인

요소를 선택합니다.

따라서 예제 문서에서 세 번째

목록 항목의 은 파란색 이지만

단락 안의 항목은 변경되지 않았음을

알 수 있습니다.

HTML의 동일한 계층 구조 수준에서

제목 바로 다음에 오는 단락의 스타일을

지정해 볼 수 있습니다.

이렇게 하려면 선택자 안에 + 를

추가해 주면 됩니다.

h1 + p {
  font-size: 100%;
}

상태에 따른 스타일링

이제 스타일링의 마지막 유형은

상태에 따라서 스타일을 지정할 수

있는 기능입니다.

이에 대한 간단한 예제로 링크 스타일

인데 링크의 스타일을 지정할 떄는

<a> 요소를 대상으로 해야합니다.

링크에 방문했는지 현재 방문 중인지

마우스가 오버 상태인지, 키보드를 통해

포커스 또는 클릭(활성화) 여부에 따라서

각각 상태가 다릅니다.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

사용자가 링크위에 마우스를 올릴때

모양을 변경할 수 있습니다

a:hover {
  text-decoration: none;
}

선택자와 결합자를 결합

여러 선택자와 결합자를 함께 결합할 수

있습니다. 예를 들면 다음과 같습니다.

/* <article> 내부의 <p> 안에 있는 모든 <span> 을 선택합니다  */
article p span { ... }

/* <h1> 바로 뒤에 오는 <ul> 바로 뒤의 모든 <p> 를 선택합니다  */
h1 + ul + p { ... }

여러 유형을 함께 결합 할 수도 있습니다.

코드에 다음과 같이 추가해 줍니다.

body h1 + p .special {
  color: plum;
  background-color: cyan;
  padding: 5px;
}

이것은 <body> 태그 안에 있는

<h1> 바로 뒤에 오는 안에 있는

special 클래스를 가진 요소를

스타일링 해주는 코드입니다.

우리가 제공한 원본 HTML 에서

스타일이 지정된 유일한 요소는

span 태그안에 class 로 선언해준

special 요소입니다.

참고 문서

CSS 로 시작하기 | MDN

이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.

developer.mozilla.org

GitHub - CSS-STR/css-blog-tutorial

Contribute to CSS-STR/css-blog-tutorial development by creating an account on GitHub.

github.com

[Haskell] 하스켈 기초반 6강 - 패턴 매칭과 if 표현식 및 let 바인딩

Koras02 — Fri, 17 Feb 2023 23:01:40 +0900

이번 시간에는 하스켈에 패턴 매칭이라는 것을 배워보고 if 표현식 및 let 바인딩을 알아보겟습니다.

if / then / else

하스켈 문법은 if...then...(else...) 형태의 흔한 조건 표현식을 지원합니다

가령 인자가 a보다 작으면 (-1) 을반환하는 함수를 생각 해보면 인자가 0이면 0을,

인자가 0보다 크면 1을 반환합니다.

그런 일을 하는 signum이라는 함수가 이미 정의되 있지만 설명을 위해서 직접 정의해 봅시다.

mySignum x = 
   if x < 0 
      then - 1
       else if x > 0 
           then 1 
            else 0

이것을 다음과 같이 실행해볼 수 있습니다.

*Main> mySignum 5
1
*Main> mySignum 0
0
*Main> mySignum (5-10)
-1
*Main> mySignum (-1)
-1

마지막의 "-1"을 감싼 괄호는 필수사항으로 이것을 빼먹을 시 시스템은 mySignum에서 1을 뺴려 한다고

생각할 것이고 이것은 타입 불량 현상을 불러 일으킵니다.

if/then/else 구조에서는 맨 처음에 조건식(x < 0)으로 평가됩니다. 그 결과 True이면 구조 전체가

then 표현식으로 평가됩니다. 아니면(조건이 False일 경우) else 표현식으로 평가됩니다.

모든 것은 직관적입니다, 하지만 명령어 언어로 프로그래밍을 해보았다면

하스켈에서는 항상 then과 else 모두를 요구한다는 점이 놀라울 수 있습 니다.

이는 if 구조가 두 경우 모두 어떠한 값을 결과로 내야하기 때문이며,

좀더 명확히 두 경우 모두 같은 타입의 값을 결과로 내야 합니다.

위와 같은 if/ then / else 함수 정의는 가드 문법으로 쉽게 재작성이 가능합니다.

mySignum x 
  | x < 0 = -1
  | x > 0 = 1
  | otherwise = 0

비슷하게, 진위값에 절대값 함수를 if/then/else로 만들 수 있습니다.

abs x = 
       if x < 0 
        then - x 
         else x

왜 가드를 나두고 if를 사용하는지는 직접 프로그래밍 할 때도 보게 되겠지만 조건부를 다루는

각각의 방식은 상황에 따라서 가독성이 더 좋거나 편리합니다. 대부분의 경우 두 방식 모두 잘 작동합니다.

패턴 매칭의 도입

경주자들이 각 경주에서 순위에 따라서 점수를 받는 경쟁에서 통계치를 추적하는 프로그램을

작성하는 것을 생각해봅시다. 점수 규칙은 아래와 같습니다.

승자는 10점
2등 6점
3등 4점
4등 3점
5등 2점
6등 2점
나머지 0점

순위(1등은 정수 1로 나타내는 등)를 받아 흭득한 점수를 반환하는 함수는 쉽게 작성할 수 있습니다.

한가지 해결책은 if/then/else를 사용하는 것 입니다.

pts :: Int -> Int
pts x =
    if x == 1
        then 10
        else if x == 2
            then 6
            else if x == 3
                then 4
                else if x == 4
                    then 3
                    else if x == 5
                        then 2
                        else if x == 6
                            then 1
                            else 0

위 코드를 보면 굉장히 번거로운 언어로 보이지만 더 나은 방법도 존재합니다.

pts :: Int -> Int
pts 1 = 10
pts 2 = 6
pts 3 = 4
pts 4 = 3
pts 5 = 2
pts 6 = 1
pts _ = 0

위보다 훨씬 좋은 방식입니다. 그런데 pts를 이런 식으로 정의하면 분명 코드를 읽는 사람은 이러한 함수가 무엇을 의미하는지 명확히 알 수 있으나 그 문법은 우리가 지금까지 본 하스켈 언어 코드 라고 보기에는 아주 어렵습니다.

왜 pts에 등식이 7개나 있을까요? 좌변의 숫자들은 무엇이며 x는 어디로 간걸까요?

하스켈의 이러한 특성은 패턴 매칭이라고 하며, pts를 호출하면 그 인자는 각 등식의 좌변에 있는 숫자

즉 패턴이라는 것과 비교(매칭)됩니다. 이러한 비교는 등식들을 작성한 순서로 행해집니다.

그래서 인자는 첫번째 등식의 1과 비교됩니다. 인자가 1이라면 맞는 걸 찾는 것이고

첫 번째 등식이 사용됩니다. 따라서 pts 1은 10으로 평가됩니다.

아니면 같은 절차를 따라 다른 등식들도 시도되는데 마지막은 사뭇 다릅니다.

( _ )는 특수 패턴으로, 종종 "와일드 카드"라 불리는데, "아무거나"라고 읽을 수 있습니다.

( _ )는 모든 것과 일치하고 그래서 인자가 앞선 패턴들 중 어느 거솓 일치하지 않으면

pts는 0을 반환합니다. 인자를 나타낼 x 같은 변수가 없는 이유로는, 정의를 작성할 때

그런 게 필요하지 않기 떄문입니다. 여기서 모든 가능한 반환값이 바로 상수입니다.

변수는 정으의 우변과의 관계를 표현하기 위해 사용하는 것으로 우리의 pts 함수에서는

x가 필요없습니다. 그렇지만 변수를 활용하면 pts를 보다 간결히 만들 수 있습니다.

경주자들에게 주어지는 점수는 3등에서 6등까지 균일하게 1점씩 감소합니다.

여기에 착안해서 방정식 7개 중 3개를 제거할 수 있습니다.

pts :: Int -> Int
pts 1 = 10
pts 2 = 6
pts x
    | x <= 6    = 7 - x
    | otherwise = 0

즉 정의의 두가지 스타일을 섞을 수 있습니다. 사실은 등식의 좌변에 pts x라고 쓸때도

패턴 매칭을 이용하고 있는 것 입니다. 패턴으로서 x는 _ 처럼 모든 것과 일치합니다.

유일한 차이점은 우변에서도 그 이름을 쓸 수 있다는 것 입니다.

점수 이외에 패턴 매칭은 여러 타입의 값과 작동합니다. 한가지 유용한 예로 불리언입니다.

가령 진위값에서 만났던 논리합 연산자 ( | | )는 다음과 같이 정의할 수 있습니다.

(||) :: Bool -> Bool -> Bool
False || False = False
_     || _     = True


or 

(||) :: Bool -> Bool -> Bool
True  || _ = True
False || y = y

한 번에 두개 이상의 인자들을 비교하면, 모든 인자가 일치할 떄만 등식이 사용됩니다.

패턴 매칭을 쓸때 잘못될 수 있는 것들을 몇 개 정리해봅시다.

모든 것에 일치하는 패턴을 더 구체적인 패턴의 앞에 놓으면
후자는 무시됨. 그런 경우 GHCi는 패턴 매칭이 중복된다고
에러 메시지를 발생시킴
일치하는 패턴이 하나도 없으면 오류가 발생
통상 패턴들이 모든 경우를 다루도록 하는 게 좋은 생각이며
otherwise 가드가 필수는 아니지만 강력히 권장하고 있음
마지막으로 (&&) 를 여러 방식으로 재정의할 수 있고
이것은 현재 작동하지 않는 버전임

(&&) :: Bool -> Bool -> Bool
x && x = x -- oops!
_ && _ = False

튜플 패턴과 리스트 패턴

위 예제들은 패턴 매칭이 더 우아한 코드 작성에 도움이 된다는 것을 보여주나

패턴 매칭의 중요성은 설명하지 않고 있습니다. 그럼 fst의 정의를 작성하는 문제를

생각해봅시다. 이 함수는 짝의 첫번째 원소를 추출합니다.

지금 시점에는 이는 불가능 한 일 처럼 보이나 짝의 첫 번째 값에 접근하는 유일한 방법은

fst 자체를 이용하는 것이기 떄문입니다.. 그런데 다음 함수는 fst와 같은 일을 합니다.

fst' :: (a, b) -> a
fst' (x, _) = x

등식의 좌변에서 정규 변수를 쓰는 대신 인자를 2-짝의 패턴으로 기입했습니다

즉 변수와 _ 패턴으로 채워진 ( , ) 이며 이 변수는 튜플의 첫 번째 성분과

자동으로 연관되고 등식의 우변에서 이용할 수 있게 됩니다. snd의 정의도

물론 비슷합니다. 위에서 설명한 기교는 리스트에서도 할 수 있습니다.

다음은 head 와 tail의 실제 정의 입니다.

head             :: [a] -> a
head (x:_)       =  x
head []          =  error "Prelude.head: empty list"

tail             :: [a] -> [a]
tail (_:xs)      =  xs
tail []          =  error "Prelude.tail: empty list"

이전 예제와 근본적으로 다른 점은 ( , ) 를 cons 연산자 ( : )의 패턴으로 대체한 것 뿐입니다.

이 함수들도 빈 리스트 [ ] 의 패턴을 활용하는 등식을 포함합니다.

하지만 빈 리스트는 머리나 꼬리가 없기 떄문에 error로 오류 메시지를 출력하는 것 말고는

할 수 있는 것이 없습니다. 요약하면, 패턴 매칭의 진정한 힘은 이것을 이용해 복잡한 값의

일부에 접근할 수 있다는 것입니다.

let 바인딩

let 바인딩을 짧게 소개하자면 let은 지역 선언을 위한 where 절의 대체문입니다.

예를 들어 아래 식을통해 다항식의 해를 구하는 문제를 봅시다.

x의 두 값을 계산하는 다음 함수를 작성할 수 있습니다.

roots a b c =
    ((-b + sqrt(b*b - 4*a*c)) / (2*a),
     (-b - sqrt(b*b - 4*a*c)) / (2*a))

하지만 sqrt(b*b - 4*a*c) 항을 두 번 쓰는 것은 성가시기 떄문에 대신

where 또는 밑에서 설명한 let 선언을 이용해 지역 바인딩이 가능합니다.

roots a b c =
    let sdisc = sqrt (b*b - 4*a*c)
    in  ((-b + sdisc) / (2*a),
         (-b - sdisc) / (2*a))

let 키워드를 선언 앞에 놓고, in을 사용해 함수의 "주" 몸체로 돌아온다는

신호를 보냅니다. 하나의 let...in 블록 내에 여러 선언을 놓을 수 있습니다.

이것들이 같은 양만큼 들여쓰기가 되었는지 확실히 해야합니다.

그렇지 않으면 문법 오류가 발생합니다.

roots a b c =
    let sdisc = sqrt (b*b - 4*a*c)
        twice_a = 2*a
    in  ((-b + sdisc) / twice_a,
         (-b - sdisc) / twice_a)

참고 문서

7 다음 과정

원문: [http://en.wikibooks.org/wiki/Haskell/Next_steps](http://en.wikibooks.org/wiki/Haskell/Next_ste…

wikidocs.net

[CSS] CSS 란 무엇인가? - CSS3의 등장

Koras02 — Fri, 17 Feb 2023 09:50:21 +0900

이번 시간에는 CSS란 무엇인가에 대해 알아보는
시간을 가져보도록 하겠습니다.

CSS란 무엇인가?

CSS는 HTML로 작성된 문서를 실제로
웹 사이트에 표현되는 방법을 정해주는
스타일 시트 언어입니다.

마크업 언어가 웹사이트의 몸체를 담당한다면
CSS는 옷과 악세서리 처럼 꾸미는 역할을
담당한다고 할 수 있습니다.

즉, HTML 구조는 그대로 두면서 CSS 파일만
변경해도 전혀 다른 웹사이트를 구성할 수 있고

현재 개발중인 CSS3의 경우는 그림자 효과,
그라데이션, 변형 등 그래픽 편집 프로그램으로
제작한 이미지를 대체 할 기능이 추가되었습니다.

또한 다양한 애니메이션 기능이 추가되어
어도비 플래시를 어느 정도 대체하고 있습니다.

CSS3 의 역사

css는 1994년 10월 10일 하콤 비움 리(Håkon Wium Lie)가 처음 제안한 언어입니다.

CSS는 지속적으로 새로운 버전이 나오던 언어로
1996년에 도입된 CSS 1은 CSS의 바탕이 되었습니다.

CSS의 표준으로는 CSS 2.1이 있고 이전 버전에
비해 새로운 기능과 도구가 추가되었습니다.

대다수의 웹 브라우저는 CSS3를 지원하고 있으며
현재 W3C에서는 CSS3를 표준으로 하고 있습니다.

CSS1
- 첫 CSS 규격은 공식 W3C에 권고안이 되며
  이름은 CSS1이다.
- 1996년 12월 처음 발표됨
CSS2
- W3C가 개발하였으며 1998년 5월 권고안으로 발표
CSS3
- CSS3는 2005년 12월 5일 이후 개발중에 있는 언어
- W3C CSS3 로드맵은 요약과 도입부를 제공하고 있음
- 전체가 모듈화되어 사용자 에이전트가 모듈에 대한 모든
  모듈을 지원하지 않거나 자유롭게 선택할 수 있도록 함
CSS4
- 하나의 통합된 CSS4는 없으나 여러 개의 모듈로 나뉨
- 하지만 CSS4 자체는 현재 없음

CSS의 문법

CSS는 단순한 문법을 가지고 있으며 수많은
영어 키워드를 사용해 다양한 스타일의
프로퍼티의 이름을 규정합니다.

스타일 시트는 규칙의 목록으로 구성됩니다.
각 규칙이나 규칙 집합은 하나 이상의
셀렉터와 하나의 선언 블록을 이룹니다.

선택자

CSS에서 선택자, 또는 셀렉터(selector)는
어느 부분의 마크업에 스타일을 적용할 지 선언합니다.

태그명(태그의 이름)과 클래스, ID로 선택할 수
있으며 클래스와 ID들은 대소문자로 구분하며

문자로 시작해야 하고 영숫자 또는 언더바(_)를
포함할 수 있습니다. 클래스는 어떠한 요소의
어떠한 수의 인스턴스에도 적용할 수 있고

ID는 하나의 요소에만 적용할 수 있습니다.
ID 값은 앞에 #을 붙이고 클래스는
앞에 ( . )을 붙입니다.

선언 블록

선언 블록은 괄호로 이루어진 선언들의
목록으로 이루어집니다.

각 선언은 프로퍼티 쌍점( : )의 값으로 구성되고
한 블록 안 여러 선언이 있으며

쌍반점( ; , 세미콜론)이 개개의 각 선언에
삽입되어야 하며 단 하나의 선언이라도
세미콜론을 넣지 않으면 동작하지 않습니다.

CSS 라이브러리

CSS 라이브러리는 웹 사이트의 디자인을
빠르게 선택할 수 있는 라이브러리와 기능을
보완해주는 라이브러리로 구성되어 있습니다.

디자인 라이브러리
- BootStrap
- Semantic-UI
- W3.CSS
- W3 Schools
기능 보완 라이브러리
- Prefix Free
- Fontello

참고 자료

CSS - 나무위키

CSS 라이브러리는 웹 사이트의 디자인을 빠르게 선택할 수 있는 라이브러리와 기능을 보완해주는 라이브러리로 구성되어 있다. 디자인 라이브러리BootstrapCSS를 주로 사용하는 유명한 라이브러리

namu.wiki

CSS - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 종속형 시트 또는 캐스케이딩 스타일 시트(영어: Cascading Style Sheet)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(영어: Style sheet language 스타일

ko.wikipedia.org

[Redis] Redis - Redis 집합

Koras02 — Fri, 17 Feb 2023 01:45:03 +0900

이번 시간에는 Redis 집합체에 대해 알아보도록 하겠습니다.

Redis Sets

Redis Sets이란 고유 문자열(구성원)의 순서

없는 집합을 의미합니다.

Redis Sets를 사용하여 다음 작업을 효율적으로

수행할 수 있습니다.

고유 항목 추적(예: 지정된 블로그에 게시물을 엑세스하는
모든 고유 IP 주소 추적)
관계(예: 주어진 역할을 가진 모든 사용자 집합)를 나타냄
교차점, 결합 및 차이와 같은 공통 집합 연산을 수행

Redis Sets 사용

다음과 같이 사용자 123 및 456의 즐겨찾기 부분에

사용자가 읽을 책 ID 집합을 저장합니다.

> SADD user:123:favorites 347
(integer) 1
> SADD user:123:favorites 561
(integer) 1
> SADD user:123:favorites 742
(integer) 1
> SADD user:456:favorites 561
(integer) 1

아래와 같이 사용자 123이 742번과 299번 책을

좋아하는지 확인할 수 있습니다.

> SISMEMBER user:123:favorites 742
(integer) 1
> SISMEMBER user:123:favorites 299
(integer) 0

사용자 123과 456번은 공통적으로 좋아하는

책이 있는지 확인할 수 있습니다.

> SINTER user:123:favorites user:456:favorites
1) "561"

123 사용자가 선호하는 책은 몇 권인지도 확인할 수 있습니다.

> SCARD user:123:favorites
(integer) 3

Redis 집합 최대크기

Redis 집합의 최대 크기는 2^32 - 1(4,294,967,295) 맴버 입니다.

Redis 집합 명령어

SADD: 집합에 새 맴버을 추가
SREM: 집합에서 지정된 맴버를 제거
SISMEMBER: 설정된 구성원 자격에 대한 문자열 테스트
SINTER: 두 개 이상의 집합이 공통으로 갖는 맴버 집합(교차점)을 반환
SCARD: 집합의 크기(cardinality)를 반환

성능

항목이 설정으로 맴버 여부를 추가 제거 확인하는 것을

포함해 대부분의 설정 작업은 O(1) 입니다.

이것은 수십만 명 이상의 회원을 가진 대형

사이트의 경우에 매우 효율적인 시스템 입니다.

단 SMEMBERS 명령어를 실행할 떄는

주의 사항이 있습니다.

이 명령은 O(n)으로 단일 응답으로

전체 집합을 반환합니다.

또는 세트의 모든 구성원을 반복적으로

검색하고 싶다면 SSAN을 사용하면 됩니다.

집합 명령어를 대체하려면?

대용량 데이터 세트(or 스트리밍 데이터)에서

많은 메모리를 사용할 수 있는 구성원 자격

검사를 설정하면 됩니다.

만약 메모리 사용량이 걱정되고 완변한 정밀도가

필요하지 않을 경우 BloomFilter 또는 CuckooFilter

대안으로 사용하면 됩니다.

Redis Sets는 인덱스의 일종으로 자주 사용됩니다.

데이터를 인덱싱하고 쿼리해야 할 경우에는

RedisSearch 및 RedisJ를 사용합니다.

참고 문서

Redis sets

Introduction to Redis sets

redis.io

[HTML] HTML - 32. 마무리

Koras02 — Fri, 17 Feb 2023 01:12:45 +0900

이로써 HTML5는 모든 기초 요소를 알아보았습니다.

HTML5는 굉장히 오랜 역사를 지녔고

HTML5를 이어 프론트엔드 백엔드 언어들이

무수히 많이 등장했습니다.

여러분이 HTML로 내가 사이트의 레이아웃을

을 태그로 구성할 수 있다면 구성 후

레이아웃을 꾸며줄 언어가 필요하겠죠?

그것을 이어주는 것이 바로 다음 언어인

CSS입니다. CSS는 다소 평범한 태그로만

구성된 HTML을 조금 더 섬세하게 구며주는

언어라고 보시면 됩니다.

CSS를 이어서 Scss와 Styled-components등

무수히 많은 css 라이브러리가 탄생했습니다.

CSS를 배운 뒤 최종 단계는 Javascript입니다.

javascript는 HTML로 레이아웃을 CSS로

스타일을 작성후 최종적으로 동작을

구성하는 언어입니다.

이 세 가지 언어는 웹 프로그래밍을 하기 위한

필수적으로 배워야할 언어 3가지 입니다.

총평

HTML은 참고 문서를 몇개만 보아도 굉장히

쉽고 이해하기 간편한 언어입니다.

HTML 현재 기준으로 28년이나된

언어로 아주 오래된 언어입니다.

아주 예전에는 HTML 하나를 배우기 위해

수많은 언어를 책으로 분석했지만

기술이 매우 발달된 현재는 인터넷에 참고 문서

몇가지만 봐도 이해가 쉬울 것입니다.

[HTML] HTML - 31.HTML5 그래픽 - SVG 요소

Koras02 — Mon, 13 Feb 2023 22:33:35 +0900

이번 시간에는 HTML5의 그래픽 요소인 SVG 요소에

대해 알아보도록 하겠습니다.

SVG 요소

svg 요소는 Scalable Vector Graphics를 의미하며 XML 기반의 W3C 그래픽 표준 권고안 입니다.

기존에 사용해 왔던 canvas 요소로는 백터(vector) 이미지를 표현할 수 없습니다.

하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 백터 이미지를 표현할 수 없게 해줍니다.

따라서 이 요소로는 도표나 그래프 등 백터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다

svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.

사각형 그리기

다음 예제로는 rect 요소를 사용하여 사각형을 그리는 예제입니다.

<svg width="200" height="150">
   <rect width="200" height="150" stroke="orange" stroke-width="5" fill="yellow" />
    이 문장은 사용자가 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다.
</svg>

사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다.

위와 같이 각각의 속성을 사용하여 설정할 수 있으며,

다음 예제와 같이 style 속성을 사용하여 한번에 설정할 수도 있습니다.

<svg width="200" height="150">
   <rect width="200" height="150" style="stroke:orange; stroke-width:5; fill:yellow; opacity:1;" />
   이 문장은 사용자가 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다.
</svg>

rect 요소에 x,y,rx,ry 속성을 추가해 모서리가 둥근 사각형을 그릴 수 있습니다.

<svg width="250" height="200">
   <rect width="200" height="150" x="20" y="20" rx="20" ry="20" 
    stroke="purple" stroke-width="10" fill="blue" />
</svg>

모서리가 둥근 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다.

선 그리기

다음 예제는 line 요소를 사용하여 선을 그리는 예제입니다.

<svg width="250" height="200">
    <line x1="50" y1="50" x2="200" y2="150" stroke="orange" stroke-width="5"/>
</svg>

선을 그리는데 사용하는 line 요소의 속성을 다음과 같습니다.

원 그리기

다음 예제는 circle 요소를 사용하여 원을 그리는 예제입니다.

<svg width="300" height="300">
   <circle cx="150" cy="120" r="100" stroke="orange" stroke-width="5" fill="yello" />
</svg>

원을 그리는데 사용하는 circle 요소의 속성은 다음과 같습니다.

타원 그리기

다음 예제는 ellipse 요소를 사용하여 타원을 그리는 예제입니다.

<svg width="300" height="300">
    <ellipse cx="150" cy="100" rx="120" ry="70" stroke="orange" stroke-width="5" fill="yellow"/>
</svg>

타원을 그리는데 사용하는 ellipse 요소의 속성은 다음과 같습니다.

다각형 그리기

다음 예제는 polygon 요소를 사용하여 별모양의 다각형을 그리는 예제입니다.

<svg width="300" height="300">
  <polygon points="10,100 190,100 30,200 100,40 170,200"
    stroke="orange" stroke-width="5" fill="yellow" />
</svg>

다각형을 그리는데 사용하는 polygon 요소의 속성은 다음과 같습니다.

points 속성은 다각형을 이루는 각 꼭짓점의 x좌표와 y좌표를 명시합니다.

이때 첫 번째 꼭짓점부터 시작하여 마지막 꼭짓점까지 차례대로

선으로 연결되어 다각형을 표현하게 됩니다.

참고 자료

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to HTML5-STR/html-study development by creating an account on GitHub.

github.com

[Rust] Rust 개념 - 1.보편적인 프로그래밍 개념 - 데이터 타입들

Koras02 — Sun, 12 Feb 2023 10:40:01 +0900

이번 시간에는 Rust의 보편적인 프로그래밍 개념인

데이터 타입들에 대해 알아보도록 하겠습니다.

Rust의 데이터 타입들

Rust에서 사용되는 모든 값들은 어떠한 타입을

가지고 있습니다. 그러니 어떤 형태의 데이터인지

명시하여 Rust에게 알려주면서 이를 통해 데이터를

어떻게 다룰 것인지 알수 있도록 해야 합니다.

이번 장에서는 언어에 포함되어 있는

여러 타입들을 살펴보고자 합니다.

타입은 크게 스칼라와 컴파운드 둘로 나뉠 수 있습니다.

이번 장에서 전체에 걸쳐 명심해야 함 점은 Rust는

타입이 고정된 언어라는 점 입니다.

이것이 의미하는 바는 모든 변수의 타입이

컴파일 시 반드시 정해져 있어야 한다는 겁니다.

보통 컴파일러는 우리가 값을 사용하는 지에

따라서 타입을 추측할 수 있습니다.

이번 장에서는 String을 parse를 사용해

숫자로 변환했던 경우처럼 타입의 선택 폭이

넒은 경우는 반드시 타입의 명시를 첨가해야 합니다.

let guess: u32 = "42".parse().expect("Not a Number!");

여기서 타입 명시를 첨가하지 않은 경우

Rust에서는 다음과 같은 에러가 발생합니다.

이와 같은 에러는 컴파일러가 우리에게

사용하고 싶은 타입이 무엇인지 추가적인

정보를 요구하는 것 입니다.

warning: unused variable: `guess`
 --> src/main.rs:3:9
  |
3 |     let guess: u32 = "42".parse().expect("Not a Number");
  |         ^^^^^ help: if this is intentional, prefix it with an underscore: `_guess`
  |

우리가 다루고자 하는 다양한 데이터 타입들

각각의 타입 명시를 살펴봅시다.

스칼라 타입들

스칼라는 하나의 값으로 표현되는 타입입니다.

Rust는 정수형, 부동소수점 숫자, boolean 그리고

문자 총 4가지 스칼라 타입들을 보유하고 있습니다.

아마 다른 프로그래밍에서도 본 적이 있겠지만

Rust에서 어떻게 동작하는지를 살펴봅시다.

정수형 타입

정수형은 소수점이 없는 숫자로 우리가 앞서

u32 타입인 정수형을 사용해 보았습니다.

해당 타입의 선언은 부호 없는 32비트

변수임을 나타냅니다.

변수와 가변성 파트에는 Rust에서

사용되는 정수형들을 알아보았습니다.

부호, 미부호로 나뉜 다른 열의 타입을

사용하여(i16처럼) 정수 값의 타입을

선언할 수 있습니다.

각각의 타입은 부호 혹은 미부호이며 명시된 크기를 갖습니다.

부호 혹은 미부호의 의미는 숫자가 양수 혹은 음수를

다룰 수 있는지 없는지를 나타냅니다.

다르게 말하자면 숫자가 부호를 가져야 하는 경우

(부호)혹은 오직 양수만을 가질 것이기에

부호가 없이도 표현할 수 있는가(미부호)를 나타냅니다.

종이에 숫자를 기재하는 것과 같습니다.

부호와 함께 다뤄야 하는 경우 숫자는 더하기

혹은 빼기 기호와 함께 표시합니다.

숫자가 양수라고 가정해도 문제 없는 상황에는

부호 없이 표시하게 됩니다.

부호된 숫자는 2의 보수 형태를 사용해

저장됩니다.

각 부호 변수는 $(2^{n-1})$ 부터 $2^{n-1} -1$

까지의 값을 포과합니다.

여기서 n부분은 사용되는 타입의 비트 수로

즉 i8은 $(2^7)$ 에서 $2^7 - 1$ 까지의 값

즉 -128 에서 127 까지의 값들을

저장할 수 있습니다.

미부호 타입은 0에서 $2^n -1 까지의 값을

저장할 수 있습니다.

즉, u8 타입은 0에서 $2^8 - 1 다시말해

0에서 255 까지의 값을 저장할 수 있습니다.

추가로 isize와 usize 타입은 당신이

프로그램이 동작하는 컴퓨터 환경이 64-bit인지

아닌지에 따라 결정됩니다.

64-bit 아키텍쳐라면 64bit를, 32-bit 아키텍쳐라면

32bit를 가지게 됩니다.

정수형 리터럴도 사용할 수 있는데

byte 리터럴을 제외하고 모든 정수형 리터럴은

57u8과 같은 타입 접미사와 1_000과 같이

시각적인 구분을 위한 ...의 사용을 허용합니다.

위 사진은 Rust의 정수형 리터럴들을 정리한

사진입니다.

그렇다면 어떤 타입의 정수를 사용해야 할까요?

확실하게 정해진 경우가 아닌 이상

Rust의 기본 값인 i32가 일반적으로는 좋은 선택입니다.

이는 일반적으로 가장 빠르기 때문입니다.

심지어 64-bit 시스템에서도 빠릅니다.

isize나 usize는 주로 일부 콜랙션 타입의 색인에 사용됩니다.

부동 소수점 타입

Rust에는 소수점을 갖는 숫자인 부동소수점 숫자를

위한 두 가지 기본 타입도 있습니다.

Rust의 부동소수점 타입은 f32와 f64로 서로 각각

32bit와 64bit의 크기를 갖습니다.

기본 타입은 f64로 그 이유에 대해서는 최신 CPU상

f64가 f32와 대략 비슷한 속도를 내면서도

더 정밀한 표현이 가능하기 때문입니다.

다음은 부동소수점 숫자가 활용되는 예제입니다.

src/main.rs

fn main() {
    let x = 2.0; // f64

    let y: f32 = 3.0; // f32
}

부동소수점 숫자는 IEEE-754 표준에 따라서 표현됩니다.

f32 타입은 1배수의 정밀도인 부동소수점이고

f64는 2배수의 정밀도인 부동소수점입니다.

수학적 연산들

Rust가 지원하는 일반적인 기본 수학적 연산은

모든 숫자 타입에 적용됩니다.

더하기,빼기,곱하기, 나누기 등등 다음의

코드를 보여주려는 것은 각각 let 문에서

사용할 수 있는 방법입니다.

fn main() {
    // addtion 
    let sum = 5 + 10;

    // subtraction        
    let difference = 95.5 - 4.3;

    // multiplication
    let product = 4 * 50;

    // division 
    let quotitent = 45.5 / 23.1;

    // remainder
    let remainer = 50 % 4
}

위 문장에서 각 표현식들은 수학 연산자를 사용해

산출된 값을 변수로 bound 합니다.

Boolean 타입

대부분의 다른 언어들처럼, boolean 타입은 Rust에서

둘 중 하나의 값만 가질 수 있습니다.

true 와 false, boolean 타입은 러스트에서

bool로 명시됩니다.

fn main() {
    let t = true;

    let f: bool = false; // with explicit type annotation
}

boolean 값을 사용하는 주된 방법은 if문과 같은

조건문에서 조건으로 사용하는 것 입니다.

우리는 if문이 Rust에서 동작하는 방식을

"제어 흐름"장에서 다룹니다.

문자 타입

지금까지 숫자 타입만을 살펴보았고

Rust 문자 또한 지원됩니다.

Rust의 char는 이 언어의 가장 근본적인

알파벳 타입이며, 다음의 코드는 이를

사용하는 한 가지 방법입니다.

스트링이 큰 따옴표를 쓰는 것에 반하여

char 타입은 작은 따옴표로 쓰는 점을

주목해야 합니다.

Filename: src/main.rs

fn main() {
    let c = 'z';
    let z = 'Z';
    let heart_eyed_cat = ' '
}

Rust의 char 타입은 Unicode Scalar를 표현하는

것이고 이는 ASCII 보다 많은 표현이 가능합니다.

억양 표시가 있는 문자, 한국어/중국어/일본어

표의 문자, 이모티콘, 넓이가 0인 공백문자

모두가 Rust에서 char 타입으로 사용할 수

있습니다.

Unicode Scalar 값의 범위는 U+0000에서

U+D7FF 그리고 U+E000에서 U+10FFFF로

포괄합니다.

그럼에도 불구하고 "문자"는 Unicode를

위한 개념이 아니기 때문에

당신의 인간적 직관에 따라 "문자"와

Rust의 char이 동일하지 않을 수 있습니다.

복합 타입들

복합 타입들은 다른 타입의 다양한 값들을

하나의 타입으로 묶을 수 있습니다.

Rust는 두 개의 기본 타입을 가지고 있습니다.

튜플
배열

값들을 집합시켜 튜플화

튜플은 다양한 타입의 몇 개의 숫자를

집합시켜 하나의 복합 타입으로 만드는

일반적인 방법입니다.

우리는 괄호 안에 콤마로 구분되는 값들의

목록을 작성해 튜플을 만들 것 입니다.

튜플에 포함되는 각 값의 타입이

동일할 필요없이 서로 달라도 됩니다.

다음 예제에 우리는 선택 사항인

타입 명시를 추가합니다.

fn main() {
    let tup: (i32, f64, u8) = (500, 6.4, 1);
}

튜플은 단일 요소를 위한 복합계로

고려되었기에 변수 tup에는 튜플 전체가

bind가 됩니다.

개별 값을 튜플의 밖으로 빼내오기 위해서는

패턴 매칭을 사용해 튜플의 값을

구조해체 시키면 됩니다.

fn main() {
    let tup = (500, 6.4, 1);

    let (x , y, z) = tup;

    println!("The value of y is: {}", y);
}

해당 프로그램은 처음에 튜플을 만들고

변수 tup에 bind 시킵니다.

이후 패턴과 let을 통해 tup을 세개의

분리된 변수 x, y, 그리고 z에 이동시킵니다.

이것을 구조해체라고 부르는 이유는

하나의 튜플을 세부분으로 나누기 때문입니다.

최종적으로 프로그램은 y의 값을

출력할 것이고 이는 6.4입니다.

패턴 매칭을 통한 구조해체에 추가로

우리는 마침표( . ) 뒤에 우리가 접근할 값의

색인을 넣는 것을 통해 튜플의 요소에

직접적으로 접근할 수 있습니다.

fn main() {
    let x: (i32, f64, u8) = (500, 6.4, 1);

    let five_bundred = x.0;

    let six_point_four = x.1;

    let one = x.2;
}

위 프로그램은 튜플 x를 만들고, 이의 각 요소들을

그들의 색인을 통해 접근해 새 변수를 만듭니다.

대부분의 언어가 그렇듯이 튜플의 첫번째

색인은 0입니다.

배열

여러 값들의 집합체를 만드는 다른 방법은

배열입니다. 튜플과는 다르게 배열의 모든 요소는

모두 같은 타입이어야 합니다.

Rust의 배열이 몇 다른 언어들의 배열과

다른 점은 Rust에서는 배열은 고정된 길이를

갖는다는 점입니다.

한번 선언되면 이들은 크기는 커지거나

작아지지 않습니다.

Rust에서 대괄호 안에 값들을 콤마로

구분하여 나열해 배열을 만듭니다.

fn main() {
    let a = [1, 2, 3, 4, 5];
}

배열이 유용할 떄는 데이터를 heap보다

stack에 할당하는 것은 원하거나

항상 고정된 숫자의 요소를 갖는다고

확신하고 싶을때 입니다.

이들은 백터 타입처럼 가변적이지 않고

백터 타입은 유사 집합체로 표준 라이브러리에서

제공되며 확장 혹은 축소가 가능합니다.

배열이나 백터 중에 뭘 선택해야 할지

확실하지 않은 상황이라면 백터를 사용합니다.

백터가 아닌 배열을 선택할 경우 예로

프로그램이 올해의 달 이름을 알고자 할 경우

프로그램은 달을 추가하거나 삭제하는 경우가

거의 없을 것이므로, 고정적으로 12개의 아이템을

가질테니 배열을 사용하면 됩니다.

let months = ["January", "February", "March", "April", "May", "June", "July",
        "August", "September", "October", "November", "December"];

배열 요소에 접근하기

배열은 stack에 단일 메모리 뭉치로 할당됩니다.

우리는 색인을 통해 배열의 요소에 접근할 수 있습니다.

fn main() {
    let a = [1,2,3,4,5];

    let first = a[0];
    let second = a[1];

}

이번 예제에서, first로 명명된 변수는 값 1이 될텐데

이유는 배열 색인 [0]에 들어있는 값이기 때문입니다.

second로 명명된 변수는 배열의 색인

[1]의 값인 2가 됩니다.

유효하지 않는 배열 요소에 대한 접근

만약 우리가 배열의 끝을 넘어선 요소에 접근하려고

하면 어떻게 될까요? 다음 예제에서 살펴봅시다.

fn main() {
    let a = [1, 2, 3, 4, 5];
    let index = 10;

    let element = a[index];

    println!("The value of element is: {}", element);
}

이번 코드를 cargo run을 통해 동작하면 다음과

같은 결과가 출력됩니다.

error: this operation will panic at runtime
  --> src/main.rs:99:19
   |
99 |     let element = a[index];
   |                   ^^^^^^^^ index out of bounds: the length is 5 but the index is 10
   |

컴파일 시에는 아무런 에러도 발생하지 않았지만

프로그램의 결과는 실행 중에 에러가 발생했고

성공적으로 종료되지 못했다고 뜹니다.

색인을 사용해 요소에 접근하려고 하면 Rust가

지정한 색인이 배열 길이보다 작은지 확인합니다.

색인이 길이보다 길다면 Rust는 프로그램이

오류와 함께 종료 될 때 Rust 가 사용하는 용어인

"패닉(panic)"을 합니다.

이것은 Rust의 안전 원칙이 동작하는 첫번째 예로

많은 저수준 언어에서 이러한 타입의 검사는

수행되지 않으며 잘못된 색인을 제공하면

유효하지 않은 메모리에 엑세스 할 수 있습니다.

Rust는 메모리 접근을 허용하고 계속 진행하는

대신 즉시 종료하여 이러한 종류의 오류로부터

사용자를 보호 합니다.

참고 자료

데이터 타입들 - The Rust Programming Language

Rust에서 사용되는 모든 값들은 어떤 타입을 갖습니다. 그러니 어떤 형태의 데이터인지 명시하여 Rust에게 알려줘서 이를 통해 데이터를 어떻게 다룰지 알 수 있도록 해야 합니다. 이번 장에서, 우

rinthel.github.io

GitHub - Koras02/Rust-variables: 러스트 보편적인 프로그래밍 개념

러스트 보편적인 프로그래밍 개념 . Contribute to Koras02/Rust-variables development by creating an account on GitHub.

github.com

[HTML] HTML - 30.HTML5 그래픽 - Canvas 요소

Koras02 — Sat, 11 Feb 2023 23:26:38 +0900

이번 시간에는 HTML5의 그래픽 요소인 Canvas 요소를

알아보는 시간을 가져보도록 하겠습니다.

Canvas 요소

HTML5의 canvas 요소는 웹 페이지에 그래픽을 그려주는

쉽고 강력한 방법을 제공하는 요소입니다.

이 요소로는 그래픽을 위한 컨테이너(container)만

수행합니다. 따라서 실제로 그래픽을 그리기 위해서는

자바스크립트(Javascript) 등의 스크립트 언어를

이용해야 합니다.

canvas 요소를 지원하는 주요 웹 브라우저

버전은 다음과 같습니다.

canvas 요소의 속성

canvas 요소는 테두리(border)도 콘텐츠(content) 도 없는

웹 페이지 내의 단순한 사각형의 공간으로

반드시 style 속성을 이용해 캔버스의 크기를 설정해야

합니다. 또한 canvas 요소를 스크립트(script) 에서

접근하기 위해서는 해당 요소의 id 속성을 이용합니다.

<canvas id="drawCanvas">
  이 문장은 사용자의 웹 브라우저가 canvas 요소를 지원하지 않을 시 나타남
</canvas>

CSS 좌표 체계

HTML 그래픽 요소에서 사용하는 x,y,z 좌표는

다음 그림과 같은 좌표 체계를 따릅니다.

CSS 좌표 체계에서 기준점은 브라우저의 왼쪽 상단입니다.

또한, 각 좌표측의 화살표 방향이 양의 방향으로

반대쪽이 음의 방향을 가리킵니다.

사각형 그리기

캔버스를 정의한 후에는 스크립트를 이용해

canvas 요소에 그래픽을 그릴 수 있습니다.

다음 예제로 스크립트를 이용해 canvas 요소에

사각형을 그리는 예제입니다.

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

위 예제에서 사각형을 그리는 데 사용된

함수들은 다음 순서대로 인수를 전달받습니다.

사각형의 왼쪽 위 꼭짓점의 x좌표
사각형의 왼쪽 위 꼭짓점의 y좌표
사각형의 너비
사각형의 높이

사각형을 그리는데 사용되는 스크립트 함수는

다음과 같습니다.

선 그리기

다음 예제는 스크립트를 이용하여 canvas 요소에

선을 그리는 예제입니다.

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.stroke();

선을 그리는데 사용하는 스크립트 함수는

다음과 같습니다.

이러한 선 그리기를 이용하면 도형을 직접 만들 수도

있으며 만든 도형에 색을 채울 수 있습니다.

context.moveTo(0, 0);
context.lineTo(300, 100);
context.lineTo(150, 150);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

위 예제에서는 우선 moveTo() 함수와 lineTo() 함수를

이용하여 선 그리기로 도형을 만든 후

fillStyle() 함수로 원하는 색상을 지정하고나서

fill() 함수를 사용해 만든 도형에 색을 칠하게 됩니다.

원 그리기

다음 예제로는 스크립트를 이용해 canvas 요소에

원을 그리는 예제입니다.

context.beginPath();
context.arc(150, 100, 50, 0, 2 * Math.PI);
context.stroke();

위 예제에 사용된 arc() 함수는 다음 순서대로

인수를 전달 받습니다.

원의 중심 x 좌표
원의 중심 y 좌표
원의 반지름
원호를 그리기 시작할 각도
원호 그리기를 마칠 각도

원을 그리는데 사용하는 스크립트 함수는

다음과 같습니다.

이러한 원 그리기를 이용하면 원호 또한

간단히 만들 수 있습니다.

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

텍스트(text) 그리기

다음 예제로는 스크립트를 이용하여

canvas 요소에 텍스트를 그리는 예제입니다.

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

위 예제에서 텍스트를 그릴 때 사용된 함수들은

다음 순서대로 인수를 전달 받습니다.

canvas 요소에 그릴 텍스트의 내용
텍스트의 왼쪽 위 꼭짓점의 x 좌표
텍스트의 왼쪽 위 꼭짓점의 y 좌표

텍스트를 그리는데 사용되는 스크립트 함수는

다음과 같습니다.

그래디언트(gradient) 그리기

다음 예제는 스크립트를 이용해 canvas 요소에

선형 그래디언트를 그리는 예제입니다.

let gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

위 예제에 사용된 createLinearGradient() 함수는

다음 순서대로 인수를 전달받습니다.

선형 그래디언트가 시작하는 점의 x좌표
선형 그래디언트가 시작하는 점의 y좌표
선형 그래디언트가 끝나는 점의 x좌표
선형 그래디언트가 끝나는 점의 y좌표

이렇게 createLinearGradient() 함수를 사용하여

선형 그래디언트를 생성합니다.

이때 addColorStop() 함수를 사용하여 그래디언트에

사용될 색상을 명시할 수 있습니다.

또한, 이렇게 생성된 그래디언트는 fillStyle이나

storkeStyle 속성을 이용하여 그릴 수 있습니다.

다음 예제는 스크립트를 이용하여 canvas 요소에

원형 그래디언트를 그리는 예제입니다.

let gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

위 예제에 사용된 createRedialGradient() 함수는

다음 순서대로 인수를 전달받습니다.

원형 그래디언트가 시작하는 원의 중심 x좌표
원형 그래디언트가 시작하는 원의 중심 y좌표
원형 그래디언트가 시작하는 원의 반지름
원형 그래디언트가 끝나는 원의 중심 x좌표
원형 그래디언트가 끝나는 원의 중심 y좌표
원형 그래디언트가 끝나는 원의 반지름

그래디언트(gradient)를 그리는데 사용하는 스크립트

함수는 다음과 같습니다.

이미지 그리기

다음 예제로는 스크립트를 이용해 canvas 요소에

이미지를 그리는 예제입니다.

<p><button onclick="drawImage()">이미지 그리기</button></p>
...
<script>
    function drawImage() {
        var srcImg = document.getElementById("Monalisa");
        context.drawImage(srcImg, 10, 10);
    }
</script>

위 예제에서 사용된 drawImage() 함수는

다음 순서대로 인수를 전달 받습니다.

canvas 요소에 그릴 이미지의 주소
이미지의 왼쪽 위 꼭짓점의 x좌표
이미지의 왼쪽 위 꼭짓점의 y좌표

이미지를 그리는데 사용하는 스크립트 함수는

다음과 같습니다.

참고 자료

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

GitHub - HTML5-STR/html-study: html 블로그 작성용 - study1

html 블로그 작성용 - study1. Contribute to HTML5-STR/html-study development by creating an account on GitHub.

github.com