전체 글

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

이번 시간에서는 브라우저가 CSS와 HTML을 가져와서 웹 페이지를 만드는 방법을 살펴 보도록 하겠습니다. CSS는 실제로 어떻게 작동하는가? 브라우저가 웹 페이지에 문서를 표시할 때 문서의 콘텐츠와 해당 스타일 정보를 서로 결합해야 합니다. 아래 나열된 여러단계로 문서를 처리합니다 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매운 단순화된 버전으로 다른 브라우저가 다른 방식으로 작업을 처리하는다는 점을 명심하시면 됩니다. 브라우저는 HTML(ex.네트워크에서 HTML 수신)을 로드 HTML을 DOM(Document Object Model)로 변환함 DOM은 컴퓨터 메모리의 문서를 나타내는 요소 그 다음 브라우저는 포함된 이미지 및 비디오와 같은 HTML 문서에 연결된 대부분의 리소스와 연결..

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

이번 시간에는 CSS의 언어 자체 구조를 조금 더 깊이 살펴볼 시간을 가져봅시다. HTML에 CSS 적용하기 가장 먼저 살펴볼 부분은 CSS를 문서내에 적용하는 세 가지 방법입니다. 외부 스타일 시트 CSS를 시작하기 앞서 외부 스타일 시트를 페이지에 연결했습니다. CSS를 여러 페이지에 연결할 수 있으며,CSS를 문서에 첨부 하는 가장 일반적이고 유용한 방법이며 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있습니다. 대부분의 경우 사이트의 다른 페이지는 모두 동일하게 보이기 때문에 기본 모양과 느낌에 동일한 규칙을 사용할 수 있습니다. 외부 스타일 시트는 CSS 확장자가 .css인 별도의 파일로 작성하고, HTML의 요소 에서 참조하는 경우입니다. Hello World! CSS first ex..

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

이번 시간에는 CSS를 사용하는 방법을 알아보는 시간을 가져보도록 하겠습니다. HTML로 CSS 시작하기 CSS를 시작하기 위해서는 먼저 HTML 문서를 작성후 그안에 CSS 요소를 작성해야 합니다. 자신의 컴퓨터에서 작업할 경우 아래 코드를 입력후 index.html 파일로 저장해줍니다. CSS 시작점 단락 부분 본문에는 span 요소와 링크가 포함됨 항목 하나 항목 둘 항목 셋 문서에 CSS 추가하기 문서에 CSS를 추가하기 위해 가장 먼저 해야될 것은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것 입니다. CSS를 HTML 문서에 적용하는 방법은 세 가지가 있는데, 지금은 문서의 head에서 연결하는 가장 일반적이고 유용한 방법이 있습니다. style.css 파일을 index.ht..

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

이번 시간에는 하스켈에 패턴 매칭이라는 것을 배워보고 if 표현식 및 let 바인딩을 알아보겟습니다. if / then / else 하스켈 문법은 if...then...(else...) 형태의 흔한 조건 표현식을 지원합니다 가령 인자가 a보다 작으면 (-1) 을반환하는 함수를 생각 해보면 인자가 0이면 0을, 인자가 0보다 크면 1을 반환합니다. 그런 일을 하는 signum이라는 함수가 이미 정의되 있지만 설명을 위해서 직접 정의해 봅시다. mySignum x = if x 0 then 1 else 0 이것을 다음과 같이 실행해볼 수 있습니다. *Main> mySignum 5 1 *Main> mySignum 0 0 *Main> mySignum (5-10) -1 ..

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

