오열매의 코딩 공간

오랜만에 자바스크립트를 다시 시작하시는 분들을 위해 요약본을 만든다. 새롭게 시작하시는 분들은 본 포스팅을 보는 것도 좋지만, 자세한 설명은 없을 예정이니 참고. (코드 및 실습 위주) 들어가기 전에.. ) javascript 파일을 html에 연동하는 방법 js 파일을 만들고, html의 body tag 맨 아랫부분에 위의 방식으로 코드를 추가한다. 기본 경로는 index.html이 있는 폴더이다. 1) Variables + camecase 로 변수명 설정 추천 + 템플릿 리터럴: 백틱(``)을 활용하여 문자열 안에 변수를 넣을 수 있는 방법. ${ } 안에 변수를 넣는다. 2) const, let 변수 선언 방식. const: constant(상수)라는 뜻으로, 값이 바뀔 수 없다. let: 도중에 ..

프로젝트 폴더에 연결된 Git 원격 저장소와의 연결을 해제하는 방법을 알아본다. git remote -v 위 명령어를 입력하면, 현재 내 프로젝트 폴더에 연결된 원격 저장소를 확인할 수 있다. 이 연결을 해제하려면 아래의 명령어를 입력하면 된다. git remote remove origin 명령어를 입력한 뒤, 다시 git remote -v를 입력하면 아무 것도 나오지 않음을 확인할 수 있다. (정상적으로 해제) 참고) https://ifuwanna.tistory.com/263

Mixins의 사용 방법 중 하나이다. 정의한 mixin에 기존 코드를 옮기는 방법이다. mixin에서의 코딩 문법과 활용하기에 적절하며, 반응형 웹을 위한 미디어 쿼리에도 활용할 수 있다. 메인 scss 파일에서 @include 와 mixin 이름 + 파라미터 를 선언하고, 그 안에 추가 속성을 넣어 선언한다. mixin 파일에는 파라미터와 추가 속성 값이 넘어가게 된다. 추가 속성 값은 mixin 파일의 @content 부분에 해당한다. 이를 if else 등에 적절히 활용하여 media query를 사용하는 코드이다. 위 media query에 사용한 변수 값을 정확하지 않으므로, 추후 포스팅에서 자세하게 쓸 예정이다. (사용 금지) 이런 방식이 있다는 정도만 소개하는 포스팅이다. 참고) https..

SCSS를 더욱 파워풀하게 쓸 수 있는 방식에 대해 소개한다. Mixins 와 Extends이다. 1) Mixins Mixins는 CSS를 '프로그래밍'하여 상황에 맞게 효과를 적용시키는 데 적합하다. 파일을 따로 분리하는 것이 좋다. 이름은 _mixins.scss로 하고 import 하면 된다. (확장자 .scss 는 생략 가능) 실습에 사용할 html 태그들이다. 상자 6개를 가지고 진행한다. 우측 상단이 _mixins.scss 이다. mixin을 사용할 땐, 메인 scss 파일에서 @include mixin명(파라미터) 로 사용한다. 좌측의 styles.scss에서 @include를 사용하여 변수를 보낸다. 함수를 사용하는 것과 같은 방식으로, 파라미터를 보내고 해당 변수에 맞는 값을 효과로 설정한..

네스팅과 변수를 선언하고 사용하는 방법에 대해 포스팅한다. 위 두 가지는 기본 사용법으로, CSS와는 아주 차별화되고 훨씬 편안한 방식들이다. 한 번 맛을 보면, 다신 CSS로 돌아갈 수 없다.(주관적 생각) 또한, SCSS로 BEM을 사용하는 방식도 위 두 가지 대상들을 통해 함께 알아본다. 1) Nesting 기존 CSS를 사용하려면, 태그나 클래스, 아이디 등을 대상으로 지정하여 '독립적'으로 속성을 선언해야 했다. Nesting은 이러한 틀을 깨버리는 아주 효율적인 방식이다. 하나의 태그 안에 다른 태그가 속해있다면, 처음 정의한 태그를 벗어나지 않고 그 안에 정의할 수 있다. 원래는 body 태그의 괄호를 닫은 뒤에 클래스명이 container인 태그에 대해 새롭게 괄호를 열어야 했다. 하지만,..

