필굿스토리

인기글

2021 광복절에 봉환되는 홍범도 장군 이야기

2021 광복절에 봉환되는 홍범도 장군. 그의 파란만장한 삶. 안녕하세요. 오늘은 이번 광복절에 이역만리 타국에서 봉환될 예정인 봉오동 전투의 영웅이자 독립운동가이신 홍범도 장군에 대해 알아보고, 마침내 고국으로 봉환될 수 있었던 과정에 대해 정리해봅니다. 청와대는 2021년 8월 15일 광복절을 맞아 홍범도 장군의 유해를 카자흐스탄 크즈올르다에서 모셔올 예정이라고 밝혔는데요. 홍범도 장군의 유해는 8월 15일 저..
알쓸 정보
2021.08.14

Visual design. Center an Element Horizontally Using the margin Property

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..
Visual design
2021.09.29

코딩, 프로그래밍 쉽게 시작하는 법

코딩, 프로그래밍 쉽게 시작하는 법 오늘은 요즘 짬짬이 배우고 있는 코딩에 대한 얘기해 보려 한다. 소프트웨어 엔지니어. 흔히들 얘기하는 프로그래머들이 사용하는 컴퓨터 언어. C언어, 파이썬, 자바 등,, 한 번은 들어봤음 직한, 첫 장만 펼쳐도 앞이 깜깜 해지는 녀석들에게 관심이 갔다. 이전부터 '애플리케이션을 내가 만들 수 있으면 꽤 재밌겠다.'라는 생각을 가끔 하긴 했었지만, 최근에서야 미약한 첫걸음을 떼게 되..
알쓸 정보
2021.09.10

visual design. Add a box-shadow to a Card-like Element

카드와 같은 요소에 상자 그림자 추가 box-shadow 속성은 요소에 하나 이상의 그림자를 적용합니다. box-shadow 속성은 다음 값을 취합니다. offset-x(요소에서 그림자를 수평으로 밀어내는 거리), offset-y (요소에서 수직으로 그림자를 밀어내는 거리), 흐림 반경, 확산 반경 및 색상, 순서대로. blur-radius 및 spread-radius 값은 선택 사항입니다. 쉼표를 사용하여 각 상자 그림자 요소의 속성을 구분하여 여러 상자..
Visual design
2021.09.09

Visual design. 요소의 불투명도 줄이기

요소의 불투명도 줄이기 CSS의 opacity 속성은 불투명도를 조정하거나 반대로 항목의 투명도를 조정하는 데 사용된다. value 1 는 불투명하여 전혀 투명하지 않습니다. value 0.5 는 반투명입니다. value 0 는 완전히 투명합니다. 주어진 값은 일부 투명도가 있는 이미지이든 텍스트 블록의 전경 및 배경 색상이든 전체 요소에 적용됩니다. Link class를 사용하여 앵커 태그의 불투명도를 0.7로 설정하여 선택합니..
Visual design
2021.09.11

최신글 리스트 커버

Visual design. Use the CSS Transform scale Property to Change the Size of an Element

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.
Visual design
2021.10.19

Visual design. Create Texture by Adding a Subtle Pattern as a Background Image

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 patter..
Visual design
2021.10.18

Visual design. Use a CSS Linear Gradient to Create a Striped Element

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..
Visual design
2021.10.17

Visual design. Create a Gradual CSS Linear Gradient

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..
Visual design
2021.10.16

Visual design. Adjust the Tone of a Color

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..
Visual design
2021.10.15

Visual design. Adjust the Hue of a Color

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..
Visual design
2021.10.14

Visual design. Adjust the Color of Various Elements to Complementary Colors

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..
Visual design
2021.10.13

Visual design. Learn about Tertiary Colors

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..
Visual design
2021.10.12

Visual design. Learn about Complementary Colors

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..
Visual design
2021.09.30

Visual design. Center an Element Horizontally Using the margin Property

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..
Visual design
2021.09.29

visual design. Change the Position of Overlapping Elements with the z-index Property

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 inte..
Visual design
2021.09.28

Visual design. Push Elements Left or Right with the float Property

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 elem..
Visual design
2021.09.27

Visual design. Lock an Element to the Browser Window with Fixed Positioning

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..
Visual design
2021.09.26

Visual design. Lock an Element to its Parent with Absolute Positioning

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 pos..
Visual design
2021.09.25

visual design. Move a Relatively Positioned Element with CSS Offsets

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 challe..
Visual design
2021.09.24