You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[SCSS] 💎 함수형 프로그래밍 (mixin / functions)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6OMyx%2FbtrhdVXuYvL%2Fm3PdUmxkJtTOtGP9nH9fX0%2Fimg.png)
[SCSS] 💎 함수형 프로그래밍 (mixin / functions)
Mixin (믹스인) Sass Mixins는 스타일 시트 전체에서 재사용 할 css 선언 그룹 을 정의하는 아주 훌륭한 기능입니다. 약간의 Mixin(믹스인)으로 다양한 스타일을 만들어낼 수 있습니다. mixin 을 선언 할 떄는@mixin 를 사용하며, 이를 사용 할 때는 @include 를 사용합니다. Sass @mixin large-text { /* 선언 */ font: { size: 22px; weight: bold; family: sans-serif; } color: orange; &::after { content: "!!"; } span.icon { background: url("/images/icon.png"); } } h1 { @include large-text; /* 사용 */ } d..
![[SCSS] 💎 불러오기 (Import) 기능](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlUoxu%2FbtrheAyeAlv%2FnqMYdY0KM1wShj5GCMOZr1%2Fimg.png)
[SCSS] 💎 불러오기 (Import) 기능
Import (불러오기) import 기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능입니다. 다음과 같이 @import directive 를 사용하여 특정.scss 파일을 불러 올 수 있습니다: @import "layout.scss"; 참고로, 확장자를 붙이지 않아도 됩니다. @import "layout"; @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합됩니다. 또한, 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있습니다. Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있습니다. 파일 확장자가 .css일 때 파일 이름이 http:/..
![[SCSS] 💎 연산자 (Operations) 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F7s160%2Fbtrhh73nC4E%2Fb3B9BDQaAHjJ7W9KiOq4V1%2Fimg.png)
[SCSS] 💎 연산자 (Operations) 정리
Operators (연산자) Sass 에서는 수학 연산자들을 사용 할 수 있습니다. 산술 연산자 + 더하기 - 빼기 * 곱하기 하나 이상의 값이 반드시 숫자(Number) / 나누기 오른쪽 값이 반드시 숫자(Number) % 나머지 비교 연산자 == 동등 != 부등 대소 / 보다 큰 = 대소 및 동등 / 보다 크거나 같은 논리(불린, Boolean) 연산자 and 그리고 or 또는 not 부정 숫자(Numbers) 상대적 단위 연산 일반적으론 절댓값을 나타내는 px 단위로 연산을 합니다만, 상대적 단위(%, em, vw 등)의 연산의 경우 CSS calc()로 연산해야 합니다. width: 50% - 20px; /* 단위 모순 에러(Incompatible units error) */ width: ca..
![[SCSS] 💎 중첩 기능 (Nesting)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb6tJ71%2Fbtrhly0uDLf%2FUzfITQNGiVMlXK3tcfk2LK%2Fimg.png)
[SCSS] 💎 중첩 기능 (Nesting)
Nesting (중첩) Sass 의 매우 유용한 기능중 하나는 선언을 중첩시킬 수 있다는 것 입니다. 어떻게 작동하는지, 또 어떤점을 주의해야 할 지 알아봅시다. 일반 CSS 에선 특정 선택자 자식,자손의 선택자를 스타일링 하려면 이렇게 따로따로 하나하나씩 선언해서 해야 했습니다. .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } 간단한 CSS 면, 큰 문제는 없지만, CSS 파일이 커지면 유지보수가 어려워지죠. Sass 에선, 이런식으로 중첩해서 작성하면 위와 같은 결과물을 얻을 수 있게 됩니다. .section { width: 100%; .list { padding: 20px..
![[SCSS] 💎 변수와 타입 (variable $)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdnvDQE%2Fbtrhgk2XGIA%2F2QKhD8hC7UvzwaXi7nEHf1%2Fimg.png)
[SCSS] 💎 변수와 타입 (variable $)
Comment (주석) Sass의 주석이 CSS 와 다른점은 한 줄 주석이 추가되었다는 점 입니다. Sass /* You can See me */ // You can't see me /* You Can See Mee */ Data Types (데이터 종류) Numbers 숫자 1, .82, 20px, 2em… Strings 문자 bold, relative "/images/a.png", "dotum" Colors 색상 표현 red, blue #FFFF00 rgba(255,0,0,.5) Booleans 논리 true, false Nulls 아무것도 없음. 컴파일 하지 않음. null Lists 공백이나 ,로 구분된 값의 목록 (apple, orange, banana) apple orange Maps List..
💎 SaSS & SCSS 소개 & 설치 세팅 💯 총정리
CSS 와 Sass(SCSS) Sass(SCSS)에 대해 얘기하기에 앞서, CSS에 대한 이야기를 짧게 해보자. 🤔 CSS의 단점 CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다. 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면 코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다. 프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 주구장창 해야한다. 이 밖의 CSS의 단점을 열거하면 다음과 같다. 선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다. function 같은게 없으니, 규모가 큰 프로제트의 경우 자동화하기..
![[CSS] 📚 미디어 쿼리 - 반응형 레이아웃](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbmZk3%2Fbtrhh7PT8vl%2FfGmW7ftyZUT37UvhkFJ3T0%2Fimg.jpg)
[CSS] 📚 미디어 쿼리 - 반응형 레이아웃
미디어 쿼리(Media Query) 란? 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같다. @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다. 미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있다. 1. HTML의 link태그의 media속성에 값을 설정해 주는 방법 2. css파일 내에 직접 media를 설정해 주는 방법 @media all and (min-width:480px) { ... } 3. media query를 설정한 파일을 css파일 내에서 impo..
![[CSS] 📚 그리드(Grid) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcHUmp9%2Fbtrg4KfAsQh%2FM6rlrkEeWkPlQA8PReOqY0%2Fimg.png)
[CSS] 📚 그리드(Grid) 💯 총정리
Grid Grid가 나오기 이전에는, float이나 table, flex를 이용해 레이아웃을 짰다. CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다. 그리드 용어 그리드 컨테이너 display: grid로 표기하며 모든 그리드 아이템의 부모 요소이다. 일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 Grid Items이 된다. HEADER MAIN ASIDE FOOTER [그리드 아이템 정렬] align-self 단일 그리드 아이템(Item)을 수직(열 축) 정렬 값 의미 기본값 normal stretch와 같습니다. normal start 시작점(위쪽) 정렬 center 수직 가운데 정렬 end 끝점(..
![[CSS] 📚 플랙스(Flex) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPGp00%2FbtrgUo5WGcq%2FQmnpxfv6BD3K0Lspkwzd6k%2Fimg.jpg)
[CSS] 📚 플랙스(Flex) 💯 총정리
CSS Flexbox Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. Q. 요즘 다들 grid 쓰는데, flex이제 안쓰는거 아닙니까? A. 정답은 No다. 물론 grid로만 레이아웃을 모두 구현은 가능하다. 하지만 단순한 컨텐츠를 가로 정렬하는데는 flex가 훨씬 간단하게 구현이 가능 하기 때문에, grid는 2차원 행렬 같이 큰 틀 레이아웃을 구현 할때 쓰고, flex는 1차원 행렬 같이 안의 컨텐츠 아이템을 가로 정렬할때 자주 쓴다고 보면 된다. 다음..
🎨 테이블(table) 꾸미기 CSS 속성 정리
CSS 테이블 스타일링 html 테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있다. 속성 설명 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함. border-spacing 테이블 요소(th, td)간의 여백을 설정함. caption-side 테이블의 캡션(caption)을 설정함. empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정함. table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정함. 강의에 사용할 예제 html 기본적으로 html의 태그는 행과 열을 정렬해주지만 아무 스타일 없이 적용된다. 참치 고래 날치 상어 문어..
🎨 float 속성 사용법 한방 정리
CSS Float float 프로퍼티는 해당 요소를 다음 요소 위에 떠 있게 한다. 여기서 떠 있다(float)는 의미는 요소가 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽에 이동하는 것이다. 그래서 보통 레이아웃을 구성할 때 요소를 가로 정렬하기 위해 사용되는 기법이다. 예를 들어, 문서에 사진과 그림이 있을 때, 그림을 왼쪽이나 오른쪽으로 띄워서 정렬 하거나 각 객체를 오른쪽이나 왼쪽으로 정렬하여 전체 문서를 배치(layout)할 때도 사용할 수 있다 float 속성 프로퍼티값 Description none 요소를 떠 있게 하지 않는다. (기본값) right 요소를 오른쪽으로 이동시킨다 left 요소를 왼쪽으로 이동시킨다. 사용법은 간단하다. 부유하게 하고 싶은 요소에 fl..
🎨 CSS 박스(Box) 모델 한눈에 쏙 정리
CSS box-model HTML 요소는 기본적으로 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box가 생기고 그 박스에 style을 주어서 문서를 꾸밀 수 있게 되는 것이다. 내용을 표시하는 영역(Content Area)부터 바깥 영역 여백(Margin)까지를 한 박스 모델의 영역이라고 보면 된다. Content : 태그 박스 안의 내용, 텍스트나 이미지 Padding : content 주위 영역 (태그 안) Border : padding과 content를 둘러싼 주위 영역 (태그와 밖의 경계) Margin : border의 밖 (태그와 태그 밖 밖깥 태그나 body 사이 영역) 콘텐츠 크기 속성 height / width / max-width / min-width 기본적으로 wi..
