2. Front-end/2-2. CSS

SCSS - [ 기본 사용법 ]

https://www.sassmeister.com/ SassMeister | The Sass Playground!SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading...www.sassmeister.comSCSS -> CSS 변환 코드 바로 확인 가능   1. 주석/* */    ->   CSS 로 변환 된 후에도 남아있음//         -> SCSS에서만 제공하는 문법. CSS로 변환 된 후에 안 남아있음   2. 중첩   3. 상위(부모) 선택자 참조- & : 상위 선택자 참조     4. 중첩된 속성반복되어 사용되는 특정한 속성명을 scss에서는 중첩된 속성을 통해 사용 가능속성 뒤에  : 기호 필요 and 중괄..

CSS - [ 배경 그라데이션 사이트 ]

https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile. cssgradient.io 참조 더보기 https://webtong.kr/bbs/board.php?bo_table=freesauce&wr_id=73 CSS 그라데이션을 편리하게 만들어주는 사이트 css를 자동으로 생성해주어 바로 적용할 수 있어 편리합니다.상단 붉은색바를 클릭하면 해당 사이트 이동합니다.색상 추가가 자..

CSS - [ text-overflow ... 처리 ]

아래와 같이 코드 작성하면 width: ~~px; // 너비 설정 overflow: hidden; // 넘칠경우 overflow 숨김 설정 text-overflow: ellipsis; // 글자가 설정한 너비를 넘을 경우 생략부호를 표시함 white-space: nowrap; // 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 텍스트가 width를 넘어설 경우 ... 처리된다. a태그에 적용하려 했는데 안되어 확인해보니 dispaly: block; 으로 변경해주니 잘 된다! 테이블의 경우에는 table 요소에 table-layout: fixed; 속성 추가해주기 2줄 넘었을 때 ... 처리하고 싶은 경우 width: 100%; overflow: hidden; text-overflow: ell..

CSS - [ Bootstrap ]

부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다 https://getbootstrap.com/ 참조 메인 화면에서 Get started 클릭 부트스트랩을 사용하려면 미리 만들어져있는 css와 js 파일이 필요하다. CSS는 CDN 방식으로 연결하면 되고, js는 Bundle과 Seperate 2가지 방식이 있다. 부트스트랩은 외부에서 Popper js라는 패키지를 가지고와서 활용하고 있다. Bundle은 Popper 패키지를 부트스트랩과 묶어서 제공하는 것이고, Seperate는 분리해서 제공하는 것이다. 만약 Popper js를 이미 프로젝트에서 사용하고 있다면 Bund..

CSS - [ 3D 애니메이션 (요소 뒤집기) ]

마우스를 올리면 요소가 뒤집히고 뒤에 있는 요소의 내용이 출력되도록 3D 애니메이션을 설정해보자. 우선 Html에 아래와 같이 앞면을 나타낼 요소와, 마우스를 올리면 나타날 뒷면을 나타낼 요소를 만들어준다. CSS에서 우선 요소를 감싸고 있는 container에 가로 세로 너비를 지정해주고(뒤에서 container에 hover 가상 선택자를 주고 container에 마우스를 올리면 3D 애니메이션 효과가 나타나도록 할건데, block 요소이므로 너비를 지정해주지 않으면 item의 범위 밖에서도 마우스를 올리면 효과가 나타나버림!), 원근감을 느낄 수 있도록 perspective 속성을 준다. 그리고 item에는 크기를 지정해주고 border-box로 box-sizing을 변경 후 요소가 뒤집혔을 때 뒷면..

CSS - [ Easing ]

https://greensock.com/docs/v2/Easing 여기서 Type (easeIn, easeOut, easeInOut) 과 강도 (Power) 에 따라 요소의 움직임을 확인할 수 있다. 아래쪽에 보면 코드가 뜨는데, 여기서 to 메서드의 매개변수로 현재 화면에 나타나는 움직임의 (요소, 시간, 옵션)이 뜬다. easeInOut으로 반복 재생하면 움직임이 끊기는 듯한 느낌 없이 부드럽게 움직이는 느낌을 줄 수 있다. 떠다니는 이미지 효과를 줄 때 아래와 같이 코드를 작성했다. 위의 코드에서 TweenMax를 gsap으로 대체했다고 보면 된다.