전체 글181

• 

  [JavaScript] Scroll Event에 자주 쓰이는 변수/메소드 정리 .offsetTop( ) : 해당 HTML 요소의 Y좌표 위치 반환 .scrollY : 현재 스크롤의 Y좌표 위치 반환 .scrollTo( X좌표, Y좌표 ) : 파라미터로 받아온 X, Y 좌표로 스크롤을 이동시킴 Language/JS(Node.js) 2020. 11. 13.

• 

  [CSS3] Animated Sidebar 만들기 이 효과 역시도, :checked를 활용하면 간단하게 만들 수 있다. 기본정보 1. Animation과 연관된 속성으로 transition과 tranform이 있다. 2. Transform은 화면 상에서의 위치, 크기, 회전각도 등을 조절한다. 각각 translate(X, Y), scale, rotate를 사용함으로써 가능하다. 그 외에도 matrix, matrix 3d, perspective, perspective-origin, transform-origin, transform-style를 사용할 수 있다. 3. Transform이 변화를 주는 요소였다면, Transition은 변화가 일어나는 속도, 변화시킬 요소, 움직이는 방법을 결정할 수 있다. 1) :checked 이전 사이드바로 활용할 요소를 .. Web/CSS 2020. 11. 12.

• 

  [JavaScript] 객체란 무엇인가? 객체란 무엇인가? 자바스크립트에서 객체는 여러모로 쓸모가 많다. JSON 파일에서 전송되는 데이터도 객체이고, DOM 조작에 활용되는 document와 BOM 조작과 관련된 전역객체인 Windows 역시 객체이다. 또한 객체지향 프로그래밍으로 소프트웨어를 설계할 때에도 활용되는 것이 객체이다. 객체의 의의 객체란 현실의 사물을 프로그래밍적으로 표현하기 위하여, 활용되는 수단이다. 예를 들어, 나(이준호)라는 사람을 객체로 표현한다면 다음과 같이 표현할 수 있을 것이다. juno라는 객체를 만들고 그 안에 각각 firstname(변수), lastname(변수), body(객체), hobby(배열), eat(함수), boxing(함수), cooking(함수)를 넣었다. 즉, 나라는 객체 안에 사람이 할 수 .. Language/JS(Node.js) 2020. 11. 12.

• 

  [CSS] 버튼 클릭으로 메뉴 화면 보이기/감추기 서론 대상독자 HTML과 CSS 만으로 화면에서 태그를 감췄다 보였다 처리해주고 싶은 개발자 본론 구현방법 먼저, 정답은 아주 간단합니다! CSS 가상선택자 :checked 속성을 활용하면 충분히 구현할 수 있습니다. 우선 먼저, css에서 input의 type을 checkbox을 생성하고 유동적으로 화면에 보여줄 HTML 태그에 대해, 기본 속성으로 display : none을, :checked 상태에서 display: block 등으로 지정해주면 됩니다. 이게 끝입니다!! 또 display: none 처리된 Input 태그를 클릭하기 위해 label 태그를 추가해주고 속성으로 for에 input에 대한 name을 추가하면 됩니다. 그럼 label 태그를 클릭할 때마다, 보여주고 싶은 영역이 사라졌다 .. Web/CSS 2020. 11. 11.

• 

  [Network] 인터넷과 음성통화 그리고 웹 우리는 일상 속에서 인터넷과 웹을 거의 구분하지 않고 생활하는 것 같다. 웹서핑을 할 때, 흔히 "인터넷을 한다"고 이야기하는 걸 보면 말이다. 오늘 그 차이에 대해서 구분짓고 넘어가보자. 인터넷과 음성통화 먼저 인터넷을 알기 위해서는 네트워크에 대하여 알아야한다. 네트워크란 흔히 컴퓨터 네트워크를 말하며, 이는 여러 컴퓨터가 각각 클라이언트와 서버로써 서로 연결되어 구성된 망을 말한다. 인터넷은 이러한 컴퓨터 네트워크가 전 세계적인 규모로 수없이 많이 모여서 이루어진 일종의 컴퓨터 네트워크 시스템이다. 즉, 인터넷이란 수많은 클라이언트 컴퓨터와 서버 컴퓨터, 그리고 이들로 구성된 네트워크들의 집합체이다. 네트워크의 원리는 전화와 같은 무선통신의 원리를 따져보면, 간단하다. 음성통화에서의 통신 방식 발신.. CS/기타 2020. 11. 11.

• 

  [HTML] HTML 요소들 정리하기 : 구획, 메타데이터, 멀티미디어 등 이미 HTML5에 대해 여러 차례 다룬 바 있지만, 전체적인 관점에서 조망할 기회는 없었기에 이번 글을 통해서 정리하고자 한다. 오늘은 현재 HTML5를 구성하는 요소들을 전부 살펴보며, 알지 못했던 부분들이 있으면 채우고 알고 있던 부분들은 더욱 자세하게 알기 위하여 글을 작성하겠다. 먼저 HTML(Hyper Text Markup Language)이란 웹 사이트의 기본 정보에 속하는 마크업 언어이다. Hyper Text란 간단히 말하여, 링크와 같이 다른 사이트를 참조할 수 있는 형식의 문자를 말한다. 웹에서 수많은 정보들이 연관되고 참조되는 모습을 우리는 쉽게 상상할 수 있으리라. 또한 마크업 언어란 와 같이, 여는 태그와 닫는 태그로 이루어진 것들을 말하며, 아래와 같이 태그 안에 들어가는 정보와 .. Web/HTML 2020. 11. 11.

