coding/html + css 100
css와 scss에서 마우스 클릭 가상 클래스 선택자를 알아보자
hover는 많이 쓰는데 마우스 클릭에 해당하는 가상 클래스는 잘 쓰지 않아서 정리해볼 겸 가져와봤습니다. hover는 마우스 오버 시 가상 클래스랍니다. 1. :active ① :active - 일단 이녀석의 이름은 :active입니다. - 헷갈리니 :(콜론)을 꼭 붙여서 외워주세요. - :hover와 동일하게 사용합니다. 2. css에서 가상 클래스 선택자 사용하기 button:active{ } ① 뒤에 붙이기 - 가상 클래스 선택자는 이렇게 적용하고 싶은 위치 뒤에 붙여주시면 됩니다. - 뜨어쓰기는 안됩니다. - 그 다음은 똑같이 중괄호 안쪽에 내용을 적어주세요. 3. scss에서 가상 클래스 선택자 사용하기 button{ &:active{ } } ① & 연산자 활용 - 물론 scss에서도 css와..
scss를 위해 컴파일러를 설치해보자
scss의 준비단계 컴파일러를 설치해봅시다!! 하드가 날아가니 다시 설치해야 하는 게 한두 개가 아니네요. 그래도 그 김에 하나라도 더 소개해드릴 수 있어서 잘됐죠? 1. 명령 프롬프트 ① 검색 - 시작 줄에서 [cmd]를 검색해 명령 프롬프트를 열어주세요. - 단축키 [window + S]를 누르면 검색창이 바로 뜬답니다. ② 명령 프롬프트 - 이 까만 화면이 명령 프롬프트입니다. - scss를 사용하려면 미리 친해져 봅시다. 2. 컴파일러 설치 ① 명령어 입력 - 설치 방법은 명령어만 알면 간단합니다. - [gem install sass]를 입력해주세요. - 오타가 업나 살펴보고 [엔터]키를 눌러주세요. ② 성공적인 설치 - 엄청 길게 뭔가가 써지고 설치가 됩니다. - 설치가 잘 된다면 표시된 것처럼..
Ruby 언어 설치하고 scss 시작하기
scss는 ruby라는 언어를 기반으로 동작한답니다. 그래서 일단 ruby 설치가 필요해요. 다만, mac을 사용하신다면 기본으로 깔려있으니 윈도우 사용자분들만 추가로 설치해주세요. 1. 설치 파일 다운 https://rubyinstaller.org/ RubyInstaller for Windows Is RubyInstaller for you? RubyInstaller is the easiest and most widely-used Ruby environment on Windows. And Ruby is a great language for beginners as well as professionals. It’s suitable for small scripts as well as large applicat..
css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!
css로도 약간의 애니메이션 효과를 넣을 수 있다는 사실 알고 계셨나요? transition을 이용하면 제이쿼리가 없어도 동적인 홈페이지를 만들 수 있답니다. 1. 예시 ① 사례 - 어떤 느낌인지 보여드리기 위해서 작업 중인 페이지의 애니메이션을 찍어봤어요. - 마우스를 올렸을 때 나오는 검은색 배경이 팍 나오지 않고 천천히 나오는 것을 알 수 있죠? - 잘 모르겠다고 해도 괜찮아요. transition을 적용하지 않았을 때와 비교해드릴 테니 걱정하지 마세요! 2. transition이 없을 때 See the Pen by ssimplay (@ssimplay) on CodePen. ① 기본 살펴보기 - 기본적으로 hover를 이용해 애니메이션을 만들어본 것입니다. - 정적인 홈페이지보다는 낫지만 그래도 아..
[sass/scss] 반복 스타일 한 번에 쓰기
css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..
![[sass/scss] 반복 스타일 한 번에 쓰기](https://i1.daumcdn.net/thumb/C100x100/?fname=https://blog.kakaocdn.net/dn/bzWFH1/btrd03Xxkof/rjamzxadU8nD8Tx0b6VDO1/img.png)
