오꾸오꾸(오늘도 꾸준히 오랫동안 꾸준히)

재사용할 css선언하는 기능입니다. @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; /* 사용 */ } div { @include large-text; } 가변 인수 입력할 인수의 개수가 불확실한 경우가 있습니다. 그럴 경우 가변 인수를 사용할 수 있습니다. /* 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 */ @mixin b..

.section { width: 100%; .list { padding: 20px; li { float: left; } } } & (상위 선택자 참조) 부모 선택자를 선택할 때 사용합니다. .btn { position: absolute; &.active { color: red; } } .list { li { &:last-child { margin-right: 0; } } } & 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용할 수도 있습니다. SCSS .fs { &-small { font-size: 12px; } /* 이름을 새로 지정하는 방법 */ &-medium { font-size: 14px; } &-large { font-size: 16px; } } CSS .fs-small..

Sass는 css에 변수 개념을 도입해줍니다. 변수로 사용 가능한 형태는 숫자, 문자열, 폰트, 색상, null, list, maps가 있습니다. 변수를 사용할 때는 php같이 $문자를 사용합니다. SCSS $color-primary: #e96900; $url-images: '/assets/images/'; $w: 200px; .box { width: $w; margin-left: $w; background: $color-primary url($url-images + 'bg.jpg'); } 유효 범위 SCSS의 변수엔 변수 범위가 있습니다. 변수를 특정 selector에서 선언하면 해당 selector에서만 접근이 가능합니다. 선언된 블록({})내에서만 유효범위를 가집니다. SCSS $color: #33..

CSS가 복잡한 언어는 아니지만 작업이 크고 고도화 될수록 불편함이 생긴다. 이에 Sass는 불필요한 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 등 프로젝트가 커지면서 복잡해지는 CSS 작업을 쉽게 해주며, 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와준다. SCSS 설치 및 컴파일 컴파일러 설치는 이 블로그를 참고했습니다. 출처: https://inpa.tistory.com/entry/SCSS-💎-SassSCSS-란-설치-및-컴파일 [👨‍💻 Dev Scroll] SCSS 파일을 만들때 _을 넣는건 css로 변환되지 않길 원하는 것들을 저장함 & 변수 선언(var, const, let) 과 같은 개념이라고 할 수 있다. // _variables.scss ..

처음 레이아웃 디자인을 할 때 가장 많이하는 실수가 있습니다. 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 경우입니다. 박스의 크기를 디자인할 때 콘텐츠 영역만 고려하면, 개발 과정에서 처음 생각한 레이아웃을 벗어날 수 있습니다. 여백을 고려하지 않은 계산 방식은 레이아웃 디자인을 어렵게 만듭니다. 레이아웃 디자인을 조금 더 쉽게하는 방법이 있습니다. 여백과 테두리 두께를 포함한 박스 계산 법입니다. *은 모든 요소를 선택하는 셀렉터입니다. 모든 요소를 선택해 box-sizing 속성을 추가하고, border-box라는 값을 추가합니다.

defer 옵션을 사용하게 되면 html이 전부 파싱된 다음 분석이 완료된 다음에 contentLoaded가 출력되기 이전에 호출 이미지나 폰트를 쓰지 않는 이상 load보다 COMContentLoaded를 쓰는 것이 더 빠르게 사용자가 볼 수 있다.

브라우저 좌표에 있어 중요한 API인 Element.getBoundingClientRect()를 기억하자 Element.getBoundingClientRect: Width와 Height, 요소의 너비와 높이가 얼마인지 그리고 top과 left의 표지션에 대해서도 얻어올 수 있습니다. ※주의 CSS에서의 absolute를 이용해 right와 bottom을 줄때와 다르다는 것을 생각하자 absolute rigth을 주게되면 브라우저에서 제일 오른쪽부터 떨어져 있는 거리를 계산한다. Client x, y vs Page x, y 사용자가 조금 스크롤링한 상태에서 click 을하게 되면 Client X,Y와 Page X,Y의 값이 달라집니다.Page x,y는 페이지 자체에서 문서 자체에서 떨어져 있는 X와 Y를 ..

📌정렬 첫번째는 margin: auto로 div는 block level이라 한줄에 하나씩만 들어올 수 있어서 가능합니다.(단 margin이 수평적으로만 주어지기 때문에 수평 정렬만 가능하다는 점) 두번째로는 text-align: center은 이름만 보면 text만 정렬 가능할 것 같지만 block level이아닌곳에도 사용 가능합니다.(단 div는 상자이기 때문에 불가능하고 auto처럼 수평정렬만 가능합니다.) 세번째로는 transform: translate(50%, 50%);를 사용하여 이동해주는 기능입니다. 네번째로는 text를 가운데 정렬하는 방법인데 line-height를 사용한 방법인데 이 방법의 단점은 원래는 작은 막대기 만큼의 높이였던 아이를 큰 막대기 만큼의 막대기로 바꾸어서 가운데 정렬..

다양한 사이즈의 태블릿과 휴대폰이 출시됨으로 인해 많은 사용자들이 태블릿과 핸드폰으로 content를 소비하기 때문에 반응형으로 만드는 것이 당연시 되었다. CONTENT IS LIKE WATER: 컨텐츠를 물과 같이 유동적으로 만들어서 어떤 병에 담아도 유연하게 컨텐츠를 담아야한다. 📌Unit em: 타이포그래피에서 현재 지정된 포인트 사이즈를 나타내는 단위입니다. rem: root에 지정된 크기에 따라서 크기가 결정되는 아이 어떤한 폰트를 사용하느냐에 따라 같은 값을 주더라도 다르게 보입니다. 1vw는 viewport의 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 viewport의 크기와 관련이 있다는 것을 의미합니다. margine: auto

📌Media query Media query는 오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법이다.(웹사이트를 보고 있는 사용자의 스크린 사이즈) ​ @media screen and (max-width: px){}을 이용하여 몇 픽셀부터는 달라보이도록 만들 수 있다. 이를 통해 스크린이 사이즈를 알 수 있다. ​ min 사이즈와 max 사이즈를 조절하여 단계별로 만들면, 스크린 사이즈의 범위를 알 수 있다. ​ 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다. ​ media screen에 (orientation:landscape)를 이용하면 가로모드 인지 구별 할 수 있습니다. (orientation: portration) 세..