시놀로지 나스 중복 파일 데이터 정리 하기 본 블로거는 아이클라우드와 구글 드라이브의 노예에서 벗어나기 위해, 시놀로지 나스를 이용해 나만의 서버를 구축했다. 여기저기 흩어져있던 사진들을 한 서버로 옮기다 보니, 중복되는 사진도 어마해서 시간이 나는 데로 중복 사진들을 제거하는 중에 있는데,, 그래서 오늘은 필자와 같은 고민을 가진 전우들을 위해 '중복 사진을 비롯 파일 및 데이터를 찾아 제거 하는 방법'을 정리해 보기로 했다. 중복 파일 제거 방법에는 '시놀로지에서 제공하는 공식 중복 데이터 정리 방법'을 골자로 하지만, 이 방법은 일부 모델에서만 가능하므로 본인처럼 해당 모델이 아닌 경우 할 수 있는 방법과 함께 정리해보기로 한다. 시놀로지 공식 중복 파일 정리방법 시놀로지에는 친절하게도 서버 구축자..
Improve Chart Accessibility with the figure Element HTML5 introduced the figure element and the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure. ..
Improve Accessibility of Audio Content with the audio Element HTML5's audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript. The audio tag supports the controls attribute. This sh..
Make Screen Reader Navigation Easier with the nav Landmark The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer (covered in the next cha..
Make Screen Reader Navigation Easier with the header Landmark The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages. header shares the embedded landmark feature you saw with main, allowing assistive ..
Make Screen Reader Navigation Easier with the footer Landmark Similar to header and nav, the footer element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page. Camper Cat's training page is making good progress. Change the div he used t..
Wrap Content in the article Element article is another one of the new HTML5 elements that add semantic meaning to your markup. article is a sectioning element and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles. Determining whether content can stand alone is usually a judgment call, but you can use a couple of simple tests...
Jump Straight to the Content Using the main Element HTML5 introduced several new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others. By default, a browser renders these elements similar to the humble div. However, using them where appropriate gives additional meaning to your ..
Use Headings to Show Hierarchical Relationships of Content Headings (h1 through h6 elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for..
Add a Text Alternative to Images for Visually Impaired Accessibility You've likely seen an alt attribute on an img tag in other challenges. alt text describes the image's content and provides a text-alternative for it. An alt attribute helps in cases where the image fails to load or can't be seen by a user. Search engines also use it to understand what an image contains to include it in search r..
Make Motion More Natural Using a Bezier Curve This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the linear and ease-out cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this. The animation-timing-function automatically loops at every keyframe when the animation-iter..
시놀로지 NAS 드라이브 셋업으로 구글 드라이브 대체하기 안녕하세요. 오늘은 제목 그대로 시놀로지 나스에서 데스크톱 동기화 또는 백업 드라이브 셋업 하는 방법을 정리해봅니다. 기존에 사용하던 구글 드라이브와 똑같은 방식이면서 용량에 대한 제약이 없다(=자신이 설치한 하드 용량만큼 가능)는 점에서 훨씬 용이하게 사용할 수 있네요. 시놀로지 드라이브 셋업 하기 먼저 패키지 센터에서 시놀로지 드라이브를 찾아 설치를 해야 될 텐데요, 'Synology Drive Server'를 찾아 설치를 하면 됩니다. 설치가 완료되고 나면, 시놀로지 드라이브 서버의 상태와 함께, 클라이언트 장치 정보 화면이 보이는데요. 쉽게 말해 드라이브 서버와 연결된 기기가 뭐가 있나 표시해준다고 생각하면 되겠습니다. 지금은 연결된 장비가..
Use a Bezier Curve to Move a Graphic A previous challenge discussed the ease-out keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the ease-out keyword (for the blue element) and linear keyword (for the red element) is demonstrated. Similar animation progressions to the ease-out keyword can be ach..
Learn How Bezier Curves Work The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves. In CSS animations, Bezier curves are used with the cubic-bezier function. The shap..
Change Animation Timing with Keywords In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive. There are a ..
Animate Multiple Elements at Variable Rates In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules. You can achieve the same goal by manipulating the animation-duration of multiple elements. In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To..
NAS 접속 불가. DSM 접속 안될 때 해결법 안녕하세요. 오늘은 시놀로지 나스 서버에 접속이 안될 때, 해결하는 방법에 대해 정리해봅니다. 저도 얼마 전 이와 같은 일을 겪고 나서 방법을 찾다가 해결을 하게 되었는데요. 저의 경우, 다른 웹사이트는 열리는데 나스 서버에만 접속이 안되는 문제(find.synology.com을 포함한 Quickconnect 연결 오류)가 있었고요. 이것저것 만지다 보니 Quickconnect도 초기화해버린 상황이었습니다. 그 당시 문제를 해결 할 때 알아본 것들과 제가 했던 방법들을 정리해봤습니다. 나스 서버 접속 불가 시놀로지 홈페이지에서 검색을 해봤을 때, DSM 로그인 오류 문제들에 대한 각각의 해결책은 아래 링크에 있습니다. https://kb.synology.c..
Animate Elements at Variable Rates There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an animation-iteration-count property and setting @keyframes rules. To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the @keyframes rule, which creates the tw..
Make a CSS Heartbeat using an Infinite Animation Count Here's one more continuous animation example with the animation-iteration-count property that uses the heart you designed in a previous challenge. The one-second long heartbeat animation consists of two animated pieces. The heart elements (including the :before and :after pieces) are animated to change size using the transform property, and ..
Animate Elements Continually Using an Infinite Animation Count The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example: animation-iteration-count: 3; In this case the animation will sto..
Animate Elements Continually Using an Infinite Animation Count The previous challenges covered how to use some of the animation properties and the @keyframes rule. Another animation property is the animation-iteration-count, which allows you to control how many times you would like to loop through the animation. Here's an example: animation-iteration-count: 3; In this case the animation will sto..
Create Visual Direction by Fading an Element from Left to Right For this challenge, you'll change the opacity of an animated element so it gradually fades as it reaches the right side of the screen. In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes rule. Target the element with the id of ball and add ..
Create Movement Using CSS Animation When elements have a specified position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement. As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the las..
Modify Fill Mode of an Animation That's great, but it doesn't work right yet. Notice how the animation resets after 500ms has passed, causing the button to revert back to the original color. You want the button to stay highlighted. This can be done by setting the animation-fill-mode property to forwards. The animation-fill-mode specifies the style applied to an element when the animation has fin..
Use CSS Animation to Change the Hover State of a Button You can use CSS @keyframes to change the color of a button in its hover state. Here's an example of changing the width of an image on hover: img:hover { animation-name: width; animation-duration: 500ms; } @keyframes width { 100% { width: 40px; } } Note that ms stands for milliseconds, where 1000ms is equal to 1s. Use CSS @keyframes to chang..
Learn How the CSS @keyframes and animation Properties Work To animate an element, you need to know about the animation properties and the @keyframes rule. The animation properties control how the animation should behave and the @keyframes rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most impo..
Create a Graphic Using CSS By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the box-shadow property that sets the shadow of an element, along with the border-radius property that controls the roundness of the element's corners. You will create a round, transparent ..
Create a More Complex Shape Using CSS and HTML One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the ::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before pseudo-element is used to add a re..
Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis Given that the skewX() function skews the selected element along the X-axis by a given degree, it is no surprise that the skewY() property skews an element along the Y (vertical) axis. Skew the element with the id of top -10 degrees along the Y-axis by using the transform property.
Use the CSS Transform Property skewX to Skew an Element Along the X-Axis The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree. The following code skews the paragraph element by -32 degrees along the X-axis. p { transform: skewX(-32deg); } Skew the element with the id of bottom by 24 degrees along the X-axis by us..