일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Reset
- Express
- route
- React
- git checkout
- html
- Advanced
- Nodejs
- Basic
- commit
- sourcetree
- git branch
- root
- git
- Develop
- fixed
- WEB
- rbenv
- Remote
- Teamwork
- css
- linux
- Box Model
- workflow
- relative
- 소스트리
- Process
- Merge
- crud
- Rebase
- Today
- Total
Codesigner
브라우저는 CSS파일이 포함되지 않은 순수 HTML 파일의 요소들을 왼쪽에서부터 오른쪽으로, 위에서부터 아래로 요소가 HTML 파일 상에서 존재하는 순서대로 렌더링 한다. 이를 HTML 요소들의 흐름(flow)라고 한다 HTML 요소들을 스타일 하는 속성에 더해, CSS는 브라우저가 요소들을 위치시키는(positioning) 속성들을 또한 포함한다. 이러한 속성들은 요소가 어디에 위치해야 하는지, 다른 요소들과 같은 줄에 위치할 수 있는지, 그리고 이와 관련된 다른 여러 속성들을 설정할 수 있다 이번 포스팅에서 다음과 같이 HTML 요소를 포지셔닝하는 다섯 가지 속성들에 대해서 알아보도록 하자 position display z-index float clear 각 속성들은 우리가 웹 페이지의 요소들을 위치..
저번 포스팅에서 박스 모델의 중요한 네 컴포넌트: 차원, 테두리, 패딩, 마진에 대해서 알아보았다. 그런데 이러한 박스 모델의 차원에서 한 가지 문제가 존재한다 Hello World h1 { border: 1px solid black; height: 200px; width: 300px; padding: 10px; } 위 코드는 h1 요소의 박스는 1px의 검은 실선 테두리를 가지게 된다. 이 박스의 height는 200px이고 width는 300px인데, 모든 방향의 패딩이 10px씩 더해졌다 위의 현재 박스 모델에서, 테두리의 굵기와 패딩은 박스의 차원에 영향을 미친다. 10px의 패딩은 height는 220px 만큼 커지게 하고 또한 width를 320px만큼 늘린다. 그리고 1px의 테두리가 또 포..
지금까지 박스 모델의 컴포넌트: 콘텐츠, 테두리, 패딩에 대해서 알아보았다. 이번 포스팅에서는 네 번째 컴포넌트이자 마지막 컴포넌트인 마진(margin)에 대해서 알아보자 Margin I 마진은 박스의 외부의 공간을 말한다. margin 속성으로 이 공간의 크기를 조절할 수 있다 p { border: 1px solid aquamarine; margin: 20px; } 위 코드는 모든 p 요소의 박스 외부에 20px만큼의 공간을 설정한다. 이는 다른 HTML 요소들이 각 p 요소들과 적어도 20px 만큼 떨어져야 한다는 것을 의미한다. 만약 한 방향에 대해서만 외부 공간을 설정해주고 싶다면, 다음과 같은 속성을 사용할 수 있다 margin-top margin-right margin-bottom margin..
리액트 라우터는 다음과 같은 세 가지 컴포넌트가 존재한다 Router Components Route Matching Components Navigation Components 우리가 웹에서 사용할 모든 컴포넌트는 react-router-dom에서 임포트 한다 import { BrowserRouter, Route, Link } from "react-router-dom"; 본격적으로 각 라우터 컴포넌트들에 대해서 알아보도록 하자 Routers 리액트 라우터의 핵심은 바로 라우터 컴포넌트이다. react-router-dom 에서는 두 가지 라우터 컴포넌트를 제공하는데, 와 가 존재한다. 이 두 가지 컴포넌트 모두 history라는 오브젝트를 생성한다. history는 자바스크립트가 실행되는 환경에서 sessi..
브라우저는 HTML 요소들을 화면에 렌더링 할 때 디폴트 포지션 값에 위치시킨다. 이러한 기능은 때로는 우리가 원하지 않거나 예상치 못하는 결과를 낳기도 하는데, 이번 포스팅에서는 CSS가 어떻게 HTML요소를 화면에 위치시키고 보여주는지를 이해하는데 중요한 개념인 박스 모델(Box model)에 대해서 알아보도록 하자 저번 포스팅에서 한 HTML 요소의 background-color 속성의 값을 변화시켜 주면 해당 요소를 감싸는 사각형 형태로 배경색이 지정되었다. 또, text-align 속성으로 텍스트를 정렬하면 정렬이 상대적인 위치에서 이루어졌다. 이것들이 바로 CSS의 박스 모델이 적용되었다는 증거이다. 웹 페이지 상에 모든 HTML 요소들은 박스로 표현되고, 크기, 위치, 속성(색, 배경, 테두..
리눅스, 컴퓨터 공학을 전공하지 않았다면 조금은 어색한 이 이름은 90년대에 개발되었지만 오늘날에도 가장 활발히 사용되고 있는 컴퓨터 운영체제이다. 리눅스는 핀란드 헬싱키의 대학원생 리누스 토르발스(Linus Benedict Torvalds)가 처음으로 개발하였는데, 처음에는 운영 체제가 아닌 운영 체제 위에서 실행되는 터미널 에뮬레이터에 불과했다. 그러나 점차 파일 제어, 시리얼 통신 등 여러 기능을 지원하면서 운영 체제 커널로 발전하기 시작했고, 1991년 9월 17일 처음으로 운영 체제 기능을 하는 리눅스가 인터넷을 통해 공개되었다. 이후 지금까지 전 세계 수천만의 개발자들이 리눅스 개발에 자체적으로 참여하고 있으며, 많은 기업과 단체의 후원이 이루어지고 있고, 리누스 토르발스의 지휘 하에 리눅스 ..