멋스러운 레이블을 쉽게 붙일 수 있는 레이블.css가 편해요.
행사 같은 건 공식 홈페이지에서 보면 이해하기 쉬울 거예요!
공식 사이트
사용법
태그를 배치할 태그<figure class="label inside top" data-label="ラベルだよ">
<div>ここがラベルを置きたいエリア</div>
</figure>
이렇게 class="label"로 둘러싸면 됩니다.
지정할 수 있는 위치
1. top
2. middle
3. bottom
4. right
5. left
6. inside
7. outside
오른쪽 상단에서 class = "label top right"를 클릭하면 됩니다.
지정할 수 있는 애니메이션
1. float
2. fade
시험해 보다
어쨌든 다운로드부터 해.$ wget https://github.com/usablica/label.css/archive/master.zip
$ unzip master.zip
공식 홈페이지에download 버튼이 있는데 저쪽에서도 괜찮아요.
해동하면 이런 느낌의 구성이죠.
label.css-master --- sass/
|- less/
|- css/--- label.css
|-- label.min.css
|- config.rb
|- README.md
css 디렉터리 아래, label.css와 label.min.css가 있어서 읽습니다.
index.html<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
</body>
</html>
react 그림으로 만들어 보세요.
index.html<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
<figure class="label inside top right float" data-label="これはreactの画像です">
<img src="https://facebook.github.io/react/img/logo.svg">
</figure>
</body>
</html>
분별하기는 어렵지만 오른쪽 상단의 라벨.
상당히 편리하게 사용하니 기분이 좋아요!
Reference
이 문제에 관하여(멋스러운 레이블을 쉽게 붙일 수 있는 레이블.css가 편해요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h-tko/items/09e59cc8b0fbfcfcb7e2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
태그를 배치할 태그
<figure class="label inside top" data-label="ラベルだよ">
<div>ここがラベルを置きたいエリア</div>
</figure>
지정할 수 있는 위치
1. top
2. middle
3. bottom
4. right
5. left
6. inside
7. outside
지정할 수 있는 애니메이션
1. float
2. fade
시험해 보다
어쨌든 다운로드부터 해.$ wget https://github.com/usablica/label.css/archive/master.zip
$ unzip master.zip
공식 홈페이지에download 버튼이 있는데 저쪽에서도 괜찮아요.
해동하면 이런 느낌의 구성이죠.
label.css-master --- sass/
|- less/
|- css/--- label.css
|-- label.min.css
|- config.rb
|- README.md
css 디렉터리 아래, label.css와 label.min.css가 있어서 읽습니다.
index.html<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
</body>
</html>
react 그림으로 만들어 보세요.
index.html<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
<figure class="label inside top right float" data-label="これはreactの画像です">
<img src="https://facebook.github.io/react/img/logo.svg">
</figure>
</body>
</html>
분별하기는 어렵지만 오른쪽 상단의 라벨.
상당히 편리하게 사용하니 기분이 좋아요!
Reference
이 문제에 관하여(멋스러운 레이블을 쉽게 붙일 수 있는 레이블.css가 편해요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h-tko/items/09e59cc8b0fbfcfcb7e2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ wget https://github.com/usablica/label.css/archive/master.zip
$ unzip master.zip
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
</body>
</html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html: charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./label.css-master/css/label.min.css">
</head>
<body>
<figure class="label inside top right float" data-label="これはreactの画像です">
<img src="https://facebook.github.io/react/img/logo.svg">
</figure>
</body>
</html>
Reference
이 문제에 관하여(멋스러운 레이블을 쉽게 붙일 수 있는 레이블.css가 편해요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h-tko/items/09e59cc8b0fbfcfcb7e2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
