'coding/html + css' 카테고리의 글 목록 (6 Page)

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..

coding/html + css · 2021. 9. 23. 09:30

css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!

css로도 약간의 애니메이션 효과를 넣을 수 있다는 사실 알고 계셨나요? transition을 이용하면 제이쿼리가 없어도 동적인 홈페이지를 만들 수 있답니다. 1. 예시 ① 사례 - 어떤 느낌인지 보여드리기 위해서 작업 중인 페이지의 애니메이션을 찍어봤어요. - 마우스를 올렸을 때 나오는 검은색 배경이 팍 나오지 않고 천천히 나오는 것을 알 수 있죠? - 잘 모르겠다고 해도 괜찮아요. transition을 적용하지 않았을 때와 비교해드릴 테니 걱정하지 마세요! 2. transition이 없을 때 See the Pen by ssimplay (@ssimplay) on CodePen. ① 기본 살펴보기 - 기본적으로 hover를 이용해 애니메이션을 만들어본 것입니다. - 정적인 홈페이지보다는 낫지만 그래도 아..

coding/html + css · 2021. 9. 8. 09:30

css에서 transition을 이용해서 부드러운 전환 효과를 넣어보자!

[sass/scss] 반복 스타일 한 번에 쓰기

css에서 스타일이 반복될 경우 한 번에 처리하는 법을 알려드릴게요. scss의 장점 중 하나죠! 1. @mixin @mixin 그룹이름{ 속성: 속성 값; } ① mixin - mixin은 반복적으로 쓰이는 스타일을 그룹화해서 사용할 수 있게 해 줍니다. - 변수와 비슷한데, 변수가 한 가지만 넣을 수 있다면 mixin은 여러 개를 넣을 수 있습니다. - [@mixin 그룹 이름{ 속성: 속성 값; }]으로 사용할 수 있습니다. 2. 예시 ① 사용이 필요한 곳 예시 - 위의 코드에서 체크한 것처럼 서로 다른 부분에서 동일한 스타일이 적용된 적이 있을 거예요. - 같이 적자니 선택자가 애매하고, 그렇다고 그냥 적자니 반복되어서 코드가 예쁘지 않아요. - 이렇게 한 번 정리해줄 만한 곳에 사용해주시면 됩니..

coding/html + css · 2021. 9. 7. 09:30

[sass/scss] 변수 사용법

scss의 가장 큰 장점은 css와는 달리 변수 선언이 가능하다는 점이 아닐까 싶어요. 변수만 가능해도 유지보수가 한결 수월해지죠. 1. 변수 선언 ① 변수 - 변수 선언 방법은 [$변수 명: 변수 값] 형태로 사용해주시면 됩니다. - 사용하실 때는 [$변수 명]을 적어주시면 된답니다. - 여기에서는 변수에 생상 값을 넣어주었어요. ① 변수 사용 - 위에서 언급했든 [$변수 명]을 적어주시면 사용 가능합니다. - 여기에서는 태그의 색상에 값을 넣어줬네요. 이렇게 원하는 곳에 적어주시면 됩니다. - 변수 명은 나중에 다른 사람이 읽어도 어떤 것인지 알 수 있게 되도록 쉽고 명료하게 적는 게 좋아요. 2. 변수의 범위 ① 전역 변수 - 변수가 적용되는 범위가 정해져 있습니다. - 지금처럼 전역 변수, 즉 어..

coding/html + css · 2021. 9. 2. 09:30

[css] 미디어쿼리 max-width 사용시 주의점

지난 포스팅에 이어서 max-width에 대해 주의해야 할 점을 몇 가지 적어보겠습니다. 1. 적용 영역 ① 최댓값 - 미디어쿼리에서 max-width를 설정한다는 것은 0부터 설정값까지 적용을 시키겠다고 하는것입니다. - 위 이미지의 값은 브라우저의 사이즈가 0~800px 일 때 적용한다는 뜻과 같습니다. - 결국 브라우저 사이즈가 1200px 일 때는 적용되지 않으니 이런 효과를 이용해 반응형 웹을 만드는 것입니다. 2. 겹치는 영역 ① 순서 - 이번엔 코드로 살펴봅시다. 설명대로라면 0~1000px 적용, 0~600px 적용되는 미디어 쿼리가 두 개 있죠. - 그런데 0~600px 영역은 겹치는 영역입니다. - 이럴 때는 아래에 있는 코드가 적용됨으로 작은 영역을 아래에 적어주시면 됩니다. 3. 기..

coding/html + css · 2021. 7. 19. 09:30

coding/html + css 98