목록CSS (21)

< Code diaries />

CSS - SVG 이미지를 :before, :after에 넣기 - url-encoder 사이트

CSS Font Properties  웹페이지에서 글꼴을 지정하는 속성입니다.글꼴의 종류, 굵기, 기울임꼴 등을 설정할 수 있습니다.오늘은 FONT 에 관련된 스타일링을 한번 알아보겠습니다.  https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io    본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.제 피드를 공유하거나 링크를 해주시는것은 감사합니다~   본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.하여 출처없이 이미지나 내용만을 카피해서포스트를 쓰신다거나 하는것은 하지말아주세요 ^^감사합니다.
CSS 2024. 6. 10. 15:23
CSS Property - FONT 관련 속성 및 웹폰트 설정하기

CSS Font Properties  웹페이지에서 글꼴을 지정하는 속성입니다.글꼴의 종류, 굵기, 기울임꼴 등을 설정할 수 있습니다.오늘은 FONT 에 관련된 스타일링을 한번 알아보겠습니다. 상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS FONT Property page를 걸어둘게요~https://www.w3schools.com/css/css_font.asp   A. FONT 관련 CSS글자에 관련된 속성입니다.  자주사용하는것 말고는 간혹가다 꺼내쓰게 되는데요, 각 속성마다 지정할 수 있는 속성의 방식과 값들이 있습니다. 추가 속성들과 값들은  참조링크에서 확인하실 수 있습니다.구분Property name사용 예Description글꼴font-familybody { fon..
CSS 2024. 6. 10. 12:49
CSS - Colors

CSS Colors  CSS에서 컬러를 주는 방법은 다양합니다.16진수 Hex 코드, RGB 값, 영문이름으로 된 컬러, HSL 값 등입니다.기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다.  A. 영문명으로 지정하기- 영문명은 아무거나 적는 것은 허용되지 않고, 브라우저에서 공통으로 지원되는 140여개의 컬러값을 사용합니다. [ 아래의 컬러표 상세보기 ]  B. 16진수(HEX) 코드로 지정하기- RGB컬러값을 16진수로 변환한 6자리 코드를 사용하며 '#'으로 시작합니다.- 대소문자 구문이 없습니다.- 축약형으로 사용이 가능하다.- 16진수는 계산기(개발자모드)를 이용하면 쉽게 구할 수 있습니다.- 또는, 변환을 제공해주는 사이트를 이용 합니다. 10진수를 16진수 코드로 변경해주는 ..
CSS 2024. 6. 10. 08:27
CSS Property - Text 글자관련 속성

CSS Text Properties  오늘부터는 이전에 배운 셀렉터를 이용하여 원하는 태그에 스타일링 하는 법을 공부해 봐요.스타일링은 포토샵이나 일러스트, 피그마의 툴박스의 기능과 거의 동일한 부분이 많다고 보면 됩니다.하여 디자인을 하셨던 분이 개발을 할경우 CSS는 기가막히게 빨리 익히는 이유도 바로 그것이죠~!하지만 요즘은 누구나 그래픽툴 한번쯤은 써보는 세상아닙니까? 모두 빨리 익히실 수 있어요~ ^^오늘은 글자에 관련된 스타일링을 한번 알아보겠습니다. 상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS Property page를 걸어둘게요~https://www.w3schools.com/css/css_text.asp   A. Text 관련 CSS글자에 관련된 속성입니다. ..
CSS 2024. 6. 10. 07:30
CSS Selectors - 가상(Pseudo) 클래스 2 - Link, form, :root등

CSS Pseudo Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax  A. ..
CSS 2024. 6. 9. 01:01
CSS Selectors - before, after

CSS Pseudo Selectors  CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.가상클래스(Pseudo Class)는 독립적으로 사용하기 보다, 특정한 태그 뒤에 붙어서 보통 사용하게 됩니다.CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~! 저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~https://www.w3schools.com/cssref/css_selectors.php CSS  Syntax  A. ..
CSS 2024. 6. 9. 00:53
이전 Prev 1 2 3 4 Next 다음