프론트엔드 정복하기

SASS, SCSS, LESS 비교 SASS, SCSS VS LESS SASS, SCSS LESS 구축환경 Ruby 환경 JS 문법을 취하고 Node.js 기반 접두어 달러 $ @ 변수 예시 $test @test 대입 예시 $test : 10px @test : 10px SASS VS SCSS *Sass는 css를 확장한 메타언어이고, 이는 SASS, SCSS라는 2가지 기법을 가지고 있다. SASS기법이 먼저 나오고 SCSS기법이 연이어 나왔는데, SCSS기법을 더 많이 쓰는 추세라고 한다. SASS SCSS like 툴 ruby like (Ruby를 설치해야 SASS를 사용할 수 있다.) css like 괄호, 세미콜론 사용 중괄호, 세미콜론 사용 x => 대신 indent를 활용 CSS와 거의 비슷 ..

https://m.blog.naver.com/PostView.nhn?blogId=hwangmari&logNo=221370637608&proxyReferer=https:%2F%2Fwww.google.com%2F 텍스트 애니메이션 https://freefrontend.com/css-text-animations/?fbclid=IwAR1EICEne-rpaLLFhrS078_qu0ylfyNssiblfSDvP--62qd_jNp8H2A9dkE 로딩 애니메이션 rwdb.kr/pageloadings/ (# 로딩 애니메이션 모음) ㅇ;ㅣ라고 검색

0. input의 label 높이 조정 : position 속성 이용 : 체크박스와 라벨에 각각 position:relative; 값을 부여하고, top값을 조정한다. https://www.codingfactory.net/10715 0. CSS에서 특정 input type을 선택하고 싶을 때 : input[type="text"] // type="text"인 input : input[readonly] // readonly 속성을 가지고 있는 input : input[value~="submit"] // value속성이 submit 문자를 포함하고 있는 input : a[href^="https"] // href 속성이 https 문자로 시작하는 a요소 : a[href$="localhost"] // href 속..

**체크박스를 직접적으로 꾸미는 것은 어렵다. 따라서, 체크박스와 연결된 '라벨'을 만들어 꾸민다. (라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질 이용) 1. 체크박스 만들기 : for 속성 이용 > 체크박스-라벨 연결 ★★★ react에서는 for 대신 'htmlFor'을 사용할 것 2. 라벨 꾸미기 input[id="cb1"] + label { display: inline-block; width: 20px; height: 20px; border: 2px solid #bcbcbc; cursor: pointer; } 3. click 시 라벨 꾸미기 input[id="cb1"]:checked + label { background-color: #666666; } **hover >..

*반응형 필수적 태그 :

Grid System이란?) 반응형, 유동형 레이아웃을 지원하는 구역 분할 시스템 (총 12분할) -class명 : .col-lg-(1~12) // 1200px보다 클 때 - .col-md- // 992px보다 클 때 - .col-sm- // 768px보다 클 때 - .col-xs- // 768px보다 작을 때 .col-lg-12 : 꽉 채우겠다. .col-lg-6 : 절반만 채우겠다.