이번 시간에는 CSS란 무엇인가에 대해 알아보는 시간을 가져보도록 하겠습니다. CSS란 무엇인가? CSS는 HTML로 작성된 문서를 실제로 웹 사이트에 표현되는 방법을 정해주는 스타일 시트 언어입니다. 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 악세서리 처럼 꾸미는 역할을 담당한다고 할 수 있습니다. 즉, HTML 구조는 그대로 두면서 CSS 파일만 변경해도 전혀 다른 웹사이트를 구성할 수 있고 현재 개발중인 CSS3의 경우는 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체 할 기능이 추가되었습니다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있습니다. CSS3 의 역사 css는 1994년 10월 10일 하콤 비움 리(Håk..

[Redis] Redis - Redis 집합

이번 시간에는 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 > S..

[HTML] HTML - 32. 마무리

이로써 HTML5는 모든 기초 요소를 알아보았습니다. HTML5는 굉장히 오랜 역사를 지녔고 HTML5를 이어 프론트엔드 백엔드 언어들이 무수히 많이 등장했습니다. 여러분이 HTML로 내가 사이트의 레이아웃을 을 태그로 구성할 수 있다면 구성 후 레이아웃을 꾸며줄 언어가 필요하겠죠? 그것을 이어주는 것이 바로 다음 언어인 CSS입니다. CSS는 다소 평범한 태그로만 구성된 HTML을 조금 더 섬세하게 구며주는 언어라고 보시면 됩니다. CSS를 이어서 Scss와 Styled-components등 무수히 많은 css 라이브러리가 탄생했습니다. CSS를 배운 뒤 최종 단계는 Javascript입니다. javascript는 HTML로 레이아웃을 CSS로 스타일을 작성후 최종적으로 동작을 구성하는 언어입니다. 이..

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

이번 시간에는 HTML5의 그래픽 요소인 SVG 요소에 대해 알아보도록 하겠습니다. SVG 요소 svg 요소는 Scalable Vector Graphics를 의미하며 XML 기반의 W3C 그래픽 표준 권고안 입니다. 기존에 사용해 왔던 canvas 요소로는 백터(vector) 이미지를 표현할 수 없습니다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 백터 이미지를 표현할 수 없게 해줍니다. 따라서 이 요소로는 도표나 그래프 등 백터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다 svg 요소를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 사각형 그리기 다음 예제로는 rect 요소를 사용하여 사각형을 그리는 예제입니다. 이 문장은 사용자가 웹 브라우저..

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

이번 시간에는 Rust의 보편적인 프로그래밍 개념인 데이터 타입들에 대해 알아보도록 하겠습니다. Rust의 데이터 타입들 Rust에서 사용되는 모든 값들은 어떠한 타입을 가지고 있습니다. 그러니 어떤 형태의 데이터인지 명시하여 Rust에게 알려주면서 이를 통해 데이터를 어떻게 다룰 것인지 알수 있도록 해야 합니다. 이번 장에서는 언어에 포함되어 있는 여러 타입들을 살펴보고자 합니다. 타입은 크게 스칼라와 컴파운드 둘로 나뉠 수 있습니다. 이번 장에서 전체에 걸쳐 명심해야 함 점은 Rust는 타입이 고정된 언어라는 점 입니다. 이것이 의미하는 바는 모든 변수의 타입이 컴파일 시 반드시 정해져 있어야 한다는 겁니다. 보통 컴파일러는 우리가 값을 사용하는 지에 따라서 타입을 추측할 수 있습니다. 이번 장에서는..

[HTML] HTML - 30.HTML5 그래픽 - Canvas 요소

이번 시간에는 HTML5의 그래픽 요소인 Canvas 요소를 알아보는 시간을 가져보도록 하겠습니다. Canvas 요소 HTML5의 canvas 요소는 웹 페이지에 그래픽을 그려주는 쉽고 강력한 방법을 제공하는 요소입니다. 이 요소로는 그래픽을 위한 컨테이너(container)만 수행합니다. 따라서 실제로 그래픽을 그리기 위해서는 자바스크립트(Javascript) 등의 스크립트 언어를 이용해야 합니다. canvas 요소를 지원하는 주요 웹 브라우저 버전은 다음과 같습니다. canvas 요소의 속성 canvas 요소는 테두리(border)도 콘텐츠(content) 도 없는 웹 페이지 내의 단순한 사각형의 공간으로 반드시 style 속성을 이용해 캔버스의 크기를 설정해야 합니다. 또한 canvas 요소를 스크..

[HTML] HTML - 29.HTML5 요소 - 플러그인

이번 시간에는 HTML5의 플러그인 요소에 대해 알아보도록 하겠습니다. 플러그인(Plug-in) HTML 플러그인이란 웹 브라우저의 표준 기능을 확장해주는 프로그램을 의미합니다. 가장 널리 알려진 플러그인으로는 Java Applet, Flash Player, Rdf Reader 등이 있고 이러한 플러그인은 object 요소는 embed 요소를 사용해 HTML 문서에 추가할 수 있습니다. object 요소 HTML 에서 object 요소는 HTML 문서에 삽입할 객체(object)를 명시하는데 사용합니다. 이 요소로는 모든 웹 브라우저에 동작하며, 객체 뿐 아니라 또 다른 HTML 문서를 삽입할 수 있습니다. 또한, object 요소는 이미지를 삽입할 때도 사용할 수 있습니다. embed 요소 embed ..

[HTML] HTML - 28.HTML5 요소 - 오디오

이번 시간에는 HTML5의 오디오와 플러그인 요소에 대해 알아보도록 하겠습니다. 오디오(audio) HTML5 이전에는 웹 페이지에서 오디오(audio)를 들려주기 위한 표준안은 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인에 의존해야만 했습니다. 하지만 HTML5에 들어서는 태그를 이용해 웹 페이지에 오디오를 삽입하는 표준화된 방식을 제공하고있습니다. 태그를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 오디오 요소의 속성 이 문장은 사용자의 웹 브라우저가 audio 요소를 지원하지 않을 때 나타납니다! control 속성은 재생, 정지 및 소리 조절 등 오디오의 기본적인 동작을 조절 할 수 있는 패널을 생성합니다. 웹 브라우저는 여러 개의 태그 중 위쪽..