반응형
반응형

https://picocss.com/

 

 

[CSS] Pico CSS – 시맨틱 HTML을 위한 미니멀 CSS 프레임워크 (picocss.com)

 

  • Pico CSS는 HTML 태그 자체를 직접 스타일링하여 클래스 사용을 최소화함
  • 외부 라이브러리나 JavaScript 없이 순수 CSS만으로 깔끔한 UI 경험 제공임
  • 모바일 등 모든 기기에서 반응형 화면을 자동 지원함
  • 라이트/다크 모드를 사용자의 환경 설정에 따라 자동 적용함
  • 130개 이상의 CSS 변수와 여러 커스텀 테마 및 컴포넌트로 자유롭게 맞춤화 가능함

 

 

 

소개

Pico CSS는 간결함과 시맨틱을 극대화하는 미니멀 CSS 프레임워크임. HTML의 시맨틱 요소를 직접 스타일링하고, 전체적으로 클래스 사용을 10개 미만으로 줄여 유지보수성과 읽기 쉬운 코드를 제공함. 클래스가 전혀 없는 버전도 제공되어 HTML 순수주의를 추구하는 사용자에게도 적합함.

주요 특징

Class-light & Semantic

  • HTML 태그에 직접 스타일을 적용하여, 필요한 CSS 클래스 개수를 대폭 줄임
  • 클래스가 없는(class-less) 버전도 지원하여 항목 기반 스타일에서 벗어난 자유도 보장함

Just CSS, No Dependencies

  • 외부 라이브러리, 패키지 매니저, JavaScript 없이 동작함
  • HTML 마크업만으로도 손쉽게 우아한 스타일 구현 가능함

반응형 디자인

  • 폰트 크기와 공간을 화면 크기에 따라 자동으로 조절하여, 모든 기기에서 일관되고 세련된 UI 경험 제공함
  • 추가적인 클래스 지정이나 설정 없이 자동 대응됨

라이트/다크 모드 자동 전환

  • 밝은 테마와 어두운 테마를 기본 제공함
  • 브라우저 또는 OS 환경의 prefers-color-scheme 설정에 따라 자동으로 색상 테마가 적용됨
  • 자바스크립트 사용 없이 오로지 CSS로 구현함

쉬운 커스터마이징

  • 130개 이상의 CSS 변수 제공으로 간단하게 스타일 커스텀 가능함
  • SASS를 사용한 심화 커스터마이징도 지원함
  • 20개의 핸드크래프트 컬러 테마와 30개 이상의 모듈형 컴포넌트를 제공, 브랜드별 UI로 간편하게 확장 가능함

최적화된 성능

  • HTML이 가볍고 간결하게 유지되어, 불필요한 코드 오버헤드와 메모리 사용 감소
  • 과도한 CSS 중복이나 JS 로딩 없이 빠른 로딩 속도 제공함
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

22 HTML Input Types That Will Make Your Forms 10x Better  (0) 2025.10.15
UI/UX Case Study: The Starbucks App Revamp You’ve All Been Waiting For…  (0) 2024.05.28
58 rules for beautiful UI design  (0) 2024.05.17
비전 프로 출시 D-2  (0) 2024.01.31
10 Powerful CSS Properties that Every Web Dev must know  (0) 2023.08.29
반응형

브라우저 화면 드레그 안되게 css

 

