🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

1. The 4 Basic Parts of Computer 컴퓨터는 크게 4가지로 구성되어 있다. - input - cpu - output - memory 그리고 각 파트는 CPU를 중심으로 상호작용한다. 2. More Computer Hardware - Input : mouse, keyboard와 같이 컴퓨터에 내가 연결한 장치들 - Output : 모니터와 스피커처럼 출력해내는 것 - CPU : 컴퓨터의 중심. 컴퓨터를 작동시키게 하는 core 장치이다. - Memory : short term memory(LAM) or longer term memory(hard drive, cd-ROM) 3 more things 1. motherboard(also called mainboard) 모든 것과 연결된 b..

변경 전 1. gnome-tweaks 다운받기 what is GNOME? 그놈은 GNU Network Object Model Environment의 약자로 리눅스 시스템에서 사용자가 쉽게 컴퓨터 어플리케이션을 설정할 수 있도록 도와주는 GUI이다. 리눅스는 윈도우와 다르게 설정을 할 때 주로 GUI 가 아닌 CLI(command-line interface)를 이용한다. 그놈은 윈도우에서처럼 쉽게 세팅을 GUI 환경에서 할 수 있도록 도와준다. GNOME tweaks 도구를 이용하면 리눅스 데스크탑을 쉽게 커스터마이징 할 수 있다. $sudo apt install gnome-tweaks 2. ocs-url 다운받기 ocs-url은 우분투 환경에서 install을 도와주는 프로그램이다. ocs-url을 통해..

1. setup 깃 설치하기 git : all the commands git --version .gitconfig : 모든 git에 관한 설정 ! git config --list config 파일 열기 git config --global -e config 파일을 에디터와 연결하기 git config --global core.editor "code" code 명령어를 입력하면 gitconfig 파일이 에디터에서 열림 code . 기본 정보 설정하기 git config --global user.name "sinyoung" //name 설정 git config --global user.email "sinyoung@naver.com" //email 설정 git config userr.name //sinyoung..

Step 4 : grid 자식에게 줄 수 있는 속성들 ( grid cell ) Grid Line -grid-column-start , grid-column-end column을 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; } -grid-row-start , grid-row-end row를 기준으로 몇 번째 줄부터 몇 번째 줄까지 차지할 지 정의 .item2{ grid-column-start : 2; grid-column-end : 4; grid-row-start : 1; grid-row-end : 3; } 단축형 .item2{ grid-column : 2 / 4; grid-row : 1 / 3; } ..

Step 1 : Grid vs Flexbox CSS Layout 을 배치할 수 있는 도구로는 Flexbox와 grid 두 가지가 있다. Flexbox의 경우 가로를 기준으로, 세로를 기준으로 1차원적으로 CSS 레이아웃을 배치할 수 있다. 가로로 묶거나 세로로 묶거나 Grid의 경우 가로축과 세로축을 기준으로 2차원적으로 CSS 레이아웃을 배치할 수 있다. Step 2 : Grid Grid는 container(부모)에 주는 속성과 grid cell(자식)에 주는 속성으로 나뉜다. container 에 꾸며줄 수 있는 속성들 - display - grid-template-columns - grid-template-rows - grid-template-areas - grid-gap grid cell에 꾸며줄..

1. DOCTYPE html> 의 의미 html 문서를 작성할 때 가장 첫 줄에 적는 은 웹 브라우저에게 어떤 버전의 HTML 을 사용했는지 알려주는 문구이다. 예시 HTML5 문서 strict HTML 4.01 문서 transitional HTML 4.01 문서 frameset HTML 4.01 문서 What is the DOCTYPE Declaration in HTML? The HTML document type declaration, also known as DOCTYPE, is the first line of code required in every HTML or XHTML document. The DOCTYPE declaration is an instruction to the web browser..

Step 4: Flexbox 자식에게 줄 수 있는 속성들 (item) HTML 문서 작성 1 2 3 CSS 작성 .container { padding-top : 100px; background : beige; height: 100vh; display : flex; } .item { width: 40px; height: 40px; border : 1px solid black; } .item1 { background-color: rgb(247, 114, 114); } .item2 { background-color: rgb(250, 134, 153); } .item3 { background-color: rgb(165, 100, 250); } - order default 값 : 0; 순서 임의로 지정하기 .co..

1. semantic html tag 작성 ⏱️STOPWATCH 00:00:00 시작 2. CSS 작성 *{ margin : 0; padding : 0; box-sizing: border-box; } main{ position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 551px; border : 1px solid #ccc; border-radius : 10px; } main h1{ font-size : 15px; color :#4285f4; font-weight : lighter; border-bottom : 1px solid #4285f4; padding : 10px; } main section.stopw..