• 

  [Computer Science] 하드웨어의 한계, JavaScript에서의 부동소수점 컴퓨터는 저장공간에 한계가 있기 때문에 특정 값보다 큰 숫자나 작은 숫자는 표현할 수 없다. 예를 들어, float는 32비트를 사용하는데 double은 64비트를 사용한다. 32비트를 사용하는 float의 경우에는 2^31 - 1(대략 20억)까지 저장할 수 있으며, 64비트를 사용하는 doblue의 경우에는 2^61-1까지 저장할 수 있다. 결국 컴퓨터가 저장할 수 있는 정보는 유한한다. 반대로 소숫점의 경우를 생각해보자. float x = 1 , float y = 10으로 두고 x / y를 나누면 소숫점 27번째 자리까지만 표현할 수 있고, 그 이상은 0으로 치환시켜 보여준다. 이는 컴퓨터는 계산할 수 있는 값들 중 1/10에 가장 가까운 값을 저장한 것이다. 왜냐하면 유한한 정보를 사용해서는 무한.. CS/기타 2020. 11. 10.

• 

  [WEB] Adobe Flash Player와 HTML5 & WebGL 플래시 플레이어는 1996년에 처음으로 출시되었다. 처음에는 FutureWave Software라는 회사에서 애니메이션을 만들기 위한 소프트웨어(벡터 애니메이션을 표현할 수 있도록 지원한 제품)였다. 그러나 96년 MacroMedia라는 회사에서 FutureWave사를 인수하면서, 브라우저 상에서 동작할 수 있도록 플러그인(웹 브라우저의 일부로서 쉽게 설치되고 사용될 수 있는 프로그램을 말한다. 넷스케이프 브라우저를 통해 사운드나 동영상을 재생하거나, 기타 다른 기능들을 수행해주는 추가 프로그램들을 다운로드하여 설치하고 또 정의할 수 있도록 한 것이 그 시초이다) 형태로 바뀌었고, 이는 곧 웹 디자인 영역에서 활발하게 쓰이기 시작했다. MacroMedia사에서 ECMA스크립트 기반의 액션스크립트 (AS).. Web/HTML 2020. 11. 10.

• 

  [HTML] Doctype(Document Type)과 개방형 웹 플랫폼 HTML5 HTML은 버젼마다 제공하는 태그들이 다른데, 각 버젼에 따른 Doctype을 선언해줌으로써 HTML의 버젼을 알려준다. Doc의 Document를 HTML이라고 보아도 무방할 것이다. 그렇다면 그 종류에는 무엇이 있는가? 가장 최근 버젼인 HTML5의 선언 방법은 다음과 같다. (그 외 HTML 4.01 등 다양한 버젼을 선언하는 방법이 있지만, 검색을 통해 알 수 있는 부분이므로 다루지 않겠다) 또한 이 외에도 HTML5(발표일 2014년 10월 28일)에서 추가된 태그들을 살펴봄으로써 웹이 어떠한 측면에서 개선을 위해 노력했는지도 살펴볼 수 있다. Sementics 1) 섹션 구분 태그 기존에는 div태그로 내용들을 나누어 주었다. 그러나 컴퓨터에게 아무런 의미가 없는 태그에 불과하다. 해당 영역이.. Web/HTML 2020. 11. 9.

• 

  자바스크립트로 구현하는 버블정렬(BubbleSort) 전에 구현했던 버블정렬 코드이다. 자세한 설명은 추후에 진행하도록 하겠다. CS/알고리즘 2020. 10. 22.

• 

  자바스크립트로 구현하는 선택정렬(SelectionSort) 오늘은 선택정렬에 대해 구현해보았다. 코드는 다음과 같다. 자세한 설명은 추후에 추가할 예정이다. CS/알고리즘 2020. 10. 22.

• 

  [CSS3] display : grid ① Grid, 배우면 뭐가 좋을까? 먼저 Flex와의 차이점에 대해서 알아보자. 우리는 Flex가 가로나 세로로 HTML 요소들을 정렬하는데 활용된다는 사실을 알고 있다. 이에 반해, Grid를 사용하면 가로와 세로를 포함한 면적에 대한 레이아웃을 짤 수 있게 된다. 기존에 Grid를 배우지 않은 상태에서는 float를 써서 화면을 구성해주어야 한다. 아래의 화면 레이아웃은 float를 활용한 레이아웃을 구성한 것이다. float를 써서 화면 레이아웃을 구성하는 것이 어려운 일은 아니다. width를 px 단위가 아니라, %로 주면 쉽게 해결할 수 있다. See the Pen 일반적인 HTML-CSS 레이아웃 설정 by joonho lee (@goldycoder) 비교를 위해 같은 작업을 Grid을 활용하여, 레이아웃을 짜보자. 각 태그에.. Web/CSS 2020. 10. 18.