둥글게 둥글게

* Git / GitHub 기본 동작 원리 (순서 - 선형적 구조) * git에는 총 4가지의 공간이 있으며, 이 4가지의 공간이 서로 파일의 변경 사항을 주고받는 것이 기본 원리 ***주의!) 중간에 단계를 뛰어넘을 수 없음 ① Working directory : 작업하는 파일이 있는 디렉터리 (소스코드 작업을 하고 있는 디렉터리 자체를 의미) * 명령어 : git add * 명령어를 통해 변경된 사항, 파일 등을 Staging Area로 올림 ② Staging Area : git에 등록할 (커밋) 파일들이 올라가는 영역(git에 등록하기 전에 변경사항이 있는 파일, 폴더 등을 등록하는 공간) * Staging Area에 올린 파일들 중 git에 등록하고 싶은 파일을 선택 * 명령어 : git comm..

* Git/Github 시작하기(Mac) 1. Home-brew 설치 > home-brew란? MAC 환경에서 제공하지 않는 유용한 패키지를 설치할 수 있도록 도와주는 패키지 관리자 (= MAC OS용 패키지 관리자) > 홈브루 사이트 (사진에 있는 해당 코드 복사) --> 터미널 on --> 붙여 넣기 --> brew --version 확인하기 2. Git (terminal에서 사용하기) ① git 사이트 'download for mac' --> brew install git --> git --version 확인하기 ② git 사용자 설정 * 로컬에서 사용할 (터미널) git 사용자 이메일과 이름을 설정 * git config 명령어를 사용하여 설정(git에 관한 설정을 추가/변경/삭제하는 명령어) *..

* 내가 생각하는 프론트엔드 개발자란? 내가 생각하는 프론트엔드 개발자는 여러 시각을 필요로 하는 파트인 것 같다. 코딩만 잘하면 되는게 아니라, 디자인적으로 센스도 있어야 하고, 사용자의 시각으로도 보며 개발을 해야 하기 때문이다. 빠르게 요구사항을 캐치하는 능력도 필요해 다양한 반면으로 센스가 있어야 할 것 같다. 또한 프론트엔드 개발자는 사용하는 개발언어나 툴 등이 계속해서 업그레이드되기 때문에 끊임없이 공부를 해야 하는 파트라고 생각한다. 물론 프론트엔드 뿐 아니라 개발자라는 직업 자체가 계속 공부를 해서 성장을 멈추지 않아야 하지만, 그중에서 프론트엔드 개발자는 유독 끊임없이 나오는 트렌드에 뒤처지지 않아야 하고, 계속해서 따라가야 하는 직업이라고 생각한다. * 프론트엔드와 백엔드 개발의 차이점..

SCSS 기본 실습 1. 선택자, 결합자 * 그룹 선택자 : , * 기본선택자 : *(전체),.(class), #(id), div(요소), [attr](속성) - 자식 결합자 : > (부모의 가장 아래에 있는 자식) - 자손 결합자 : v (띄어쓰기) - 일반 형제 결합자 : ~ (첫 번째 요소를 뒤따르면서 같은 부모를 공유함) - 인접 형제 결합자 : + (첫번째 요소 바로 뒤에 있으면서 같은 부모를 공유함) - 가상 클래스 선택자 : :hover, :focus, :checked, :disabled, :not() 등 - 가상 요소 선택자 : ::before, ::after, ::placeholder 등 ex) 기본선택자 class 적용하기 ex) 자손결합자 사용하기 SCSS와 CSS비교 ex) 자식 결..

* 프론트엔드 개발자 첫걸음 - 1주 차 * * 제로베이스 프론트엔드를 선택한 이유와 나의 다짐 제로베이스 커리큘럼이 시작되기 전, 작성한 나의 다짐은 아래 링크를 통해 확인할 수 있다. 나처럼 개발을 전공했지만 자신감이 이미 저 바닥을 뚫고 지하까지 내려간 분들이나 아무것도 모르는 비전공자 분들의 경우, 본인에게 맞는 부트캠프를 선택하는 데 있어 아래 링크를 참고하면 좋을 것 같다. https://cyjcyj.tistory.com/2 프론트엔드 개발자가 되기 위한 첫걸음! 이 글을 작성하는 오늘 나는 이제 막 학교를 졸업한 사회 초년생도 아니고, 직장인도 아니다. 대학교 전공은 컴퓨터공학을 나왔지만, 교수님의 추천으로 대학교를 졸업하기도 전에 첫 직장인 IT cyjcyj.tistory.com * 프론트..