.unselectable {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.all {
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
<head>
<style type="text/css">
.no-drag {
	-ms-user-select: none; 
	-moz-user-select: 
	-moz-none; 
	-webkit-user-select: none; 
	-khtml-user-select: none; 
	user-select:none;
}
</style>
</head>
<body>
   <p class="no-drag">드래그를 할 수 없습니다.</p>
   <p>드래그를 할 수 있습니다.</p>
</body>

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

웹폰트 사용하기,구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기  (0) 2022.10.31
Pixabay 이미지  (0) 2022.10.13
텍스트나 배경에 순수한 검정을 사용하면 안 되는 이유  (0) 2022.07.15
image , giphy, Drunk fall  (0) 2022.06.16
랜딩 페이지란 무엇인가요?  (0) 2022.05.27
반응형

이미지 갤러리 한 줄에 4개씩 보여지다가, 모바일 세로일때 (가로 480px 이하일때) 한 줄에 2개씩 보여주기. 

이미지는 width=100% 로 하고 넓이는 div에서 조절. 

object-fit:contain

<div>
 	<div class='img_contain_left' ><img src='image/1번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/2번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/3번.jpg' width='100%' ></div>
 	<div class='img_contain_left' ><img src='image/4번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/5번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/6번.jpg' width='100%'  ></div>
 	<div class='img_contain_left' ><img src='image/7번.jpg' width='100%'  ></div>
 	<div class='img_contain_end'  ><img src='image/8번.jpg' width='200px'  ></div>
 </div>
    @media screen and (min-width: 480px) {                
        .img_contain_left {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:23.5%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }
    
    @media screen and (max-width: 480px) {    
        .img_contain_left {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
        .img_contain_end {
        width:47%;
        float:left;
        object-fit: contain;
        margin: 0.25rem!important;
        }
    }

1. meta viewport 설정

<meta name="viewport" content="width=device-width, initial-scale=1" />

 

2. 4개의 반응형 분기점

- 낮은 해상도의 PC, 태블릿 가로 : ~1024px

- 태블릿 가로 : 768px ~ 1023px

- 모바일 가로, 태블릿 : 480px ~ 767px

- 모바일 : ~480px

 

3. 3개의 반응형 분기점

- PC : 1024px ~

- 태블릿 가로, 세로 : 768px ~ 1023px

- 모바일 가로, 세로 : ~768px

 

4. Media Query 사용법

@media screen and (min-width:1024px) {
	/* Desktop */
}
@media screen and (min-width:768px) and (max-width: 1023px) {
	/* Tablet */
}
@media screen and (max-width:767px){ 
	/* Mobile */
}

5. PC / Tablet / Mobile 구분해서 CSS 파일 작성 

<link href="style_pc.css" media="screen and (min-width:1024px)" rel="stylesheet" />
<link href="style_tablet.css" media="screen and (min-width:768px) and (max-width:1023px)" rel="stylesheet" />
<link href="style_mobile.css" media="screen and (min-width:320px) and (max-width:767px)" rel="stylesheet" />

 

https://record22.tistory.com/98

반응형
저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

smile-o meh-o frown-o  (0) 2022.04.15
반응형 웹 디자인의 9가지 기본 원칙 - 반응형 VS 적응형  (0) 2022.01.19
피그마 Figma, 주목받는 UI GUI 디자인 프로그램  (0) 2021.12.10
[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램  (0) 2021.11.26
[bootstrap] 27 Best Free Bootstrap Admin Templates 2021  (0) 2021.11.04
반응형

image full screen css - How TO - Full Page Image

 

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page 

 

Tryit Editor v3.6

body, html { height: 100%; margin: 0; } .bg { /* The image used */ background-image: url("img_girl.jpg"); /* Full height */ height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: co

www.w3schools.com

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bg {
  /* The image used */
  background-image: url("img_girl.jpg");

  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
</head>
<body>

<div class="bg"></div>

<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

[Chrome] 크롬확장프로그램, 폰트(Font) 확인 프로그램  (0) 2021.11.26
[bootstrap] 27 Best Free Bootstrap Admin Templates 2021  (0) 2021.11.04
[CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?  (0) 2021.06.09
html table css 참고  (0) 2021.04.29
[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
반응형

html table css 참고 

nanati.me/html_css_table_design/

 

html/css로 만드는 table 디자인 샘플

html ⁄ css만으로 디자인한 table 샘플 몇가지를 소개할게요^^ 웹에서 테이블은 정보의 가독성을 목적으로 한 것이기 때문에 심플한 디자인이 될 수 밖에 없죠.거기다 장식할만한 파트도 선이나

nanati.me

 

반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

image full screen css - How TO - Full Page Image  (0) 2021.08.26
[CSS] 중국어 폰트가 웹에서 굵고, 가늘고 할때 어떤 폰트 쓸까?  (0) 2021.06.09
[WEB] 화면별 일반적인 해상도. 웹에서 어떻게 볼 것인가?  (0) 2021.04.20
AdminLTE - Bootstrap 4 Admin Dashboard  (0) 2021.03.23
[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries  (0) 2020.12.21
반응형

CSS 레인보우(Rainbow) 색상의 텍스트 만들기

background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
// 배경색으로 무지개를 만듦

-webkit-background-clip: text;
// 배경색이 텍스트에만 적용되도록 함

color: transparent;
// 텍스트의 색을 투명으로 변경되어 배경색이 적용되도록 바꿈
<span class="text-rainbow">Hello Rainbow!</span>
.text-rainbow {
  background-image: linear-gradient(90deg, red, orange, yellow, green, blue, navy, purple);
  -webkit-background-clip: text;
  color: transparent;

  font-weight: bold;
  font-size: 40px;
}
반응형
저작자표시 비영리 (새창열림)

'프로그래밍 > Style & Design' 카테고리의 다른 글

AdminLTE - Bootstrap 4 Admin Dashboard  (0) 2021.03.23
[bootstrap] AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때. CSS3 Media Queries  (0) 2020.12.21
A guide of UI design trends for 2021  (0) 2020.12.09
[Style] Bootstrap - admin LTE  (0) 2020.11.24
CSS 이미지 스프라이트(Image Sprite)  (0) 2020.11.17

+ Recent posts

티스토리툴바