반응형 웹(Responsive Web) 사이트 제작에 도움을 주는 요소들이 있다. Grid cell에 관한 파라미터인데, 높이 또는 너비를 상황에 맞게 변화시켜준다. 주로 grid-template-columns / grid-template-rows 를 정의하는 repeat() 함수와 많이 쓰인다. 1) minmax 최소, 최대 길이를 지정한다. 예시와 함께 살펴본다. .container { height: 100vh; display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr)); grid-template-rows: repeat(3, 100px); gap: 20px; } minmax(100px, 1fr)로 설정했다. 이 뜻은, 각 셀을 100px ..

Flex-box와 마찬가지로, 대부분 부모 태그에서 컨트롤 한다. Flex-box도 매우 유용하지만, Grid가 더 필요한 경우도 있을 수 있다. 많이 사용하는 속성으로만 간단 요약하여 정리한다. 1) grid-template-columns / grid-template-rows 가장 중요한 속성이라고 생각한다. 그리드의 형태를 정의하는 속성 및 방식들이 여러가지 있고, 속성들 또한 다양하지만 기본적으로 이 속성을 사용하여 정의하는 것이 직관적이라고 생각한다. display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px 100px 100px; 각 행과 열에 대해 너비와 높이를 직접 지정해주는 방식이 기본 방식이다. Gr..

Flex-Box의 속성에 대해 아주 간단하게 코드를 통해서만 살펴본다. 속성들이 아주 다양하지만, 실용적인 속성 위주로만 포스팅한다. (전체 속성들을 알고 싶으면 따로 찾아봐야 한다.) 1. Flex-Box 정의) display:flex; 위 코드를 flex를 적용시킬 요소들을 감싸고 있는 부모 태그에 선언한다. 요소들이 main axis를 기준으로 한 라인에 있도록 한다. 2. flex-direction) flex-box는 main-axis와 cross-axis가 있다. flex-direction은 main-axis를 기준으로 설정한다. 위 그림의 굵은 선이 main-axis, 얇은 선이 cross-axis이다. flex-direction: row; 부모 태그에 선언한다. * row (default) ..

요소의 위치를 결정하는 position 속성은 아주 요긴하게 쓰인다. position에는 5가지 속성 값이 있다. static, fixed, relative, absolute, sticky 이다. 실습을 통해 순서대로 살펴본다. 들어가기 전에] 간단한 예제로 각 요소의 기준 및 위치 선정 방식, 속성을 그림으로 파악한다. 1 > 초기 위치 2 > 스크롤을 내린 상태 위 그림들을 기준으로 설명한다. 1) static 초기 요소의 상태. 아무런 설정을 하지 않은 상태이다. (default) 따라서 기준도 따로 없다. 2) fixed 브라우저를 기준으로 요소를 위치시킨다. 페이지의 맨 왼쪽 위의 꼭짓점(top: 0px, left: 0px)을 시작점으로 한다. 또한, 스크롤을 내리더라도 변함 없이 그 자리에 고..

media query는 반응형 페이지를 만들 때 필수 요소이다. 예를 들면, 페이지의 크기에 따라 웹 사이트 내부의 요소들의 크기나 배치가 달라지는 것 등이 있다. 주로 PC, 모바일, 가로모드, 세로모드, 휴대폰 기종 등에 따라 달라지게 한다. 위와 같은 상황에서 미디어 쿼리를 사용하는 것이 실용성이 좋지만, 일단은 기본 사용법에 대해서만 알아본다. 사진 2개를 같이 보면서 봐야 한다. 왼쪽의 html 파일에서, main 태그에 쌓인 부분은 두 번째 사진에서의 가운데에 속한다. 일반적이 글이 보인다. 이를 css 파일에서 media query를 통해 최대와 최소 너비에 대한 조건을 부여했다. max-width: 최대 너비. (최소 너비를 설정하지 않았다면, 0부터 해당 너비까지) ... 예제에서는 80..