CSS 기본부터 적용하기 1. 반응형 vs 적응형 - 반응형 : 모바일, 태블릿, pc 등 화면의 크기가 모두 다른데 뷰포트의 크기에 따라 화면을 조절하는 것 - 적응형 : 모바일, 태블릿, pc 등 화면에 맞춰 따로 만들어서 보여주는 것 2. 반응형 적용하기 - @media mediatype and (조건) {적용할 css} ex) 미디어타입 : screen / 조건 : 뷰포트 최대 화면이 400px 일 때까지 적용 (=max width) ex) 조건 : orientation : landscape 사용하기 --> 가로가 세로보다 길어질 때 (즉, 가로화면으로 될 때) 3. break 구간 설정 - 뷰포트를 모바일, 태블릿, pc 화면 크기만큼 break를 걸어 동작하게 하자 - 모바일퍼스트 : 작은 b..

CSS 기본부터 적용하기 1. grid - 2차원 표형태의 정렬(행과 열이 존재) ※ flex와 동일하게 container 속성인지, items 속성인지 정확하게 구분해서 사용하자 ex) grid를 적용해서 inline으로 변경이 불가능. 따라서 inline-grid를 사용해서 바깥쪽 layout에 inline을 적용, 안쪽 layout에 grid를 적용하자 2. grid-template (명시적) - column / rows 지정 가능, container 속성 - 행과 열을 비율 또는 수치로 몇 줄로 나눌 것인지 정함 ex) fr, px 등 사용이 가능함 ex) fr을 따로 반복해서 쓰지 않고, repeat을 사용 (몇 번 반복, 비율) 비율 단위로 px도 가능 - areas (container 속성)..

CSS 기본부터 적용하기 1. flex - 1차원 정렬로 가로/세로를 유연하게 조절하는 것 - flex container는 부모 (안에 자식 div box가 있을 경우) - flex items는 자식들을 말함 (하지만 자식 안에 또 자식이 있을 경우, 부모가 될 수도 있으니 주의) ※ flex는 부모-자식 간의 관계에만 사용 가능, 부모와 자식에게 쓰이는 속성을 제대로 구분해서 사용하자 - 같이 알아야 하는 개념 1) main axis(기본값일 때, x축) cross axis (기본값일 때, y축) 2) display 바깥쪽(display-outside) - block, inline 등 / display 안쪽(display-inside) - flex는 container 안에 박스들 정렬에 해당 ※ dis..

CSS 기본부터 적용하기 1. animaion - 구간 A, B, C, D 등 다양하게 있어도 된다. - animation 적용하려면 @keyframes를 만들어서 사용해야 한다. ex) @keyframes 이름 및 구간 정한 후, 사용 (0%와 100%는 기본값이므로 따로 지정하지 않아도 된다.) ※ 0%와 100%는 애니메이션이 적용되어 변경된 모습에서 다시 기존 모습으로 돌아오게 하는 법 ex) 기존 모습으로 돌아오게 하는 법은 한 가지가 더 있음 alternate 이용 (to-from도 같이 사용해야 적용이 된다.) ex) 마우스 hover 했을 때만 애니메이션을 적용하고 싶을 때는 animation을 button:hover에 지정하면 된다. ex) button 3개 만들어서 animation 연..

CSS 기본부터 적용하기 1. opacity 사용하기 → 투명도 적용 ex) 투명도를 적용하지 않은 상태 ex) 투명도를 적용한 상태 2. background-repeat → repeat-x 또는 repeat-y 사용해 보기 ex) repeat-y는 x, y축을 기준으로 y축으로 정렬 ex) no-repeat은 한 번만 적용 3. background-image → 위치 정하기 (x, y 값 이용), 기본값 : padding-box ex) 아무것도 적용하지 않은 상태 ex) x, y값에 100px씩 준 상태 ex) top, center를 준 경우 ex) exam의 700px에서 500px을 위치로 지정한 경우 4. background-origin → img 위치를 origin을 이용하여 정하기 ex) pa..