사용자 도구

사이트 도구


tag:css

TAG: CSS

문서날짜사용자설명
2021/03/18 15:25 오션 CSS 2D Transforms Methods * description : CSS 2D Transforms Methods * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-18 Source of the article * 2D Transforms Methods CSS transform 속성으로 아래의 2D 트랜스포메이션 방법을 사용할 수 있습니다.
2021/04/06 19:56 오션 CSS :active Selector * description : CSS :active Selector * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-01 The source of this article CSS :active Selector Example 활성 링크를 선택하고, 스타일을 지정합니다.
2021/07/01 15:20 오션 CSS :checked Selector * description : CSS :checked Selector * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-01 The source of this article CSS :checked Selector Example 선택된(checked) 모든 <input> 요소의 높이와 너비를 설정합니다.
2021/07/06 12:38 오션 CSS [attribute*=value] Selector * description : CSS [attribute*=value] Selector * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-06 Tue The source of this article CSS [attribute*=value] Selector Example “test”를 포함하는 클래스 속성 값이 있는 모든
2021/05/04 11:54 오션 CSS Advanced - CSS Media Queries * description : CSS Advanced - CSS Media Queries * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Advanced - CSS Media Queries CSS2 Introduced Media Types CSS2에 도입된 @media
2021/05/04 15:01 오션 CSS Advanced - CSS Media Queries - Examples * description : CSS Advanced - CSS Media Queries - Examples * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Advanced - CSS Media Queries - Examples CSS Media Queries - More Examples
2021/03/31 15:17 오션 CSS Attribute Selectors * description : CSS Attribute Selectors * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-31 Style HTML Elements With Specific Attributes 특정 속성 또는 속성 값이 있는 HTML
2021/03/05 09:28 오션 CSS Backgrounds * description : CSS Backgrounds * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-05 Case Study * [CSS] Background-color 투명 or 배경 없애기 Source of the article * CSS Background Color * CSS Background Image * CSS Background Repeat * CSS Background Attachment * CSS Background Shorthand CSS 백그라운드 속성은 요소들을 위한 배경 효과를 추가하기 위해 사용됩니다.
2021/03/05 10:57 오션 CSS Borders * description : CSS Borders * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-05 Source of the article * CSS Borders * CSS Border Width * CSS Border Color * CSS Bordr Sides * CSS Shorthand Border Property * CSS Rounded Borders CSS Borders(테두리) CSS Border 속성은 요소의 테두리 스타일, 너비, 컬러를 지정합니다.
2021/03/02 13:28 오션 CSS Box Model * description : CSS와 박스 모델 * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-02 Source of the article * “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
2021/03/16 18:05 오션 CSS Box Sizing * description : CSS box-sizing Property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-16 Source of the article * CSS Box Sizing CSS Box Sizing CSS box-sizing속성을 사용하여 요소의 전체 너비와 높이에 패딩과 보더를 포함시킬 수 있습니다.
2021/04/07 14:18 오션 CSS calc() Function * description : CSS calc() Function * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-07 Ref CSS calc() Function 예제 calc()를 사용하여 <div> 요소의 너비를 계산합니다. <!DOCTYPE html> <html> <head> <style> #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid #000; background-color: yellow; padding: 5px; text-align: center; …
2021/03/04 17:44 오션 CSS Colors * description : CSS Colors * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * CSS Colors * CSS RGB Colors * CSS HEX Colors * CSS HSL Colors 컬러는 미린 정의된 컬러 이름, 또는 RGB, HEX, HSL, RGBA, HSLA 값을 사용하며 명시합니다.
2021/03/04 14:29 오션 CSS Combinators * description : CSS Combinators * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
2021/03/04 17:20 오션 CSS Comments * description : CSS Comments * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * CSS Comments CSS 주석은 브라우저에서 보이지 않지만, 소스 코드를 자세히 기록하는 것에 도움이 될 수 있습니다.
2021/04/05 13:36 오션 CSS Counters * description : CSS Counters * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-05 CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는
2021/03/15 09:16 오션 CSS Display * description : CSS Display Property, Block-level Elements, Inline Elements * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 Source of the article * CSS Display The display Property display속성은 레이아웃을 조절하는 가장 중요한
2021/03/31 09:03 오션 CSS Dropdowns * description : CSS Dropdowns * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-31 CSS로 호버할 수 있는(hoverable) 드롭다운 메뉴를 만듭니다. Basic Dropdown 사용자가 요소 위에 마우스를 올렸을 때 나타나는 드롭다운 박스를 만듭니다.
2021/07/12 10:52 오션 CSS Examples - CSS Templates * description : CSS Templates * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-12 Mon The source of this article CSS Templates CSS Layout Templates CSS로 반응형 스타터 템플릿을 만들었습니다.
2021/03/16 12:44 오션 CSS Flex Container * description : CSS Flex Container * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-05 =====The source of this article=====CSS Flex Container Parent Element (Container) 이전 챕터에서 지정했던 것처럼, 아래는 3개의 플렉스 아이템을 가진 플렉스 컨테이너(blue 컬러 부분)입니다.
2021/03/16 11:32 오션 CSS Flexbox * description : CSS Lists, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-05 Source of the article CSS Flexbox CSS Flexbox 예제 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flexible Boxes</title> <style> .flex-container { display: flex; …
2021/07/16 08:49 오션 CSS Flexbox - Flex Items * description : CSS Lists, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-16 The source of this article CSS Flexbox - Flex Items Child Elements (Items) flex container의 직계 자식 요소들은 자동으로 flexible (flex) items가 됩니다.
2021/03/15 20:02 오션 CSS Float Examples * description : CSS Float Examples * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-16 Source of the article * CSS Layout - Float Examples Grid of Boxes / Equal Width Boxes float속성을 사용하면 콘텐츠 박스들을 쉽게 나란히 배치할 수 있습니다.
2021/03/08 20:36 오션 CSS Font Shorthand * description : CSS Font Property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS Font Property CSS Font Property 코드를 줄이기 위해, 하나의 속성에서 모든 개별 폰트 속성을 지정하는 것도 가능합니다.
2021/03/08 19:28 오션 CSS Fonts * description : CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS Google Fonts CSS Google Fonts HTML
2021/03/08 14:54 오션 CSS Fonts * description : CSS Font, Font-family, web safe, style, size, Google, Pairings, Shorthand * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS Fonts * CSS Web Safe Fonts * CSS Fonts Fallbacks * CSS Font Style * CSS Font Size * CSS Google Fonts
2021/04/02 17:43 오션 CSS Forms * description : CSS Forms * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-02 Style HTML Elements With Specific Attributes HTML 폼양식, Form의 모양은 CSS로 크게 개선될 수 있습니다.
2021/03/08 20:23 오션 CSS Great Font Pairings * description : CSS Font Pairing Rules * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS Great Font Pairings CSS Google Fonts 어울리는 폰트 조합은 디자인에 매우 중요합니다.
2021/07/02 14:49 오션 CSS Grid Intro * description : CSS Responsive Web Design- Images * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-02 Fri The source of this article CSS Grid Intro CSS Grid Layout Module Grid Layout CSS Grid Layout Module
2021/03/05 17:32 오션 CSS Height / Width * description : CSS Height / Width * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-05 Source of the article * CSS Height / Width CSS Height and Width CSS height와 width속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다
2021/03/04 15:28 오션 CSS How to add CSS * description : CSS How to add CSS * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * How to Add CSS 브라우저가 스타일시트를 참조할 때, 브라우저는 스타일 시트의 정보에 따라
2021/03/31 11:36 오션 CSS Iamge Gallery * description : CSS Iamge Gallery * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-31 CSS로 이미지 갤러리를 만들 수 있습니다. Image Gallery 하기의 이미지 갤러리를
2021/03/31 13:18 오션 CSS Iamge Sprites * description : CSS Iamge Sprites * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-31 Image Sprites 이미지 스프라이트(Image Sprites)는 단일 이미지에 넣은 이미지 모음입니다.
2021/03/09 08:06 오션 CSS Icons * description : CSS Icons * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-09 Source of the article * CSS Icons CSS Icons 아이콘 라이브러리를 사용하여 아이콘을 쉽게 HTML페이지에 추가할 수 있습니다.
2021/03/18 09:11 오션 CSS Inline-block * description : CSS display:inline-block * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-18 Source of the article * CSS The display:inline-block value The display: inline-block value display: inline 속성과 비교하면, 가장 중요한 차이는
2021/03/04 09:17 오션 CSS Introduction & Syntax * description : CSS Introduction & Syntax * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
2021/03/15 17:38 오션 CSS Layout - float - clear and clearfix * description : CSS float - clear and clearfix * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 The source of this article * CSS float - clear and clearfix The clear Property clear 속성을 사용하고, 다음 요소를 하단에 위치시키고 싶을 때,
2021/03/15 17:00 오션 CSS Layout - float and clear * description : CSS width, max-width, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-26 Source of the article * CSS Layout - float and clear CSS float 속성은 요소가 어떻게 떠 있어야(float)
2021/03/18 09:45 오션 CSS Layout - Horizontal & Vertical Align * description : CSS Layout - Horizontal & Vertical Align * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-18 Source of the article * CSS Layout - Horizontal & Vertical Align Center Align Elements div와 같은 블럭 요소를 가로 방향으로 중앙 정렬 하기 위해,
2021/03/12 14:56 오션 CSS Links * description : CSS Links, Text Decoration, Background Color, Link Buttons, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-12 Source of the article * CSS Links CSS를 사용하여 links를 다양하게 꾸밀 수 있습니다.
2021/03/12 16:28 오션 CSS Lists * description : CSS Lists, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-12 Source of the article * CSS Lists HTHL 리스트, CSS 리스트 속성 HTML에는 두 가지 속성의 리스트가 있습니다.
2021/03/05 15:45 오션 CSS Margins * description : CSS Margins * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-05 Source of the article * CSS Margins CSS Margins CSS margins(여백)속성은 어떤 정의된 테두리 외부의, 요소들의 주위 공간을 만드는데 사용됩니다.
2021/03/15 13:39 오션 CSS Max-width * description : CSS width, max-width, * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-15 Source of the article * CSS Layout - width and max-width CSS Layout - width and max-width Using width, max-width and margin: auto;
2021/03/30 16:30 오션 CSS Navigation Bar * description : CSS Vertical Navbar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 Vertical Navigation Bars 수직 네비게이션 바를 만들려면, 이전 페이지의 코드 외에도, 목록 안의 <a> 요소의 스타일을 지정할 수 있습니다.
2021/03/30 14:55 오션 CSS Navigation Bar * description : CSS NavBar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 Navigation Bars 사용하기 쉬운 네비게이션 바는 모든 웹 사이트에서 중요합니다. CSS
2021/03/30 18:23 오션 CSS Navigation Bar * description : CSS Horizontal Navbar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 Horizontal Navigation Bars 가로 네비게이션 바를 만드는 방법에는 두 가지가 있습니다.
2021/03/30 14:10 오션 CSS Opacity / Transparency * description : CSS Opacity / Transparency * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 opacity 속성은 요소의 불투명도 / 투명도 (opacity / Transparency)를 지정합니다.
2021/03/08 09:14 오션 CSS Outline * description : CSS Outline width, color, shorthand, offset * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS Outline CSS Outline 아웃라인 (outline)은 한 요소의 테두리(border) 외부에 그려지는 선으로, 해당 요소를 쉽게 눈에 띄게 합니다.
2021/03/05 16:46 오션 CSS Padding * description : CSS Padding * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-05 Source of the article * CSS Padding CSS Padding 패딩은 정의된 어떤 테두리 안에서 한 요소의 콘텐츠 주위에 공간을 만드는데 사용됩니다.
2021/03/12 17:31 오션 CSS Position * description : CSS Layout - The position property * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-12 Source of the article * CSS Layout - The position Property CSS Layout - The position property position속성은 하나의 요소에 대하여 사용되는 포지셔닝 방법의 타입을 지정합니다(static, relative, fixed, absolute or sticky).
2021/03/29 19:28 오션 CSS Pseudo-classes * description : CSS Pseudo-classes * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-29 What are Pseudo-classes? 가상 클래스(Pseudo classes, 쑤도우 클래스, 의사 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.
2021/03/30 09:58 오션 CSS Pseudo-elements * description : CSS Pseudo-classes * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-30 What are Pseudo-Elements? CSS 가상 요소(pseudo=element)는 요소의 지정된 부분에 스타일을 지정하는데 사용됩니다.
2021/03/04 10:55 오션 CSS Selectors * description : CSS Selectors * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-04 Source of the article * “Do it! HTML5 + CSS3 웹표준의 정석” / 이지스 퍼블리싱 / 고경희 지음 / 개정1판 9쇄 발행 2019년 6월 3일 /
2021/04/21 14:56 오션 CSS Specificity * description : CSS Specificity * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-21 What is Specificity? 동일한 요소를 가리키면서 충돌하는 CSS 규칙이 두 개 이상 있는 경우,
2021/03/08 11:39 오션 CSS Text * description : CSS text color, alignment, decoration,transformation, spacing, shadow * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-08 Source of the article * CSS text * CSS Text Alignment * CSS Text Decoration * CSS Text Transformation * CSS Text Spacing * CSS Text Shadow
2021/04/21 16:04 오션 CSS The !important Rule * description : CSS The !important Rule * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-21 What is !important? CSS의!important 규칙은 속성/값에 더 많은 중요성을 추가하는 데 사용됩니다.
2022/03/11 19:53 오션 CSS Tooltip * description : CSS Advanced - CSS Tooltip * author : 오션 * email : shlim@repia.com * lastupdate : 2021-10-06 Source of this article CSS Tooltip [HTML/CSS] 툴팁 적용하는 방법(title 및 커스텀 툴팁 Tooltip Arrows 오션 css media queries examples
2021/07/21 16:57 오션 CSS Transitions * description : CSS Transitions * author : 오션 * email : shlim@repia.com * lastupdate : 2021-07-21 The source of this article CSS Transitions CSS Transitions CSS transitions는 설정한 시간 동안 속성 값이 부드럽게 변화하게 합니다.
2021/04/21 09:55 오션 CSS Units * description : CSS Units * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-21 CSS Units CSS에는 길이를 표현하는 여러 가지 단위가 있습니다. 많은 CSS 속성은 width, margin
2021/05/04 09:58 오션 CSS Variables * description : CSS Variables - Variables and JavaScript * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Variables - Variables and JavaScript Change Variables With JavaScript CSS 변수는 DOM에 액세스 할 수 있으므로,
2021/05/04 11:05 오션 CSS Variables - Variables in Media Queries * description : CSS Using Variables in Media Queries * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Variables - Variables in Media Queries Using Variables in Media Queries
2021/05/04 08:42 오션 CSS Variables * description : CSS Variables - The var() Function * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Variables - The var() Function var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.
2021/05/04 09:29 오션 CSS Variables * description : CSS Variables - Overriding Variables * author : 오션 * email : shlim@repia.com * lastupdate : 2021-05-04 Source of the article CSS Variables - Overriding Variables Overriding Global Variables With Local Variables 이전 페이지(Overriding Variables)에서, 전역 변수는 전체 문서를 통해 액세스/사용할 수 있는 반면,
2021/03/23 15:31 오션 CSS Vendor Prefix * description : CSS Vendor Prefix * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-23 Vendor Prefix 브라우저별 CSS 지원을 위하여 벤터 프리픽스 (Vendor Prefix)를 사용할 필요가 있습니다.
2021/04/12 15:18 오션 HOW TO - CSS Skill Bar * description : How TO - CSS Skill Bar * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-12 Ref <https://www.w3schools.com/howto/howto_css_skill_bar.aspHow TO - More - CSS Skill Bar> CSS를 사용하여 스킬 바(skill bar) 제작 방법을 학습합니다. My Skills
2021/04/14 11:14 오션 JavaScript / jQuery CSS Styles * description : JavaScript / jQuery CSS Styles * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-14 Ref JavaScript / jQuery CSS Styles Hiding HTML Elements HTML 요소를 숨깁니다. JQuery <!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <h1 id="01">Hiding Text Content with JQuery</h1> <h2 id="02">Hello World!</h2> <h2 id="03"…
2021/04/20 09:31 오션 Javascript HTML DOM, Changing CSS * description : Javascript HTML DOM, Changing CSS * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-20 Source of the article * Javascript HTML DOM, Changing CSS HTML DOM을 사용하면 JavaScript가
2021/04/19 07:41 오션 jQuery - css() Method * description : jQuery - css() Method * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-19 jQuery를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다. jQuery css() Method
2021/04/16 18:41 오션 jQuery - Get and Set CSS Classes * description : jQuery - Get and Set Classes * author : 오션 * email : shlim@repia.com * lastupdate : 2021-04-16 jQuery를 사용하면 요소들의 스타일을 쉽게 조작할 수 있습니다.