문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

현재 위치: start » wiki » css
wiki:css

문서의 이전 판입니다!

목차

CSS

  • description : CSS 관련 자료 등록
  • author : 주레피
  • email : dhan@repia.com
  • lastupdate : 2020-03-13

Plugin

Javascript

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">

공식 사이트

iCheck

<link rel="stylesheet" href="/plugins/iCheck/square/blue.css">

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" />

용도
사이트

bootstrap

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>

How To Add CSS

Tag Cloud

https://demo.chattymango.com/shuffle-box/
http://dimox.name/beautiful-tags-markup/

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 조심), 링크 테스트 하세요~ (할당된 사용자 jhgong, 천호동밤안개. 마감일 2020-05-29)

, ,
/volume1/web/dokuwiki/data/attic/wiki/css.1597977772.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki