분류 전체보기
-
[CSS Pattern] 도트(Dot) 패턴Front-end/CSS 2020. 7. 23. 14:12
네비게이션에서 자주 사용되는 도트 패턴에 대해서 알아보겠습니다. HTML 구조는 전체를 감싸는 wrap-box와 도트들을 만들어내기 위해 ul, li를 활용하였습니다. CSS * { list-style-type: none; box-sizing: border-box; margin: 0; padding: 0; } .wrap-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 400px; margin: 0 auto; background-color: #34495e; } .dots { display: flex; justify-content: center; align-..
-
꼭 알아야 할 HTML 태그들Front-end/HTML 2020. 7. 20. 11:32
HTML에는 정말 많은 종류의 태그들이 있는데요, 현재 HTML5 기준 약 115개의 태그가 있습니다. 🤪 하지만 115개의 태그를 전부 외우고 활용하기는 참 멀고도 험하겠죠..? 전부 각자의 기능이 있지만 실질적으로 마크업을 할 때 꼭 알아야 할 태그들이 있기 마련입니다. 그래서 도대체 그 태그들이 뭔지 알아보려합니다. DOCTYPE DOCTYPE은 document Type의 줄임말로 문서의 타입을 말합니다. HTML의 문서에 최상단에 선언하는데 보통 HTML의 버전을 명시하는데에 사용됩니다. !로 시작하여 대문자로 DOCTYPE을 선언하고 html의 버전을 명시합니다. 예시는 html로서 5버전을 나타냅니다. 만약 xhtml, xml을 사용하고 싶다면 html 대신 선언하면 해당 타입으로 마크업 하겠..
-
HTTP의 역사 그리고 브라우저의 동작 원리 (feat. HTML, CSS의 탄생 배경)Network 2020. 7. 13. 14:04
HTTP는 웹 생태계에서 절대 빠질 수 없는 부분입니다. 세계대전과 많은 연구를 통해서 통신은 발전해왔고, 이로인해 서로의 정보를 공유할 수 있게 되면서 보다 효율적이고 정확한 통신이 가능해졌습니다. 이렇게 발전해온 HTTP가 어떻게 바뀌었는지에 대해 알아보겠습니다. 팀 버너스 리 팀 버너스 리 아저씨는 유럽 입자 물리 연구소(CERN)에 속한 소프트웨어 공학자였으며 조금 뜬금 없지만 이 기관에서 1990년에 WWW를 개발하게 됩니다. WWW는 World Wide Web의 약자이며 말 그래도 전 세계를 통튼 웹입니다. 여기서 우리는 http, ftp 등의 프로토콜을 사용해서 정보를 주고받을 수 있게됩니다. WWW의 등장으로 사용자는 웹 상에 있는 정보들을 언제든 접근하여 사용할 수 있게 되었습니다. 또한..
-
컴퓨터와 Web은 어쩌다 만들어졌을까? (feat. HTML , CSS, Javascript)Network 2020. 7. 11. 00:59
오늘날 우리는 대부분 1대 이상의 컴퓨터를 가정에 보유하고 있습니다. 우리나라에는 본격적으로 90년 후반부터 가정용 컴퓨터가 보급되기 시작했는데, 이 시절 가장 많이 사용하던 운영체제는 MS사의 Windows 95, 또한 IE 등의 웹 브라우저를 통해 웹을 사용할 수 있었습니다. 네, 여러분들이 예전에 보셨던 그 화면입니다...😓 이렇게 컴퓨터의 보급과 웹이 등장하게 된 이유에 대해서 알아보도록 하겠습니다. 폰 노이만 먼저 컴퓨터를 알기 위해서는 폰 노이만이라는 아저씨로 시작됩니다. 수학자와 컴퓨터 과학자로 활동하고 있었던 그는 세계 2차대전을 겪으며 많은 업적을 세웠는데 그 중에서 가장 큰 업적은 바로 현대의 컴퓨터 구조의 확립입니다. 긴 전쟁 기간 동안 많은 발전을 이루었는데 이 때 맨해튼 프로젝트 ..
-
[React] useEffect Hooks 알아보기Front-end/React 2020. 7. 1. 14:03
useEffect 컴포넌트가 최초, 업데이트, 사라질 때 특정 작업을 할 수 있도록 해줍니다. useEffect 선언하기 import React, { useEffect } from "react"; useEffect 사용하기 useEffect(function, dependencies); function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. 컴포넌트가 최초 화면에 렌더링 될 때만 실행 useEffect(() => { console.log("컴포넌트가 화면에 나타남"); // mount }, []); 빈 배열을 넣게 되면 의존하는 값이 없어 최초 화면에 렌더링 될 때만 실행됩니다. 이를 mount 된다라고 표현합니다. 보통 mount에 사용되는 기능에는 아래와 같습니다. pr..
-
[React] useState hooks 알아보기Front-end/React 2020. 7. 1. 14:01
useState 동적인 상태값을 관리할 때 사용합니다. 기존에 함수형 컴포넌트에서는 상태관리가 불가능 했지만 16.8 버전 이후에는 useState를 활용하여 상태값을 관리할 수 있게 되었습니다. 카운팅 예제를 통해서 상태값 관리를 알아보겠습니다. 이벤트 선언 import React from "react"; function Counter() { const onIncrease = () => { console.log("+1"); }; const onDecrease = () => { console.log("-1"); }; return ( 0 +1 -1 ); } export default Counter; 각각의 버튼별 onClick 이벤트를 가지며 해당 함수를 정의하여 선언해줍니다. 이 때 주의할 점으로 즉시실..
-
자바스크립트 기초 간단하게 살펴보기Front-end/Javascript 2020. 7. 1. 13:58
1. CSS 추가하는 방법 head 태그 내부에 추가합니다. link 태그를 활용하여 href에 css파일 경로를 입력합니다. index.css body { background-color: peru; } h1 { color: white; } 결과 2. JS 추가하는 방법 This Works! body 태그 밑에 추가합니다. script 태그를 활용하여 src에 js파일 경로를 입력합니다. index.js alert("Hello World!"); 결과 variable(변수) 1. let let a = 100; let b = 100 - 10; a = 10; console.log(b, a); 90, 10 let은 초기화한 변수값을 다시 할당하는 순간 그 값을 가진 변수가 됩니다. 2. const const a..
-
자바스크립트 코딩의 기술 책 리뷰Review 2020. 7. 1. 13:55
이 글은 길벗출판사의 개발자 리뷰어로 선정되어 작성한 글입니다. 목차 목차는 총 10개로 구성되어있으며 변수, 배열, 객체, 조건문, 함수, ES6문법 등 각 기능들에 맞게 자바스크립트를 어떻게 활용하며 똑똑하게 코딩할 것인지에 대한 내용이 담겨있습니다. 주제 자바스크립트를 활용할 때 자주 사용하는 기능들을 활용한 주제들로 이루어져 있습니다. 예를들어 변수를 할당할 때의 스코프 개념이라던지, 객체를 사용할 때의 메서드를 활용하는 방법이라던지, 함수의 활용법 등 자바스크립트의 핵심이 될만한 주제들을 가지고 예제 코드와 함께 활용법들을 제시해줍니다. 그리고 활용법만 알려주는 것이 아닌 그 방법에 대한 주의사항과 예외사항을 함께 알려줌으로써 독자 입장에서 보다 확실하게 개념을 파악하고 더 많은 생각을 할 수 ..