본문 바로가기

전체 글

 (64)
TIL no.17 - Linux 와 Terminal에 대한 기본 이해 ! 개발 부트 캠프 Wecode 2주차,,,, 블로깅이 저에게 항상 가장 어려운 숙제랍니다,, 스트레스 받지 말라는데,, 그게 스트레스,,,, 😫😫 그래도 나중에 쌓인거 보면 그렇게 뿌듯할 수가 없어요.. 내 피 땀 노력. 오늘은 공통 세션으로 Linux와 Terminal에 대해서 공부했는데요 ! 나중에 정리하면서 더 익숙해지기 위해 내용을 정리해보았습니다 ~ Linux 는 왜 중요한 것일까요 ? Linux는 오픈소스 OS 운영체제이자 IT 인프라 플랫폼입니다. 현재 가장 많은 사용자들에 의해 사용되는 운영체제이기 때문에 중요한 건 당연합니다 ! Linux로 시스템을 실행시키고 유지하며 관리하기 때문입니다. OS 는 CPU, 메모리, storage 처럼 시스템의 하드웨어와 리소스를 직접 관리하는 소프트웨어입..
TIL no.16 - Dev Tools 개발자 도구 우리가 개발을 하는데 있어서 개발자 도구에 대해서 아는 것은 당연히 중요하기 때문에 꼭 필요한 도구 몇가지에 대한 정보를 공부해봤습니다 ! 일단, 개발툴을 사용하기 위해서는 맥북은 Command + option + i 를 누르면 개발 도구를 꺼낼 수 있습니다. F12 로도 개발도구를 열 수 있습니다. 첫번째로, Elements ! Elements 는 개발자로서 당연히 알아야 할 부분 중 하나인데요 ! 브라우저의 html 구조를 확인하거나 사용된 태그나 css 속성들을 확인하기 위해 사용할 수 있습니다. 프론트앤드 개발자로서 css 파일로 스타일링한 브라우저 화면을 보면서 Elements 페이지에서 css를 수정하여 적용해보면서 한눈에 보기 쉽게 확인할 수 있습니다. - 빨간 동그라미를 친 버튼을 클릭하면..
TIL no.15 - 왜 semantic web으로 만들어야 하는가 ? 이번에는 왜 sementic 하게 web html 을 작성해야 하는가 ? 에 대한 주제로 글을 작성해보려고 합니다 ! **html 마크업을 시멘틱하게 작성해야 하는 이유 html으로 웹의 구조를 잡을 때, container box들을 너무 의미를 담고 있지 않은 div들로만 구성할 경우 복잡성이 높습니다. 컴퓨터와 사람 모두가 이해하기 쉬운 언어로 작성하는 것이 중요합니다. 또한 검색엔진에서도 시맨틱하게 작성된 html 구조에 대한 효율성이 더 높습니다. 이 외에도 다양한 semantic elements 가 있습니다. 위의 태그들은 보다시피 어떠한 content를 담고 있을 지 단번에 알 수 있습니다. 사람만 그렇게 생각하는 것이 아니라 컴퓨터 또한 의미적으로 잘 나타난 시맨틱 언어들을 더 쉽게 읽어들입..
TIL no.14 - 레이아웃의 모든 것 : CSS - position 속성 - relative, absolute, fixed position은 css를 사용하여 HTML 의 레이아웃을 구성할 때 중요하게 작용하는 속성입니다. 블로그의 이전에 글로 작성한 적이 있지만 레이아웃을 설명할 때 빠질 수 없는 부분이기 때문에 한번 더 정리하도록 하겠습니다 ! position은 기본적인 default 값으로 static이라는 친구를 가집니다. 말 그대로 기본 속성이기 때문에 static에 대한 설명은 넘어가서 ~ *relative는 원래 위치에서 적용한 position의 위치로 이동하는 속성값입니다. 연두색 박스에게 position:relative; 를 적용시키고 top, right, left, bottom 중에 원하는 값만큼을 부여한다면 ~! .green_box..
TIL no.13 - Git / Github 이란 무언인가? html, css, JavaScript 의 기초를 배우면서 무언가를 만들었을 때, Github 에 저장한다는 것은 당연히 알고 있었지만 단순히, Github 홈페이지에서 new repository를 생성하여 업로드 하거나 Github Desktop app을 통하여 업로드했었다. Git 명령어를 이용하여 terminal 에서 다룰 수 있는 것이 중요하다는 것을 어느 정도 알고 있었기 때문에 배워야 겠다고 생각은 했었다. wecode의 4주차 스터디로 Git / Github 을 공부해야 했기에 알아가기 시작했지 그것이 아니었다면 또 미뤄두었을 것 같았다 . 알고 익숙해지면 편하다는 Git / Github 그리고 그 용어에 대해서 이해하고 간단하게 알고 있어야 할 명령어들을 정리해보았다. Git 이란 무엇인가..
TIL no.12 - div를 브라우저 화면 정가운데에 위치시키기 공부를 할 때마다 모르는 css를 찾아가며 배우는데도 뒤돌아서면 까맣게 잊어버리더라구요.. 그래서 매번 검색을 반복하다 검색한 횟수가 많아지면 자동적으로 습득되는 방식으로 css를 하나씩 제 것으로 만들 수가 있었습니다😫 웹사이트를 클론코딩할 때나, html을 구성할 때에도 div를 화면 정가운데에 위치시키는 방법에 대해 하나하나 해보게 되는데 그러다가 또 검색으로 이어지는 저를 보고 이번에는 정리해둬야겠다고 생각했습니다 !! 1. 첫 번째 방법은 margin-top 또는 margin-bottom 을 이용해 가운데로 위치시키는 방법입니다 ! div에 width를 반드시 지정시켜주어야 합니다. div를 정가운데에 위치시키기 위해서는 margin을 auto로 지정해주었을 때 가로에서 가운데에 위치합니다. 세..
TIL no. 11 - todo 만들면서 JavaScript 모르는 것들 정리 Create ul and li elements in javacript var test = document.createElement('section'); test.setAttribute('id', 'test'); var ul = document.createElement('ul'); document.body.appendChild(test); test.appendChild(ul); for (var i =0; i < array.length; i++) { var li = document.createElement('li'); ul.appenChild(li); li.innerHTML = li.innerHTML + array[i]; } createElement 함수 생성하고자 하는 요소가 있을 때, 이 함수를 이용하여..
TIL no.10 - Array 배열 : JavaScript 우리는 두가지 방법으로 빈 배열을 지정할 수 있다. var friends = []; var friends = new Array() Array Method push / pop -push : 배열의 맨 끝에 추가하는 것을 말합니다. var colors = ["orange", "red", "green"]; colors[3] = "yellow" 위의 코드처럼 입력한다면 배열의 index를 알고 그에 맞게 값을 넣을 수 있습니다. 하지만 push를 이용한다면 배열의 순서를 몰라도 맨 마지막에 새로운 값을 추가할 수 있습니다. var colors = ["orange", "red", "green"]; colors.push("yellow"); 위의 두 방법 모두 아래와 같은 결과로 맨 마지막에 값을 추가할 수 있습니다..

티스토리툴바