본문 바로가기

내가 해냄

(99)
패스트캠퍼스 챌린지 10일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 10일차. 챌린지 열흘만에... Part1을 마무리하고 Part2로 넘어왔다. Part2는 " Git을 활용한 버전관리" 로 버전관리와 Markdown에 관한 내용을 다룬다. 사실 깃에 관해서는 혼자 간단하게 사용법을 익힌 것이 전부라 항상 어렵다고 생각했었는데 이번 기회에 자세하게 배울수 있는게 참 좋은 것 같다. Read me 에 대해 작성할 때 Markdown에 대해서 처음 알게 되었는데 간단하게 썼었던 것들 이외에도 다양한 것들을 알아가면 좋을 것 같다. git Git(깃)은 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)이다. 깃을 사용하여 프로젝트를 좀 더 효율적으로 관리할 수 있다. vscode 터미널에서도 아래..
패스트캠퍼스 챌린지 09일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 09일차. 2월이 시작되었고 오늘은 민족의 명절 설날이다! 설날에도 챌린지 진행을 하기위해 강의를 켰다. 스타벅스 프로젝트가 거의 마무리 되었고 오늘은 푸터에 대해 정리를 해보려고 한다. 푸터 (footer) 하단또는 푸터(Footer)라는 이름을 가진 이 섹션은 문서로 치면 꼬리말 영역을 말한다. 하단/푸터 영역은 사용자가 의도적으로 제외하지 않는 이상 모든 페이지 최하단에 똑같이 표시된다. footer 태그에는 위와 회사의 정책, 주소, 전화번호, 저작권 표시 마크, 고객센터 정보, 사이트맵 등이 위치한다. ​ 푸터 (footer)의 기본적인 역할 ​(1) 다른 페이지로의 이동을 유도하여 사용자가 이탈하는 것을 예방한다. 스크롤 하여 정보가 끝나버리는 페이지에 비해 페이지 끝에서 추가 정보를 ..
패스트캠퍼스 챌린지 08일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 08일차. HTML 파일을 작성할 때에 꼭 주의해야하는 부분이 있다. 바로 클래스명 작성인데 CSS를 입혔을 때에 원하지않는 부분까지 영향을 끼치지않기 위해서는 클래스명 정하는데 중복없이 잘 적어야한다. 비슷한 경험을 1월 모각코를 진행할 때에 겪었었는데, 클래스가 많아지면서 이름을 정하는데에 헷갈리고 많이 헤맸었던 경험이 있다. 당시에는 BEM에 대하여 몰랐을 때지만 지금은 강의를 통하여 BEM에 대하여 공부하였다. BEM이 무엇인지 간단하게 알아보자. BEM ( Block Element Modifier) HTML 클래스 속성의 작명방법이다. 요소__일부분 : Underscore(Lodash) 기호 2개로 요소의 일부분을 표시한다. 요소--상태 : Hyphen(Dash) 기호 2개로 요소의 상태..
한빛미디어) 혼공학습단 7기「혼자 공부하는 자바스크립트」3주차 혼공학습단 3주차. 이번 주에는 배열, 파괴적 처리와 비파괴적 처리, 반복문 에 대해서 공부하였다. 배열(Array) 배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형이다. 배열은 대괄호[ ... ]를 사용하여 생성하고 내부의 값은 쉼표( , )를 구분하여 입력한다. 이때 배열 내부의 들어있는 값을 요소(element)라고 하며, 어떠한 종류의 자료형도 요소가 될 수 있다. 다음과 같이 입력하게 간단하게 배열을 만들고 출력할 수 있다. const array = [ "choonsik", 2022, true, function() {}, {} ] array (5) ['choonsik', 2022, true, ƒ, {…}] 다음과 같은 배열에서 맨 앞의 ( 5 )는 요소의 갯수가 되며 'choons..
패스트캠퍼스 챌린지 07일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 7일차. 오늘은 수업 진행중에 헷갈리는 부분이 있어서 짧게 개념정리를 하고 간단하게 정리를 해보았다. 바로 절대경로와 상대경로에 관한 것인데, 간단하게만 알고 넘어갔어서 그런지 이번에 다시 정리해보게 되었다. 프로그래밍에 있어서 절대경로와 상대경로의 개념을 구분하기 어렵다면 프로그래밍 할 때에 까다로울수가 있기에 이번에 확실하게 짚고 넘어가보려한다. 경로 우선 경로라는 것은 파일이 어디에 위치하는지, 위치되어있는 그 장소를 찾아가는 것을 경로라고 한다. 폴더는 계층 구조로 되어있기때문에 디렉토리에서 경로를 모두 표기한 것을 절대 경로라고 한다. 현재 폴더에서 목적 폴더까지의 경로를 나타 내는 것은 상대경로라고 한다. 절대경로 절대 경로란 최초의 시작점으로 경유한 경로를 전부 기입하는 방식이다. 시작점의 ..
패스트캠퍼스 챌린지 06일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 6일차. 챌린지를 진행한지 약 1주일 정도가 되었다. 50일 동안 진행하는 프로젝트이기는 하지만 문득 너무 정해진 것 없이 강의를 수강하고 있다는 생각이 들었다. 진도를 많이 빼려던 어제의 내 목표와도 다르게 강의 4개정도밖에 듣지 못했고(강의가 조금 길다...) 이러다가는 50일이 되어도 강의를 반절도 진행하지 못하면 어떡하나 싶은 걱정이 들었다. 그리하여 챌린지에 나만의 룰을 살짝 추가해보기로했다. 바로 일일 강의 계획서 작성이다! 강의 시작전에 계획서를 따로 작성하지 않았기에 중간에 진행하는 것이 조금 웃기기는 하지만.. 7일차의 시작은 강의 계획을 작성하는 것으로 시작해보도록 하겠다. 주간 목표를 간단하게 나눈뒤 일일 목표를 세세하게 정리하여 하루하루 그 날의 목표는 다 끝내는 것으로 목표를 잡고..
패스트캠퍼스 챌린지 05일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 05일차. 스타벅스 웹 사이트의 상단 메뉴 부분 만들기를 끝냈다. 사실 혼자서 한다면 절~~대 못했을 거 같지만 강사님이 이해하기 쉽게 CSS요소들을 전부 설명해주시기에 차근차근히 따라나가고 있는 중이다. 이전에 메뉴 버튼을 만들고나서 버튼 하단의 펼쳐지는 드롭다운 메뉴들을 만들었는데 구조적으로도 차근차근 설명을 잘 해주셔서 한눈에 파악하기 쉽도록 정리를 해보았다. COFFEE 라는 메뉴 버튼의 드롭다운 메뉴로 커피/ 에스프레소 음료/ 커피 이야기/ 최상의 커피를 즐기는 법 이라는 1차 드롭다운 메뉴가 있다. 각각은 li 구조를 가지게 되고 보기 쉽게 li1, li2, li3, li4로 구분지어 각각의 태그를 만들어주었다. 또한 각 드롭다운 메뉴의 소메뉴들로 있는 스타벅스 원두/ 스타벅스 비아/ ..
패스트캠퍼스 챌린지 04일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 04일차. 스타벅스 예제를 진행하였고 헤더와 드롭다운 메뉴들을 만들었다. 그간 position 개념에 대해서 조금 헷갈렸었던 부분이 있었는데 로고를 가운데로 배치하는 과정에서 position에 대해 조금 더 자세하게 배울 수 있었다. position : relative; position: relative 속성일 경우 상대적으로 위치를 지정할 수 있다. position: relative;의 top: 100px; left: 100px; 속성 때문에 원래 위치보다 위에서 100px, 왼쪽에서 100px 떨어진 위치에 배치된다. position: absolute; position: absolute 값일 경우 position: relative 속성인 상위(부모) 요소를 기준으로 상대 위치를 지정할 수 있다..