HTML & CSS - [CSS] CSS의 다양한 단위

서론 지난 포스트를 통해 원하는 요소들(Elements)을 선택하는 선택자에 대해 알아봤습니다. CSS를 사용하여 웹페이지를 디자인하는 과정을 조금 더 디테일하게 설명하자면 원하는 요소를 선택하여 크기를 정하고, 위치를 정하고, 색상을 정하는 과정입니다. 일상생활에서 우리가 길이를 표현하기 위해 미터, 마일, 인치 등의 단위가 존재합니다. CSS 또한 요소를 제어하기 위한 여러 가지 단위가 존재합니다. 본문에서는 CSS에서 제공되는 다양한 단위들을 알아보도록 하겠습니다. CSS의 단위와 종류 CSS에는 다양한 단위가 존재한다고 말했습니다. 하나하나 살펴보기 전에, 어떤 종류가 있는지 대략적으로 알아보겠습니다. 우리가 일상생활에서 미터, 인치 등으로 표현하는 것과 같은 절대적인 표현방법과, 특정 기준 대비..

2022.05.23

컴퓨터/HTML&CSS

Commnet

HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자

서론 HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다. CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있습니다. 본문에서는 이런 요소를 선택하는 다양한 방법에 대해서 알아보도록 하겠습니다. 선택자(Selectors)와 종류 선택자는 요소를 선택하는 문법적인 방법을 일컫는 말입니다. 4개의 큰 분류로 나누어 구분할 수 있습니다. 기본 선택자(Basic selectors) - 기본적인 선택자의 표현 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표..

2022.05.18

컴퓨터/HTML&CSS

Commnet

Javascript - 화면, 웹페이지, 요소의 위치

서론 Javascript로 웹 페이지를 다루다 보면 화면, 웹페이지, 요소들의 위치 값을 구해야 하는 경우가 많이 발생합니다. 본문에서 각각에 대한 위치정보를 어떻게 알아볼 수 있는지 확인해 봅시다. 화면의 폭과 높이 우선 화면 즉, 표시되는 출력장치의 폭과 높이를 알아보도록 하겠습니다. PC로 보고 있다면 보고 있는 여러분의 모니터가 됩니다. console.log(window.screen.height); // 화면의 높이 console.log(window.screen.width); // 화면의 폭 웹 브라우저의 폭과 높이 사용자들은 웹브라우저가 출력되는 화면은 자유롭게 조정할 수 있습니다. 전체 화면 모드를 사용하던가, 창을 최대화를 하거나 사용자 지정의 크기로 사용하는 등 말입니다. 심지어 스크롤바 ..

2022.05.17

컴퓨터/Javascript

Commnet

백준 2750 - 수 정렬하기

