wiki:css
문서의 이전 판입니다!
목차
CSS
- description : CSS 관련 자료 등록
- author : 주레피
- email : dhan@repia.com
- lastupdate : 2020-03-13
연관 WIKI: HTML JAVASCRIPT
Plugin
font-awesome
<link href="/fonts/font-awesome/css/all.min.css" rel="stylesheet"/> <link rel="stylesheet" href="/components/font-awesome/css/font-awesome.min.css">
bootstrap
<link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.min.css">
Ionicons
무료 아이콘 사용, SVG 및 웹 글꼴 지원
사용 예시
<link rel="stylesheet" href="/components/Ionicons/css/ionicons.min.css">
AdminLTE
Bootstrap 관리자 템플릿중에 대표, Adminlet3
대시보드, 위젯, 차트, 폼, 테이블, 달력, 메일 등등 다양한 템플릿 제공
사용예시
<link rel="stylesheet" href="/dist/css/AdminLTE.min.css">
adminty
Bootstrap 관리자, Adminty
틈새 중심이 아니라면 거의 모든 무료 Bootstrap 관리 대시 보드 템플릿이 수많은 웹 사이트와 애플리케이션에 적용됩니다. Adminty는 다양한 기능으로 숨을 쉴 수 있는 매우 다재다능한 사이트 캔버스입니다. 이 세상의 관리를 사용하여 구축할 수 있는 견고한 관리자로서 원하는 성공을 볼수 있는 올바른 길을 가고 있습니다. 비즈니스를 운영하고 완전히 새로운 수준으로 끌어 올릴 때 모든 것을 총체적으로 정리하는 것은 필수입니다. Adminty를 사용하면 매우 달성 할 수 있습니다. Adminty는 세 가지 홈 디자인과 다른 페이지로 구성된 관리자 패널입니다. 또한 전체 화면 버튼과 사이드 바에 대한 숨기기 및 표시 버튼이 있습니다. 두 옵션을 모두 켜면 통계와 정보에 모두 표시되며 다른 것은 방해가되지 않습니다.
google font
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
overlayScrollbars
<link th:href="${#httpServletRequest.getContextPath()}+'/plugins/overlayScrollbars/css/OverlayScrollbars.min.css'" rel="stylesheet" />
daterangepicker
<link th:href="${#httpServletRequest.getContextPath()}+'/plugins/daterangepicker/daterangepicker.css'" rel="stylesheet" />
summernote-bs4.css
<link th:href="${#httpServletRequest.getContextPath()}+'/plugins/summernote/summernote-bs4.css'" rel="stylesheet" />
용도
사이트
How To Add CSS
External CSS
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> <body> </body> </html>
Internal CSS
<!DOCTYPE html> <html> <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head> <body> </body> </html>
Tag Cloud
Tip
CSS 모든 속성을 한번에 초기화 하기
span {
/* all: unset !important; */
all: unset;
}
CSS 우선순위 할당
- CSS는 같은 속성을 여러번 정의했을 때, 나중에 설정한 값이 적용된다. 이떄 나중에 설정한 값이 적용되지 않게 하라면 속성값 뒤에 !important를 붙인다.
- property: value !important;
<code html>
color: red !important;
color: blue;
color: green !important;
</code CSS 모든 속성을 한번에 초기화하기
Ref
SCSS
Sass(Syntactically Awesome StyleSheets)또는 Scss는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장이다.
- 변수의 사용
- 조건문과 반복문
- Import
- Nesting
- Mixin
- Extend / Inheritance
와 같은 추가 기능 및 유용한 도구를 제공한다.
브라우저는 Sass의 문법을 알지 못하기 떄문에 Sass(.scss) 파일을 css 파일로 컴파일 하여야 한다. 따라서 Sass 환경의 설치가 필요하다.
작성시 기존 컨벤션 유지(Header Label 조심), 링크 테스트 하세요~
CSS Note
/volume1/web/dokuwiki/data/attic/wiki/css.1614658979.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
