키다리 개발자

CSS2와 CSS3의 차이점 기본적인 부분은 크게 바뀌지 않았고, 코딩하는 방법도 기존 그대로이다. 이전 CSS2와 대표적인 차이점은 이미지를 사용하지 않고 그라데이션 등의 표현을 할 수 있게 된 것이 대표적인 차이점으로 표현력이 다양해졌다는 점이다. CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했지만, 이제는 CSS3만으로도 구현이 가능하게 되었다 . 그외 그림자나 그라데이션을 추가할 수 있으며, 표현력이 다양해지면서 편리하 기능도 크게 늘어났다. 또한, 세분화해서 관리하려는 의도가 있어, 셀렉터나 글꼴, 텍스트 등 다양한 기능이 모듈화 되어 모듈별로 개발이 진행되고 있다. 즉, CSS3는 CSS2와 같은 1가지 사양을 가리키는 명칭이 아니라, 모든 모듈의 대표적인..

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다. 확장자는 .module.css 파일로 저장하기만 하면 CSS Module이 적용됩니다. className이 하이픈(-)이 포함되어 있는 경우 1 2 3 4 5 6 7 8 9 10 11 12 import React from 'react' import style from './style.module.css'; const Home = () => { return( 하이픈 포함되어 배열로 스타일링 ); }; export default Home; CSS Module이 적용된 스타일 파일을 불러오면 객체를 하나 전달받게 되는데 CSS Module에서 ..

한걸음 더 나아가기 위해 마찬가지로 매일 코딩 공부에 매진하였다. node.js로 나만의 웹 개발을 하며, 여러 시행착오를 겪었다. 11월에 달성한 목표 Node.js로 웹개발(ES6) Cycling 영어 회화(학원) Life Cycle Node.js로 나만의 웹 개발을 하기로 결정하였고, 컨셉을 생각을 해보다가 여행을 좋아하여 '여행' 웹을 만들어 보았다. HTML구조를 머릿속으로 미리 예측하여, createElement()로 element를 구성하였고 classList.add()로 클래스 네임을 지정하여 HTML의 기초가 정말 중요하다는 것을 다시 한번 깨닫게 되었다. 새로운 환경에서 작업을 하는 거라 코딩 후 Viewport 확인을 무한 반복하며 여러 가지 경우를 시도하며 시행착오를 많이 겪었던 경..

문서 객체 모델(DOM) 문서 객체 모델(DOM, Document Object Model)은 HTML 문서를 객체화한 것입니다. (인터페이스) 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. Javascript에서 HTML을 가져오기 위해 만든것이 DOM이다. 그러므로 Javascript는 DOM을 이용하여 새로운 HTML / 기존의 HTML의 요소를 생성, 변경, 삭제를 할 수 있다. API (Application Programming InterFace) API = 다른 사람이 자신의 소스를 쉽게 사용할 수 있도록 함수를 만들어 놓은 것 HTML 요소와 관련된 작업을 도와주는..

Web Frontend 개발자가 되기 위해 한 달 내내 코딩 공부에 매진하였다. 작은 프로젝트를 하면서 발전된 모습에 성취감을 얻었으며, HTML, CSS, Javascript를 하며 개발자가 되기 위해 한층 더 가까워진 것 같아 뿌듯하다. 10월에 달성한 목표 HTML, CSS, Javascript(기본) 공부한 내용 모두 블로그 작성 흥미와 적성 발견하기 퇴사 후 몇 달간 막연하게 Java를 공부 하였는데, Frontend 개발자 로드맵에 대해 우연히 알게 되어 분야에 좀 더 찾아보던 중 Javascript의 장점과 매력에 관심을 갖게 되어 주 언어를 Javascript로 바꾸어 공부를 하게 되었다. 아직 기본적인 것들이지만 HTML, CSS, Javascript 3개를 활용하여 작은 프로젝트를 만들..

Template string : ES6에 새롭게 추가된 기능이며 backtick : ` ` 을 사용하여, javascript 간단한 문자열 채워넣기 (string interpolation) 기능이 가능해졌습니다. 템플릿 문자열은 JavaScript 값(value)을 문자열에 넣어 보기 좋고 편리한 방법입니다. 그리고 ${대입받는 값} 템플릿 대입문(template substitution)이라고 부릅니다. 객체 배열, data model const recommenderCardDataModels = [ { recImg: 'https://img.sbs.co.kr/newsnet/etv/upload/2018/01/23/30000591747_1280.jpg', recName: 'Kim Yu Jung', recLoc..

Javacript + HTML + CSS로 계산기를 만들어 보았습니다. 계산기 제작 순서는 HTML로 틀을 만듦 Javascript로 계산 기능 구현 CSS로 디자인 적용 로 순차적으로 하였습니다. HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 계산기 % C del / 9 8 7 * 6 5 4 + 3 2 1 - 0 . = button 태그에 onclick 이벤트 속성을 주어 javacript의 함수와 연결시켰습니다. onclick은 이벤트 속성으로 한번 클릭을 ..

if, else if, else 조건문은 위에서부터 순차적으로 제어를 하는 정말 중요한 실행문입니다. 1 2 3 4 5 6 7 8 if (score >= 90) alert('A'); else if (score >= 80) alert('B'); else if (score >= 70) alert('C'); else alert('F'); if(표현식) : if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. else if(표현식) : else if는 중첩하여 여러번 조건문을 사용할 수 있습니다. else : else는 위의 모든 if, else if 문이 거짓(false)일 때, 참으로 실행됩니다. 그러므로 괄호안에 표현식은 없습니다. 하나의..