2750번: 수 정렬하기 첫째 줄에 수의 개수 N(1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄부터 N개의 줄에는 수 주어진다. 이 수는 절댓값이 1,000보다 작거나 같은 정수이다. 수는 중복되지 않는다. www.acmicpc.net 수 정렬하기 백준 단계별 풀어보기 정렬 편에 있는 가장 첫 번째 문제입니다. 컴퓨터 알고리즘을 배울 때 정렬중에가장 기초 정렬방법은 버블 정렬입니다. 본문은 버블정렬의 개념을 C로 구현하여 풀도록 하겠습니다. 문제를 정리하면 다음과 같습니다. 첫 번째 입력값(N) - 정렬이 필요한 수의 개수 (1

2022.05.16

컴퓨터/문제풀이집

Commnet

Javascript - document 와 window

서론 웹 브라우저는 Javascript에 객체의 형태로 BOM과 DOM을 제공해 주고 개발자는 이 객체를 이용해서 웹브라우저의 상태를 변화시킬 수 있습니다. 그렇다면 BOM과 DOM은 무엇일까? 그리고 Javascript에서 window와 document의 차이는 무엇일까? 본문에서는 웹브라우저에서 Javascript를 통해서 어떤 데이터들이 객체의 형태로 전달되는지 그 객체들을 이용해서 무엇을 할 수 있는지 알아보도록 합시다. BOM(Browser Object Model)? BOM은 웹 브라우저와 소통하기 위해 만들어진 객체모델입니다. 웹 브라우저의 창의 크기가 변경되거나, 스크롤이 움직이거나 이런 다양한 동작과 상태에 대한 정보를 표현하는 모델로서, 웹 브라우저에서 웹 페이지를 구동하기 위한 환경적 ..

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - Web과 Javascript(사용 셋팅하기)

서론 Web개발에서 Javascript는 필수적으로 공부가 필요한 항목 중 하나입니다. 사용자가 웹브라우저를 통해 특정 URL에 접근하면 서버로부터 데이터를 받아 DOM(Document Object Model)을 생성하고, 이 DOM을 기반으로 사용자에게 보여주기 위한 Web페이지를 랜더링 합니다. 다시 말하자면, DOM을 수정하거나 변경한다면, 사용자가 보이는 Web페이지를 변화시킬 수 있다는 말이 됩니다. 오늘날 거의 모든 웹브라우저들은 Javascript를 지원합니다. 그리고 Javascript언어를 사용한 웹브라우저에서 생성된 DOM을 접근하고 제어할 수 있는 API를 제공해줍니다. 물론 다른 언어들을 통해서 DOM에 접근하고 제어하는 것 또한 가능하지만, 웹브라우저에서 제공하는가 와는 엄청난 차..

2022.05.16

컴퓨터/Javascript

Commnet

Javascript - 함수(Function)의 다양한 정의방법

서론 Javascript에서는 다양한 방법으로 함수를 정의하고 사용할 수 있습니다. Javascript문법에 익숙하지 않다면, 워낙 다양한 방법으로 함수를 정의할 수 있기 때문에 혼동되는 부분이 많습니다. 본문에서는 이런 다양한 함수를 정의하는 방법에 대해서 구분하고 알아보도록 하겠습니다. 함수(Function)란 무엇인가? 프로그래밍을 배우면 함수, 메서드 등의 다양한 이름으로 이 함수라는 녀석을 듣고, 사용하게 됩니다. 그렇다면 이 함수는 무엇일까? 함수의 개념을 간단히 정의하자면, 특별한 기능을 제공하는 하나의 묶음입니다. 이 함수의 개념이 Javascript안에 적용되면서 Javascript의 함수는 아래와 같은 기능과 특징을 가지게 됩니다. 블록단위의 개념이 적용되어, 특정 기능을 수행한다. 특..

2022.05.13

컴퓨터/Javascript

Commnet

Javascript - 변수의 범위와 호이스팅(Variable scope and hoisting)

서론 지난 포스트에서 Javascript에서 변수를 선언하는 var, let, const 3가지의 특징과 사용 방법을 알아보았습니다. 이제 변수를 언제 선언할 것이며, 변수를 사용할 범위를 정확하게 지정해야만 효율적인 프로그램이 가능해집니다. 본문에서는 이런 내용들을 알아보도록 하겠습니다. 변수의 범위 - Variable Scope C 나 Java와 같이 JavaScript에서도 변수를 사용하는 범위를 지정할 수 있게 됩니다. 프로그래밍을 하는 과정에서 모든 데이터가 계속해서 변수의 형태로 메모리를 차지하고 있는다면, 매우 비효율적이기 때문입니다. 다른 말로는 변수의 생명주기(Variable of lifecycle)이라고도 불립니다. 즉, 변수가 존재하는 영역을 지정할 수 있다는 것입니다. Javascr..

2022.05.12

컴퓨터/Javascript

Commnet

Javascript - 변수(variable) var,let,const?

서론 다른 프로그래밍 언어와 마찬가지로 Javascript 또한 '변수'의 개념을 사용할 수 있습니다. Javascript에서 변수를 선언하고 사용하는 방식에 대해서 배우고 효과적으로 사용하기 위해 각각의 특징들에 대해서 알아보겠습니다. 본문에서는 각각의 변수형들에 대해서 간단하게 설명하고 그 특징과 차이점을 알아보겠습니다. 변수(Variable)? 컴퓨터에서 데이터는 메모리 공간에 담깁니다. 예를 들어 10이라는 데이터를 메모리의 특정한 공간에 담았다면, 그 공간에 접근을 해야지만 데이터를 확인할 수 있을 것입니다. 이런 메모리 공간의 할당하고, 그 메모리공간의 별칭이 바로 변수의 개념입니다. 대부분의 언어에서는 이렇게 Variable을 이용하여 메모리와 데이터를 다루게 됩니다. Javascript 또..

2022.05.11

컴퓨터/Javascript

Commnet

WEB - DOM(Document Object Model)?

서론 웹을 공부하다 보면 필연적으로 DOM이라는 말을 많이 듣게 됩니다. 프로그래밍 언어로 DOM을 접근하고 다루는 것이 필수적인 Web 개발자의 소양 중 하나입니다. 본문에서는 DOM에 대한 기본 지식을 알아보도록 하겠습니다. Whis is DOM? DOM(Document Object Model) 직역하자면 문서 객체 모델입니다. HTML , XML로 작성한 문서를 어떠한 기준에 의해 구조화된 모델로 표현한 데이터를 DOM이라고 합니다. 이게 뭔 말이야? HTML이나 XML은 문자들로 이루어진 문서입니다. 예를 들어 아래와 같은 HTML 문서가 있다고 합시다. DOM이 뭔데요 HTML 형식의 문서입니다. 단순히 문자들로만 이루어져 있습니다. 웹 브라우저를 통해 웹페이지를 랜더링 하는 과정은 HTML형식..

2022.05.11

컴퓨터/WEB

Commnet