Enjoy Programming

오늘 만들어할 레이아웃이다.~~만들어보자~ 조건읜 외부 스타일 시트 사용과 pseudo selector를 사용하고 position속성을 사용해야 한다. 아 꽤나 빡셌다.. 이게 맞는지는 모르겠지만 ..뷰포트.. 아 머리야... 우선 html부터 보자 뭐 제목~ 두번째 토마토 틸색상 박스 세번째 발리우드 쓰리틀 색상 박스 이렇게 세개로 할 수 있겠지만 큰박스 하나에 다른 박스들은 포지션 absolute로 각 꼭지점에 박아 보기로 생가각했다. 먼저 h1태그로 제목 설정해주고 메인박스 하나 만들고 그안에 세컨드박스 4개를 만든다. 그리고 그 안에 다시 박스를 하나 더 만들고 그 박스안에 h3 와 h5의 부제목들을 달아주자. 이제 css 로 넘어와서 먼저 서체를 times로 잡아주고~ h1과 mainbox가 중..

오늘 챌린지 종목은 box다루기 이다.,~ 이런 box layout 만들기. requirement - use external css 외부 css 파일 임포트 하기가 전부다 자 만들어보자 그냥 보면 배경화면색주고 div로 박스 하나 만들어주고 박스안에 박스 세개를 만들어주자. 그리고 background-color에 #ff6447을 바디에 준다. ( colorzilla로 색은 따오면 된다. ) 똑같이 바디안의 첫번째 박스에 #f5deb3색상을 주자 그리고 그안 박스에 #008080색을 준다. 아직 박스 크기들을 설정은 안해줬으니 될리가 없다. 음 페이지롤러로 사이즈 재보니 대충 첫번째 박스가 240px씩이고 그 안에 세개는 60px씩이다 주자 이런 박스가 만들어졌다~~~ 이제 해야할 것은 화면 중앙에 배치해..

이제 html5의 기본 구조를 살펴 보자 html은 반드시 로 시작한다 이는 이 문서는 html코드를 포함하고 있다고 브라우저에게 말해주는 역할을 한다. 이후 실질적인 html 코드들이 실행 되는데 크게 head, body로 구분된다. head에는 문서의 title이나 참조, meta태그 등이 들어가는데 이는 문서의 configure라 할 수 있다. meta 태그는 문서의 별도의 정보를 알려주는 역할을 한다. 그리고 body에는 실제 웹에 보여질 content들이 들어간다. 기본 문법은 앞서 설명한 것도 있지만 추가로 더 다뤄 보겠다. html태그는 기본적으로 중첩이 되는데 이때 부자관계가 형성 된다. 위 사진에 바디안에 h1태그와 p태그가 있다 바디는 부모 요소가 되고 h1과 p는 직계 자식요소가 된다..

1. 변수 (variable) 프로그래밍을 공부하면 가장 중요한게 변수이다. variable이란 메모리상에 value를 저장하고 그 저장된 value를 참조하기 위해 사용한다. memory address에 접근하기 위해 사람이 이해 할 수 있는 언어로 지정한 identifier(식별자) javascript에서는 변수를 선언할때 const, let, var를 사용한다. (var는 점점 쓰지 않는 추세이다. 2. value 값을 정의 하기에 앞서 용어 두개를 더 정리하자 변수는 이미 알고 있으니 data type: 프로그래밍 언어에서 사용할 수 있는 값의 type literal : 소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위 여기에 value는 프로그램에 의해 조작될 수 ..

대부분 프로그래밍 언어는 OS에서 실행 되지만 웹어플리케이션의 자바스크립트는 브라우저에서 html, css와 함께 실행된다. 브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 request하고 server의 response를 받아 브라우저에 표시하는 것이다. 브라우저는 서버로부터 html, css ,javascript, image file등을 response받는다. html, css 파일은 렌더링 엔진의 html parser와 css parser에 의해 parsing되어 DOM, CSSOM tree로 transform되고 render tree로 combine된다. 이렇게 생성된 render tree를 기반으로 브라우저는 웹페이지를 표시한다. 자바스크립트는 렌더링 엔진ㄴ이 아닌 자바스크립트..

expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 node.js 웹 앱 프레임웍이다. 활용할 수 있는 많은 http 유틸리티 메소드 및 미들웨어를 통해 쉽고 빠르게 강력한 API 작성이 가능 node.js로 서버를 만들때 Express라는 프레임웍을 이용해 몇 줄의 코드로 서버를 간편히 만들 수 있다. 이미 많은 줄의 코드로 만들어져 있어서 사용법을 익힌다면 빠르게 만들 수 있다. 예를 들면 파이썬의 장고, 플라스크 PHP의 라라벨 JAVA의 spri..