일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- js
- JavaScript
- Coda
- DOM
- 가상클래스
- CLASS
- HASH
- 코딩테스트
- 정규식표현
- display
- Flex
- row-gap
- 웹폰트
- sass
- 코드다이어리
- 코딩퀴즈
- 선택자
- property
- 코딩일기
- 코딩문제
- 친해지기
- frontend
- Grid
- regexp
- tailwindcss
- 코드일기
- Pseudo
- column-gap
- HTML
- CSS
- Today
- Total
목록2024/06 (48)
< Code diaries />
CSS Position CSS에서 문서의 레이아웃을 잡을때 가장 많이 나오는 속성중에 하나가 Position 입니다.position은 Dom tree구조와 속성을 잘 이해하면 전혀 어렵지 않은 속성입니다.한번 시작해 봅시다~~!! CSS Position 에 대하여 알아봅시다~! 출발~! Position Overview- 모든 HTML element의 기본 포지션은 Static 입니다. 이것을 필요에따라 4가지로 변경하여 사용할 수 있습니다.- 참조사이트 - 바로가기 A. Position 속성에 대하여 알아보자. Positin 속성의 값으로 지정할 수 있는 것은 무엇일까요?아래와 같이 5가지가 있습니다. static은 기본 값입니다.PropertyValueDescriptionnotepositionst..
CSS Box Model HTML Element를 박스모델로 컨트롤 하는 부분이다.이전에 블럭요소와 인라인요소, 인라인블럭요소에 대한 차이점을 정리해 본 적이 있습니다. 아래에 다시한번 표로 정리해서 보여드릴게요~ CSS에서는 꼭 알아두어야 할 사항입니다.자 이제 한번 살펴볼까요? 크기, 바깥 여백, 안쪽여백, 테두리 지정에 대한 계산 법 및 적용방법을 한번 알아봅시다~! BOX Model A. 단위(Units)- 크기나 여백을 지정할때에 사용할 수 있는 단위는 아주 많습니다.- 그 중 CSS 에서 자주 사용하는 것들에 대해 알아봅시다. 단위사용예Description백분율(%)div { width:80%; }div가 속해있는 영역내에서의 80%크기픽셀(px)div ( width:80px}div의 크..
CSS Font Properties 웹페이지에서 글꼴을 지정하는 속성입니다.글꼴의 종류, 굵기, 기울임꼴 등을 설정할 수 있습니다.오늘은 FONT 에 관련된 스타일링을 한번 알아보겠습니다. https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io 본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.제 피드를 공유하거나 링크를 해주시는것은 감사합니다~ 본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.하여 출처없이 이미지나 내용만을 카피해서포스트를 쓰신다거나 하는것은 하지말아주세요 ^^감사합니다.
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 Colors CSS에서 컬러를 주는 방법은 다양합니다.16진수 Hex 코드, RGB 값, 영문이름으로 된 컬러, HSL 값 등입니다.기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. A. 영문명으로 지정하기- 영문명은 아무거나 적는 것은 허용되지 않고, 브라우저에서 공통으로 지원되는 140여개의 컬러값을 사용합니다. [ 아래의 컬러표 상세보기 ] B. 16진수(HEX) 코드로 지정하기- RGB컬러값을 16진수로 변환한 6자리 코드를 사용하며 '#'으로 시작합니다.- 대소문자 구문이 없습니다.- 축약형으로 사용이 가능하다.- 16진수는 계산기(개발자모드)를 이용하면 쉽게 구할 수 있습니다.- 또는, 변환을 제공해주는 사이트를 이용 합니다. 10진수를 16진수 코드로 변경해주는 ..
CSS Text Properties 오늘부터는 이전에 배운 셀렉터를 이용하여 원하는 태그에 스타일링 하는 법을 공부해 봐요.스타일링은 포토샵이나 일러스트, 피그마의 툴박스의 기능과 거의 동일한 부분이 많다고 보면 됩니다.하여 디자인을 하셨던 분이 개발을 할경우 CSS는 기가막히게 빨리 익히는 이유도 바로 그것이죠~!하지만 요즘은 누구나 그래픽툴 한번쯤은 써보는 세상아닙니까? 모두 빨리 익히실 수 있어요~ ^^오늘은 글자에 관련된 스타일링을 한번 알아보겠습니다. 상세한 스펙을 보시려면 w3schools.com 에 잘 정리되어있는 CSS Property page를 걸어둘게요~https://www.w3schools.com/css/css_text.asp A. Text 관련 CSS글자에 관련된 속성입니다. ..