반응형 CSS8 [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. 웹 기술 백과사전 MDN 웹 기술 백과사전 MDN MDN(Mozilla Developer Network) https://developer.mozilla.org/ko/ 개발자가 개발자를 위해 만든 사이트 HTML, CSS, JS의 백과사전이다. 여러 지침과 안내가 가득하다. HTML의 모든 태그들과 어떻게 적용되는지 나타내준다. (물론 CSS, JS 내용도 가득가득하다.) 예제는 자신이 직접 수정해보고 그 결과를 바로 확인해 볼 수 있다. 사이트 내에 검색 기능이 있지만 나는 구글에 검색한다. MDN에는 개발자들에게 도움이 될 수 있는 최신 정보가 업데이트 되기 때문에 수시로 들어가서 확인해 보는 것도 좋다고 한다. (난 아직 왕초보라 잘 모르겠다..) 2023. 10. 30. HTML/CSS/JS의 역할 HTML/CSS/JS의 역할 HTML, CSS, JS는 프론트엔드(Front-End) 개발을 위해 반드시 필요한 언어이다. 쉽게 말해 웹 사이트, 우리 눈에 보이는 영역을 구성하기 위해 반드시 필요하다. 프론트엔드 개발을 위해서는 이 세 가지 언어만 공부하면 된다. 이것들 외에 필요없는 것이 아니라 이것들 밖에 없다. 다만, 서로 대체 할 수 있는 것이 아니고 서로 어우러져서 하나가 되기 때문에 이 세 가지 중 하나라도 빠져서는 안된다. 한 문장을 예로 들어본다. " 왕초보 개발자는 공부한다. " 이 문장에서 HTML, CSS, JS가 어떤 역할을 맡는지 알아본다. HTML (HyperText Markup Language) 하이퍼텍스트(Hypertext)의 구조를 명시하는 언어(Markup Languag.. 2023. 10. 29. 이전 1 다음 반응형
