반응형 Web/CSS6 [CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) [CSS] 다양한 폰트 사용하기 (feat. Google Fonts) CSS에서 'font-family' 속성으로 폰트(글꼴)를 설정할 수 있지만 그 수는 한정적이다. 다양한 폰트들을 무료로 제공해주는 사이트들이 존재하는데 그 중 대표적인 것이 'Google Fonts'이다. https://fonts.google.com/?subset=korean¬o.script=Kore Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 무료로 사용할 수 있는 폰트들을 확인할 수 있다. 필터를 통해서 크기, 언어, 디자인 등을 설정할 수 있다. 특정 언어에만 적.. 2023. 11. 17. [CSS] transition 애니메이션 부여하기 [CSS] transition CSS에는 한 요소가 다른 값으로 변화할 때 애니메이션을 부여할 수 있는 속성인 'transition'이 존재한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 일반적으로 'transition'이 적용되지 않은 모습이다. 마우스를 올렸을 때 즉각적으로 속성이 변한다. 'transition'은 애니메이션 효과를 주어서 시간에 걸쳐 부드럽게 변하도록 한다. See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'transition'은 property name, duration, timing function, delay의 4가지 값을 가지고 각 값은 생략이 가능하다.. 2023. 11. 13. [CSS] 상대 단위 em과 rem [CSS] em과 rem em과 rem은 CSS의 상대 단위이다. 'font-size' 속성을 기준으로 상대적인 크기를 나타낸다. 앞에 숫자를 붙여 1em, 1rem의 형태로 사용하고 숫자는 기준이 되는 'font-size'의 배수가 된다. (예를 들어 2em은 'font-size'의 2배 크기를 의미한다.) em과 rem은 어느 요소의 'font-size'를 기준으로 하는지에 따라 차이가 나타난다. em See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 'em'은 각 요소의 'font-size'에 상대적이다. 'padding'을 동일하게 설정했는데 각 요소의 'font-size'에 맞춰 다르게 나타났다. 'font-size'를 설정하지 않으면 부.. 2023. 11. 9. [CSS] 투명도 설정 (feat. opacity, rgba) [CSS] 투명도 설정 CSS는 요소의 투명도를 조절할 수 있는 여러 방법들이 존재한다. 1. opacity See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 0과 1 사이의 값을 허용한다. 'opacity'는 '불투명'을 의미하기에 값이 낮을수록 투명하고 높을수록 불투명하다. 요소 전체 투명도에 영향을 준다. 2. rgba See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen. 기존 'rgb'의 형태에 투명도를 추가한 것으로 4개의 값 중 마지막 값이 투명도를 나타낸다. 'opacity'와 동일하게 0과 1 사이의 값을 허용하고 값이 높을수록 불투명하다. 요소 전체에 영향을 주는 'opacity.. 2023. 11. 7. [CSS] %, 백분율 단위 (CSS percentage) [CSS] %, 백분율 단위 CSS에는 길이나 크기를 나타내는 단위들이 있는데 그 중 하나가 '%(percentage)'이다. '%'는 그 값이 다른 값과 항상 상대적으로 나타난다. 어떤 값의 백분율이 되는지는 경우에 따라 다르게 나타난다. 부모 요소의 값에 대한 백분율 .parent { background-color: gold; width: 120px; height: 80px; } .child { background-color: orange; width: 50%; height: 50%; } 퍼센티지 값은 부모 요소에 대해 상대적이다. 자식 요소의 너비는 부모 요소 너비의 50%, 높이는 부모 요소 높이의 50%이다. 여기서 자식 요소의 너비와 높이는 각각 60px, 40px와 같다. 만약 부모 요소의 .. 2023. 11. 3. [CSS] 적용 우선순위 [CSS] 적용 우선순위 한 요소에 대해 서로 중복되는 스타일이 충돌할 수 있다. CSS에는 충돌하는 스타일 중 어떤 것을 적용할 것인지에 대한 우선순위가 존재한다. 1. !important 속성 값 뒤에 "!important"를 입력한다. div { color: red !important; } 이 코드 위나 아래나 어떠한 방식으로든 모든 의 'color'를 다르게 설정해도 "red"로 적용된다. "!important"는 모든 우선순위를 무시하고 반드시 적용되도록 만든다. 이러한 특성 때문에 오히려 거의 사용되지 않는다. 2. 인라인 스타일 (inline) CSS가 아닌 HTML 태그 내에서 style을 적용하는 것이다. (HTML의 태그를 뜻하는 것이 아니다.) 나는 빨간색 CSS 파일보다 HTML 파.. 2023. 11. 2. 이전 1 다음 반응형
