미디어 쿼리를 사용하여 변수 변경하기 CSS 변수는 미디어 쿼리를 사용하는 방식을 단순화할 수 있습니다. 예를 들어, 화면이 미디어 쿼리 중단점보다 작거나 클 때 변수의 값을 변경할 수 있으며 사용되는 모든 위치에 스타일이 적용됩니다. 미디어 쿼리의 :root 선택기에서 --penguin-size가 재정의되고 200px 값이 지정되도록 변경합니다. 또한 --penguin-skin을 재정의하고 검은색 값을 지정합니다. 그런 다음 미리 보기의 크기를 조정하여 이 변경 사항이 실제로 적용되는지 확인합니다.
Change a variable for a specific area When you create your variables in :root they will set the value of that variable for the whole page. You can then over-write these variables by setting them again within a specific element. Change the value of --penguin-belly to white in the penguin class.
Inherit CSS Variables When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties. To make use of inheritance, CSS variables are often defined in the :root element. :root is a pseudo-class selector that matches the ..
Create a custom CSS Variable To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this: --penguin-skin: gray; This will create a variable named --penguin-skin and assign it the value of gray. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray. TEST In the penguin class, create a variabl..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once Use CSS Variables to change several elements at once CSS Variables are a powerful way to change many CSS style properties at once by changing only one value. Follow the instructions below to see how changing just three values can change the styling of many elements. TEST In the..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-rgb-to-mix-colors Use RGB to Mix Colors Just like with hex code, you can mix colors in RGB by using combinations of different values. TEST Replace the hex codes in our style element with their correct RGB values. ColorRGB Blue rgb(0, 0, 255) Red rgb(255, 0, 0) Orchid rgb(218, 112, 214) Sienna rgb(160, 82, 45) I am red! I am o..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-rgb-values-to-color-elements Use RGB values to Color Elements Another way you can represent colors in CSS is by using RGB values. The RGB value for black looks like this: rgb(0, 0, 0) The RGB value for white looks like this: rgb(255, 255, 255) Instead of using six hexadecimal digits like you do with hex code, with RGB you spe..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-abbreviated-hex-code Use Abbreviated Hex Code Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it. For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for gree..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-hex-code-to-mix-colors Use Hex Code to Mix Colors To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components. From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors! For example, orange is pure..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-hex-code-for-specific-colors Use Hex Code for Specific Colors Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short. We usually use decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) are base 16 numbers. T..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-all-other-styles-by-using-important Override All Other Styles by using Important Yay! We just proved that inline styles will override all the CSS declarations in your style element. But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes Override Class Declarations by Styling ID Attributes We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put blu..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/override-styles-in-subsequent-css Override Styles in Subsequent CSS Our pink-text class overrode our body element's CSS declaration! We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class? TEST Create an additional CSS class called blue..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/prioritize-one-style-over-another Prioritize One Style Over Another Sometimes your HTML elements will receive multiple styles that conflict with one another. For example, your h1 element can't be both green and pink at the same time. Let's see what happens when we create a class that makes text pink, then apply it to an element. ..
Improve Compatibility with Browser Fallbacks When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems. When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background colo..
Attach a Fallback value to a CSS Variable When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid. Note: This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable. Here's h..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-styles-from-the-body-element https://www.freecodecamp.org/learn/responsive-web-design/basic-css/inherit-styles-from-the-body-element www.freecodecamp.org Inherit Styles from the Body Element Now we've proven that every HTML page has a body element, and that its body element can also be styled with CSS. Remember, you can s..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/style-the-html-body-element https://www.freecodecamp.org/learn/responsive-web-design/basic-css/style-the-html-body-element www.freecodecamp.org Style the HTML Body Element Now let's start fresh and talk about CSS inheritance. Every HTML page has a body element. We can prove that the body element exists here by giving it a backgro..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/understand-absolute-versus-relative-units Understand Absolute versus Relative Units The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit optio..
freeCodeCamp Basic CSS. Use Attribute Selectors to Style Elements CSS 기초. Attribute selector를 style에 적용하기 https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-attribute-selectors-to-style-elements Use Attribute Selectors to Style Elements You have been adding id or class attributes to elements that you wish to specifically style. These are known as ID and class selectors. There..
코딩캠프 정리노트 CSS기초. 시계방향 margin CSS기초. 시계방향 margin의 개념과 적용 https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element Use Clockwise Notation to Specify the Margin of an Element Let's try this again, but with margin this time. Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties indiv..
코딩캠프 정리노트 CSS기초. 시계방향 padding CSS기초. 시계방향 padding 개념 및 적용 https://www.freecodecamp.org/ Use Clockwise Notation to Specify the Padding of an Element Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties individually, you can specify them all in one line, like this: padding: 10px 20px 10px 20px; These four values work like a clock: top, right, b..
코딩캠프 정리노트 CSS기초. different margin CSS기초. different margin의 개념 및 적용 https://www.freecodecamp.org/ Add Different Margins to Each Side of an Element Sometimes you will want to customize an element so that it has a different margin on each of its sides. CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left pr..
코딩캠프 정리노트 CSS기초. different padding CSS기초. padding 다르게 적용하기 https://www.freecodecamp.org/ Add Different Padding to Each Side of an Element Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides. CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-..
코딩캠프 정리노트 CSS 기초. margin CSS 기초. margin 개념 정리 및 사용 https://www.freecodecamp.org/ Adjust the Margin of an Element An element's margin controls the amount of space between an element's border and surrounding elements. Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller. When you i..
Use a custom CSS Variable After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it. background: var(--penguin-skin); This will change the background of whatever element you are targeting to gray because that is the value of the penguin-skin variable. Note that styles will not be applied unless the variable names are an exact match. TEST..
Adjust the Padding of an Element Now let's put our Cat Photo App away for a little while and learn more about styling HTML. You may have already noticed this, but all HTML elements are essentially little rectangles. Three important properties control the space that surrounds each HTML element: padding, border, and margin. An element's padding controls the amount of space between the element's co..
Override Class Declarations with Inline Styles So we've proven that id declarations override class declarations, regardless of where they are declared in your style element CSS. There are other ways that you can override CSS. Do you remember inline styles? TEST Use an inline style to try to make our h1 element white. Remember, inline styles look like this: Leave the blue-text and pink-text class..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-a-css-class-to-style-an-element Use a CSS Class to Style an Element Classes are reusable styles that can be added to HTML elements. Here's an example CSS class declaration: .blue-text { color: blue; } You can see that we've created a CSS class called blue-text within the CatPhotoApp Click here to view more cat photos. Things ..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-selectors-to-style-elements Use CSS Selectors to Style Elements With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page. When you entered CatPhotoApp, you were styling that individual h2 element with inline CSS, which stands for Cascading Style Sheets. That's one way..