본문 바로가기
728x90
반응형

CSS19

[Web] 웹 개발 리소스 모음 - 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII, 캡처 도구 📌 웹 개발 리소스 모음 프론트엔드 개발에 필요한 다양한 웹 디자인 및 개발 리소스를 한 곳에 모았습니다. 색상, 디자인, 애니메이션, SVG, 파비콘, ASCII 아트, 캡처 도구 등각 카테고리는 프론트엔드 개발 과정에서 유용한 자료와 도구를 제공합니다.  디자인 및 색상 도구 애니메이션 도구 SVG 도구 파비콘 도구 ASCII Art 도구 웹페이지 캡처 도구 🎨 디자인 및 색상 🌈 색상 팔레트Adobe Color Wheel (색상 휠)Coolors (색상 생성기)Adobe Color Contrast Analyzer (대비 분석기)Material Design Colors (구글 머티리얼 색상)FFFuel (색상 팔레트)Khroma (색상 조화 툴)MyColor.space (색상 선택기)De.. 2024. 10. 16.
[React] 리액트에서 Tailwind CSS 사용하기 📌 테일윈드 란? (Tailwind CSS)Tailwind는 유틸리티 우선(Utility-First) CSS 프레임워크입니다.여기서 "유틸리티 클래스"란, 버튼이나 모달 같은 요소를 구성하는 것이 아니라,빨간색 글자 색상이나 XL 사이즈 글자 크기처럼 각각의 CSS 속성과 값을 의미합니다. 즉, "유틸리티 우선"이라는 것은 Bootstrap처럼 미리 정의된 스타일을 사용하는 것이 아니라,사용자가 원하는 대로 각 속성 값을 적용할 수 있다는 뜻입니다.Bootstrap은 미리 정의된 클래스명만 사용할 수 있지만,Tailwind는 대괄호([])를 사용하여 사용자 정의 클래스명을 직접 지정할 수 있습니다.예를 들어, bg-[color]와 같이 사용할 수 있습니다. Tailwind에서 정의된 클래스를 사용하면,.. 2024. 9. 20.
[CSS] CSS, SCSS, SASS 차이점 CSS, SCSS, SASS 란?CSS : Cascading Style Sheets - 종속형 시트 SCSS : Sassy Cascading Style Sheets - 문법적으로 짱 멋진(Sassy) CSS SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트SCSS(SASS) 필요성CSS 단점선택자(Selector)을 만들때 매번 불필요한 부모요소 선택자를 적어야 한다.규모가 큰 프로제트의 경우 자동화하기 어렵고 모든 것을 수정으로 변경해야 한다./* .CSS */.contents { padding : 10px;}.contents .boxArea{ border:1px solid #ddd; color:#ccc;}.contents .boxAr.. 2024. 5. 29.
[CSS] background 속성 정리(color, image, position, repeat 등) background 관련 CSS 속성📝 background 단축속성 형태background : color속성값 image속성값 repeat속성값 position속성값/size 속성값 attachment속성값;사용예시 background-image: url(../img/img.jpg);background-repeat:no-repeat;background-position:center top;background-size: 100%;/* background 단축속성 형식 */background: url(../img/img.jpg) no-repeat center top / 100%;background: url("../ images/bg.png") no-repeat center/cover;/* ① size는 po.. 2024. 5. 27.
[CSS] CSS 그림자 속성(box-shadow, text-shadow) HTML 요소에 그림자 추가하는 방법CSS의 box-shadow와 text-shadow 속성을 사용하여 요소에 그림자 효과를 줄 수 있습니다. 1. box-shadow📝 box-shadow 형태box-shadow: inset offset-x offest-y blur color;/* 요소 2개 : offsetX, offsetY 요소 3개 : offsetX, offsetY, blur-radius 요소 4개 : offsetX, offsetY, blur-radius, spread-radius*/속성명설명inset안쪽 그림자 (optional)offset-x요소를 기준으로 그림자의 수평 방향 떨어진 간격offset-y요소를 기준으로 그림자의 수직 방향 떨어진 간격blur그림자 가장자리를 부드럽게 처리.. 2024. 5. 27.
[CSS] 패딩(Padding), 마진(Margin), 테두리(Border) CSS 박스 모델모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖는다.내부 여백은 패딩 외부 여백은 마진 박스 모델 용어용어의미content (내용)텍스트나 이미지 등 박스 내의 실제 내용border (테두리)박스의 테두리 (내용과 패딩 안에 포함)padding (패딩)content와 border 사이의 간격 (안쪽 여백)margin (마진)border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성용어의미width박스의 넓이 (default: display 속성에 의해 결정)height박스의 높이 (default: 일반적으로 콘텐츠의 높이)ba.. 2024. 5. 27.
[CSS] CSS Grid(그리드) 레이아웃 CSS GridCSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다. CSS Grid는 CSS Flex와 같이Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다. (부모요소) Container ▶ Items를 감싸는 부모 요소, 그 안에서 각 Item을 배치할 수 있습니다. (자식요소) Items ▶ 각 Item 열(가로)     column 행(세로)     row 출처 : https://studiomeal.com/archives/533Grid ContainerGrid Container를 위한.. 2024. 5. 25.
[CSS] CSS 적용 방법, 스타일 적용 우선순위 1. CSS 적용 방법선언방식형태내용특성 인라인 방식  HTML 문서 안에각 엘리먼트에 속성으로스타일을 끼어 넣는 방식HTML 태그 안에style 속성을 설정 내부 방식 HTML 문서 내부에스타일 시트를 삽입style 태그 내에스타일시트 작성 외부 방식 HTML 문서 외부에독립된 스타일 시트파일을 작성하여연결하는 방식link 태그를 통해외부 CSS파일을 연결 임포트 방식 스타일시트 안에서 별개의 스타일시트 파일을 포함하는 방식스타일 시트 안에 @import 규칙으로 CSS파일을 포함 2. CSS 적용 우선순위1. 스타일 적용 우선순위!important >>> HTML style >>> #id >>> .class, :가상클래스 (가상 클래스 > 클래스)>>> 태그선택자, ::가상요소 >>> 부모에게 상속받.. 2024. 5. 25.
[CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] 1. 블록 요소 (Block Element)- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% ) - 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 ) - width, height로 크기를 지정할 수 있음- padding, margin으로 상하좌우 여백을 지정할 수 있음 - 레이아웃을 작업하는 요소로 적합 📝 블록 태그 종류, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 사용예시 ( ↘ 각 요소에 적용한 값 ) width: 150px; height: 30px; padding: 10px; margin: 10px;💡 그런데 잘 보면 각.. 2024. 5. 24.
728x90
반응형

티스토리툴바