Use the CSS Transform scale Property to Scale an Element on Hover The transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements. Here's an example to scale the paragraph elements to 2.1 times..
시놀로지 포토(Synology Photo) 패키지 사용법 및 후기 안녕하세요. 지난번 시놀로지 나스 DSM 7.0 업그레이드를 진행하면서, 잠시 소개했던 시놀로지 포토(synology photo)에 대해 설치 방법 및 사용 해오면서 느낀 점 등을 정리 해봤습니다. 시놀로지 나스 DSM 7.0 업그레이드 하기. 주의 사항 및 새로운 기능 시놀로지 포토(Synology Photo) 시놀로지 포토는 이번에 나스 운영체제인 DSM이 업그레이드되면서, DSM의 사진 백업 패키지의 양대산맥이라 할 수 있는 '포토 스테이션(photo station)'과 '모멘츠(moments)'를 병합시켜 탄생한 새로운 패키지입니다. DSM 7.0으로 업그레이를 하게 되면, 이제는 더 이상 '포토 스테이션'과 '모멘츠'를 사용할 수..
Use the CSS Transform scale Property to Change the Size of an Element To change the scale of an element, CSS has the transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page: p { transform: scale(2); } Increase the size of the element with the id of ball2 to 1.5 times its original size.
Create Texture by Adding a Subtle Pattern as a Background Image One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The background property supports the url() function in order to link to an image of the chosen texture or pattern. T..
Use a CSS Linear Gradient to Create a Striped Element The repeating-linear-gradient() function is very similar to linear-gradient() with the major difference that it repeats the specified gradient pattern. repeating-linear-gradient() accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge. The angle value is the direction of the gr..
Create a Gradual CSS Linear Gradient Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the background property's linear-gradient() function. Here is the general syntax: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); The first arg..
Adjust the Tone of a Color The hsl() option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of hsl() stand for saturation and lightness, respectively. The saturation percent changes the..
Adjust the Hue of a Color Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the hsl() property as an alternative way to pick a color by directly stating these characteristics. Hue is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hu..
Adjust the Color of Various Elements to Complementary Colors The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practic..
Learn about Tertiary Colors Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors i..
Learn about Complementary Colors Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your..
Center an Element Horizontally Using the margin Property Another positioning technique is to center a block element horizontally. One way to do this is to set its margin to a value of auto. This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the display property to block. Center the div on the page by adding a margin propert..
Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer..
Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requi..
Lock an Element to the Browser Window with Fixed Positioning The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it..
Lock an Element to its Parent with Absolute Positioning The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position..
Move a Relatively Positioned Element with CSS Offsets The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, us..
Change an Element's Relative Position CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers ..
앵커 태그의 호버 상태 조정 이 문제는 의사 클래스의 사용에 대해 다룰 것입니다. 의사 클래스는 요소의 특정 상태를 선택하기 위해 선택기에 추가할 수 있는 키워드입니다. 예를 들어, 앵커 태그의 스타일은 :hover 의사 클래스 선택기를 사용하여 해당 호버 상태에 대해 변경할 수 있습니다. 다음은 호버 상태에서 앵커 태그의 색상을 빨간색으로 변경하는 CSS입니다. a:hover { color: red; } 코드 편집기에는 모든 태그의 스타일을 검은색으로 지정하는 CSS 규칙이 있습니다. 사용자가 태그 위로 마우스를 가져가면 색상이 파란색이 되도록 규칙을 추가합니다. CatPhotoApp
단락의 줄 높이 설정 CSS는 텍스트 블록에서 각 줄의 높이를 변경하는 line-height 속성을 제공합니다. 이름에서 알 수 있듯이 텍스트의 각 행이 차지하는 수직 공간의 양을 변경합니다. p 태그에 line-height 속성을 추가하고 25px로 설정합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do..
단락 텍스트의 글꼴 크기 설정 CSS의 font-size 속성은 제목에만 국한되지 않고 텍스트가 포함된 모든 요소에 적용할 수 있습니다. 더 잘 보이도록 단락의 font-size 속성 값을 16px로 변경합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup..
여러 제목 요소의 글꼴 두께 설정 마지막 챌린지에서 각 제목 태그의 글꼴 크기를 설정했습니다. 여기에서 글꼴 두께를 조정합니다. font-weight 속성은 텍스트 섹션에서 문자가 굵거나 가는 정도를 설정합니다. Set the font-weight of the h1 tag to 800. Set the font-weight of the h2 tag to 600. Set the font-weight of the h3 tag to 500. Set the font-weight of the h4 tag to 400. Set the font-weight of the h5 tag to 300. Set the font-weight of the h6 tag to 200. This is h1 text This is h2 ..
font-size를 이용한 텍스트 크기 지정 font-size 속성은 주어진 요소에서 텍스트의 크기를 지정하는 데 사용됩니다. 이 규칙은 페이지에서 텍스트의 시각적 일관성을 만들기 위해 여러 요소에 사용할 수 있습니다. 이 챌린지에서는 제목 크기의 균형을 맞추기 위해 모든 h1에서 h6 태그에 대한 값을 설정합니다. In the style tags, set the font-size of the: h1 tag to 68px. h2 tag to 52px. h3 tag to 40px. h4 tag to 32px. h5 tag to 21px. h6 tag to 14px. This is h1 text This is h2 text This is h3 text This is h4 text This is h5 text..
text-transform 속성을 사용하여 텍스트를 대문자로 만들기 CSS의 text-transform 속성은 텍스트의 모양을 변경하는 데 사용됩니다. 실제 HTML 요소의 텍스트 내용을 변경하지 않고도 웹페이지의 텍스트가 일관되게 표시되도록 하는 편리한 방법입니다. 다음 표는 다른 text-transformvalues가 예제 텍스트 "Transform me"를 어떻게 변경하는지 보여줍니다. Value Result lowercase "transform me" uppercase "TRANSFORM ME" capitalize "Transform Me" initial Use the default value inherit Use the text-transform value from the parent eleme..
요소의 불투명도 줄이기 CSS의 opacity 속성은 불투명도를 조정하거나 반대로 항목의 투명도를 조정하는 데 사용된다. value 1 는 불투명하여 전혀 투명하지 않습니다. value 0.5 는 반투명입니다. value 0 는 완전히 투명합니다. 주어진 값은 일부 투명도가 있는 이미지이든 텍스트 블록의 전경 및 배경 색상이든 전체 요소에 적용됩니다. Link class를 사용하여 앵커 태그의 불투명도를 0.7로 설정하여 선택합니다. Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
카드와 같은 요소에 상자 그림자 추가 box-shadow 속성은 요소에 하나 이상의 그림자를 적용합니다. box-shadow 속성은 다음 값을 취합니다. offset-x(요소에서 그림자를 수평으로 밀어내는 거리), offset-y (요소에서 수직으로 그림자를 밀어내는 거리), 흐림 반경, 확산 반경 및 색상, 순서대로. blur-radius 및 spread-radius 값은 선택 사항입니다. 쉼표를 사용하여 각 상자 그림자 요소의 속성을 구분하여 여러 상자 그림자를 만들 수 있습니다. 다음은 대부분 투명한 검정색에서 약간의 흐림 효과가 있는 여러 그림자를 만드는 CSS의 예입니다. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);..
헤더와 단락 태그의 크기 조정 헤더 태그의 글꼴 크기(h1 ~ h6)는 일반적으로 단락 태그의 글꼴 크기보다 커야 합니다. 이를 통해 사용자는 페이지에 있는 모든 항목의 레이아웃과 중요성 수준을 시각적으로 쉽게 이해할 수 있습니다. font-size 속성을 사용하여 요소의 텍스트 크기를 조정합니다. 제목을 단락보다 훨씬 크게 만들려면 h4 태그의 글꼴 크기를 27픽셀로 변경합니다. Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
텍스트의 background-color 속성 조절 본문을 쉽게 읽을 수 있도록 전체 배경이나 텍스트 색상을 조정하는 대신 강조하려는 텍스트가 있는 요소에 배경색을 추가할 수 있습니다. 이 챌린지는 16진수 코드나 일반 rgb() 대신 rgba()를 사용합니다. rgba stands for: r = red g = green b = blue a = alpha/level of opacity RGB 값의 범위는 0에서 255까지입니다. 알파 값의 범위는 완전히 불투명하거나 단색인 1부터 완전히 투명한 0까지입니다. rgba()는 불투명도를 조정할 수 있으므로 이 경우에 사용하는 것이 좋습니다. 즉, 배경을 완전히 차단할 필요가 없습니다. 이 챌린지에는 background-color: rgba(45, 45, 45..
hr 요소를 사용하여 수평선 만들기 hr 태그를 사용하여 포함하는 요소의 너비에 가로줄을 추가할 수 있습니다. 이것은 주제의 변경을 정의하거나 콘텐츠 그룹을 시각적으로 구분하는 데 사용할 수 있습니다. 카드 제목이 포함된 h4 아래에 hr 태그를 추가합니다. 참고 : HTML에서 hr은 자체 닫는 태그이므로 별도의 닫는 태그가 필요하지 않습니다. GoogleAlphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
s 태그를 사용하여 텍스트 취소선 만들기 수평선이 문자를 가로지르는 경우 텍스트를 취소선으로 표시하려면 s 태그를 사용할 수 있습니다. 텍스트 섹션이 더 이상 유효하지 않음을 나타냅니다. s 태그를 사용하여 브라우저는 CSS의 요소에 line-through text-decoration를 적용합니다. h4 태그 안에 Google을 s 태그로 묶은 다음, 취소선 형식이 없어야 하는 Alphabet이라는 단어를 그 옆에 추가합니다. Google Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin