em 태그를 사용하여 텍스트를 기울임꼴로 표시 텍스트를 강조하려면 em 태그를 사용할 수 있습니다. 브라우저가 font-style: italic의 CSS를 적용하므로 텍스트가 기울임꼴로 표시됩니다. 강조를 주기 위해 단락 태그의 내용 주위에 em 태그를 감쌉니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
u 태그를 사용하여 텍스트에 밑줄 긋기 텍스트에 밑줄을 긋기 위해 u 태그를 사용할 수 있습니다. 이것은 텍스트의 한 부분이 중요하거나 기억해야 할 부분을 나타낼 때 자주 사용됩니다. u 태그를 사용하여 브라우저는 CSS의 text-decoration: underline;를 요소에 적용합니다. 텍스트 주위에만 u 태그를 감쌉니다. 참고: 링크와 혼동될 수 있는 경우 u 태그를 사용하지 마십시오. 앵커 태그에는 기본 밑줄 서식도 있습니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
Strong 태그를 사용하여 텍스트를 굵게 만들기 텍스트를 굵게 만들려면 strong 태그를 사용할 수 있습니다. 이것은 종종 텍스트에 주의를 기울이고 중요함을 상징하는 데 사용됩니다. Strong 태그를 사용하여 브라우저는 요소에 font-weight: bold; 를 적용합니다. P 태그안의 'Stanford University' text 를 Strong 태그로 묶으시오. (period를 묶지말 것) Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
height 속성을 사용하여 요소의 높이 조정 너비 속성과 유사하게 CSS의 height 속성을 사용하여 요소의 높이를 지정할 수 있습니다. 다음은 이미지의 높이를 20px로 변경하는 예입니다. img { height: 20px; } h4 태그에 height 속성을 추가하고 25px로 설정합니다. NOTE : 이 챌린지에서 테스트를 통과하려면 100% 확대/축소가 필요할 수 있습니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
width 속성을 사용하여 요소의 너비 조정 CSS의 너비 속성을 사용하여 요소의 너비를 지정할 수 있습니다. 값은 상대 길이 단위(예: em), 절대 길이 단위(예: px) 또는 포함하는 상위 요소의 백분율로 제공될 수 있습니다. 다음은 이미지의 너비를 220px로 변경하는 예입니다. img { width: 220px; } 전체 카드에 width 속성을 추가하고 절대값 245px로 설정합니다. fullCard 클래스를 사용하여 요소를 선택합니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
미디어 쿼리를 사용하여 변수 변경하기 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..
시놀로지 나스 DSM 7.0 업그레이드 하기. 주의 사항 및 새로운 기능 안녕하세요. 오늘은 시놀로지 나스 DSM 7.0 업그레이드를 진행하면서 무엇이 달라졌는지와 안전하게 업그레이드를 마치는 과정까지 정리해봅니다. DSM 사용 방법과 최초 셋업에 대해서는 아래의 포스팅을 참고 바랍니다. 시놀로지 나스 NAS 설치, 최초 세팅 셋업 DSM 설정 방법 DSM 7.0 업그레이드 주요 사항 및 사전 점검 내용 중요 사항 DSM 7.0-41890은 SAN Manager 1.0.1-0197, Active Insight 1.0.2-1007 및 SMB Service 4.10.18-0223의 문제를 수정하기 위해 7월 19일에 업데이트되었습니다. 이 버전의 DSM을 이미 설치한 사용자는 패키지 센터에서 패키지를 업데이..
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-..