zooooss

css를 사용할 때에 필수로 활용해야 할 SCSS에 대하여 알아보겠습니다! - SCSS란 무엇일까? 왜 사용할까? CSS의 슈퍼셋으로 CSS에서는 불가능한 문법과 기능들을 사용할 수 있습니다! 변수, 함수, mixin, nesting 등을 사용하여 더욱 효율적으로 코드를 작성할 수 있답니다! .scss 확장자로 사용하며, 실제로 사용하기 위해서는 css파일로 컴파일을 해야합니다! 일반적인 CSS 문법과 동일하게 작성할 수 있으며, 추가적인 기능과 문법을 사용하여 더 강력한 스타일시트를 작성할 수 있습니다. - SCSS 사용법 많은 분들이 사용 중인 vscode를 통해 사용방법을 차근차근 알려드리겠습니다! 우선, Live Sass Compiler 확장자를 설치해주세요! 기존에 css파일을 생성해 코드를 작..

상대단위 rem과 em의 개념, 그리고 레이아웃 grid와 flex의 차이에 대하여 알아보겠습니다! - em과 rem em과 rem은 상대단위를 의미하는데요! 이와 반대의 개념으로는 자주 쓰이는 절대단위 픽셀값인 px가 있습니다! 상대단위 em과 rem은 기준에 따라 크기가 변화합니다! rem : 루트 엘리먼트의 font-size가 기준 em : 자신과 부모의 font-size가 기준 쉽게 설명하자면, em은 전체 html의 font-size에 상대적으로 계산되는 단위입니다! 어느 곳에서 사용되던 제일 상위로 설정된 font-size의 n배인 것입니다! 2em이면 2 * font-size를 의미하죠! 반면에, rem은 현재 rem이 쓰인 요소 안의 font-size나 부모 요소의 font-size를 따라..

뷰포트와 미디어 쿼리에 대한 개념을 익히기 전에 우선 반응형 웹에 대한 개념을 확실히 잡고 가는 것이 중요합니다 !!! - 반응형 웹이란? 기기(device)의 종류에 따라 디스플레이의 크기가 자동으로 변하는 웹페이지를 의미합니다! - 반응형 웹이 필요한 이유? 기기의 종류는 점점 더 빠르게 늘어나는 추세이기 때문에, 기기 화면의 크기에 따라 코드가 개별적으로 존재했던 과거의 방식을 유지할 수 없게 되었습니다. 따라서, 화면의 움직임에 반응하여 자동으로 페이지가 재배열되도록 코드를 설계하여 효율성을 극대화시킬 수 있었습니다. 자, 반응형 웹에 대해 이해하셨다면 이제 뷰포트와 미디어 쿼리의 개념에 대해 살펴봅시다 ! - Viewport이란 ? 현재 사용자에게 보여지고 있는 화면 디스플레이에 표시되는 영역을..

- var과 val의 차이점 코틀린에서의 변수는 크게 var과 val로 나누어집니다. val : 중복 변경 불가 var : 중복 변경 가능 val은 변하지 않는 값!이며 var은 변화하는 변수라고 생각하면 이해하기 쉽다. - 타입추론 우리가 입력한 값에 따라 추론하여 자동으로 타입을 결정해주는 것이다. (*꼭 값을 넣어야만*) ex) var Sunny = true 의 Sunny는 자동으로 boolean타입으로 설정됩니다. - 스트링 템플릿 $ print구문에 마우스를 가져다대면 템플릿으로 변환하기 버튼이 나타나는데, 여러가지 스트링을 더하는 대신에 한 개의 스트링을 이용한 하나의 구문으로 바뀌게 됩니다. 방법 1. $변수명 방법 2. ${} 중괄호로 묶어주기 ex) ${MyStr.length} 하나의 구..