CSS/class이용하기 (id와 다른점)과 꿀팁Style bot
|
●해당 CSS 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
li{
color:blue;
}
ul li{
font-size:40px;
}
.em{
}
</style>
</head>
<body>
<ol>
<li class="em">html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ul>
<li>최진혁</li>
<li class="em">최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
</body>
</html>
위에 처럼 최유빈과 html이라는 글자만 속성을 부여하고 싶을 때는 class라는 약속된 속성으로 그룹으로 묶어준다.
묶고 나서, style태그 안에다가 em(임의로 설정 아무거나 써도 됨){ } 이런 식으로 명령어를 입력하면 되는데,
id는 속성을 부여할 때, 앞에다가 #을 붙인다.
예를 들어 위에 처럼 class="em"이 아니라 id="em"일 경우에는
style태그 안에 #em {} 이런 식으로 시작하는 것이다.
<--꿀팁 : 추천사이트 -->
Home
Change the appearance of the web instantly.
stylebot.dev
다운은 여기서
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=ko
Stylebot
웹의 모양을 즉시 변경
chrome.google.com
Style bot
크롬 웹의 애플리케이션 중 하나로, 굳이 코드 에디터로 일일이 변경하지 않고,
간단하게 웹페이지에서 바로바로 바꿔줄 수 있는 미니 에디터 느낌이다.
'Programing > CSS' 카테고리의 다른 글
| CSS/ CSS 확장자 따로 만들기 (css를 한번만 만들어서 일일이 바꾸는 불편함 감소하기) : 중복의 제거 (0) | 2020.12.27 |
|---|---|
| CSS 하나의 태그에만 속성을 줄 때 쓰는 id (0) | 2020.12.24 |
| CSS 속성에 순서는 바뀌어도 된다. (0) | 2020.12.21 |
| CSS 특정 태그 안에 태그만 스타일 주기 (0) | 2020.12.19 |
| CSS 밑줄치기(다른 것도 중첩가능) (0) | 2020.12.19 |
| CSS 서로 다른 항목(선택자) 같은 효과 주기 (0) | 2020.12.18 |
| <style>태그와 CSS 코드 (0) | 2020.12.16 |
| CSS 기본문법 h1 {color:red} (0) | 2020.12.15 |
