오열매의 코딩 공간

mixin을 이용하다가 parameter를 사용하지 않아도 default 값을 설정하고 싶을 때가 있다. 그런 경우에는 기존에 올렸던 포스팅처럼 변수를 파라미터로 보내어 if elseif 문으로 처리하는 방식은 적용되지 않는다. (parameter없이 사용 불가하다는 뜻) 프로젝트를 진행하고 있는데 위 박스에 있는 코드들이 자주 반복된다. 매번 쓰는 것도 상관은 없지만, 반복되는 코드들이 거슬려서 mixin을 사용하려 한다. @mixin flex-center($jcc: center, $aic: center) { display: flex; justify-content: $jcc; align-items: $aic; } 위 코드처럼 parameter 자리에 변수 및 default값을 직접 설정할 수 있다. 해..

웹 사이트에서 경고 문구를 띄우려는 경우에 사용할 수 있다. 하지만, 이 방식은 웹 페이지의 기본 동작을 일시정지 시킨다. 예를 들어 어떤 링크에 alert를 연결하여 사용한다고 하자. 링크를 누르면 해당 페이지로 넘어가야 하는데, 링크를 눌렀을 때 alert 에 해당하는 코드를 써놓으면 페이지로 이동하기 전에 경고 문구를 보여준다. 해당 경고문구가 사라지면 페이지를 이동한다. 이러한 이유(웹 페이지의 기본 동작 일시 정지) 때문에 개발자들이 많이 사용하지는 않는다. alert("Stop!") 참고) https://nomadcoders.co/javascript-for-beginners

JavaScript 파일에서 CSS를 변경하는 방법에 대해 정리한다. event를 활용하여 실습을 진행한다. 1) CSS 적용 순서 실습을 통해 살펴본다. step 1 > element를 찾는다. const text = document.querySelector(".container__contents"); step 2 > event를 listen한다. text.addEventListener("click", handleTitleClick); step 3 > event에 반응한다. function handleTitleClick() { const currentColor = text.style.color; let newColor; if (currentColor == "blue") { newColor = "toma..

document를 활용하면 많은 이벤트들을 다룰 수 있다. 간단한 예시를 통해 살펴보고, 원하는 이벤트를 찾는 방법에 대해서도 알아본다. 1) addEventListener const title = document.querySelector(".container__contents"); function handTitleClick() { title.style.color = "tomato"; } title.addEventListener("click", handTitleClick); 위 자바스크립트 코드를 활용하여 이벤트를 만들었다. document 및 querySelector로 불러온 객체를 활용하여 이벤트 및 함수를 다룬다. addEventListener 의 두 번째 파라미터에 함수명이 있는데, 원래 그 안에..

브라우저는 기본적으로 document라는 object를 가지고 있다. console.dir(document)를 입력하면 확인할 수 있다. 이처럼, 내가 입력하지 않은 사이트의 정보에 대해 접근하고 사용할 수 있다는 점은 아주 중요하다. JavaScript는 HTML을 읽어온다. 1) HTML 코드와 Element를 JS로 접근하기 document 객체에 있는 정보로 접근하는 것에서부터 모든 것이 시작된다. 예시로, getElementById 메서드를 통해 html 요소에 접근한다. const title = document.getElementById("contents"); 2) querySelector getElement 방식보다는 querySelector가 더 자주 쓰이는 편이다. CSS 방식으로 ele..

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

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 ..