1. Tags
| <div> | 특정 영역을 지정하여 스타일을 줄 경우 사용 |
| <span> | 특정 문자열을 지정하여 스타일을 줄 경우 사용 |
| <details> <summary> | 요약 / 상세보기 메뉴를 만들 때 사용 |
| <dialog open> | 알림 팝업 같은 효과를 주고 싶을 때 사용 |
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
</style>
</head>
<body>
<!-- 아래 둘은 형태가 없다. -->
<div>DIV 는 특정 영역에 스타일을 주고 싶을 경우 사용한다.</div>
<span>span 은 특정 문장에 스타일을 주고 싶을 경우 사용한다.</span>
<hr/>
<details>
<summary>details & summary</summary>
<p>
summary 태그의 내용을 우선 보여주고
자세한 내용은 사용자를 통해 확인할 수 있도록 해준다.
</p>
</details>
<dialog open>open 속성이 있을 때와 없을 때를 비교해보자.</dialog>
</body>
</html>
2. Emoji
emoji 는 문자로써 이미지를 표현 할 수 있는 기능이다.
사용법은 10진수 코드와 16진수 코드가 있다.
그림문자 자체를 복사해서 붙여 넣어도 된다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
p{
font-size: 100px;
}
</style>
</head>
<body>
<!-- 
진수; -->
<p>⌚</p>
<!-- 진수; -->
<p>😎</p>
</body>
</html>
3. Selector
| #myid | 아이디 myid 인 요소 |
| .myclass | 클래스가 myclass 인 요소 |
| p | P 태그 |
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
/* css에서 사용되는 주석 */
p{
/* p 태그 전체에 배경색을 입힌다. */
background-color: cornflowerblue;
}
.myclass{
/* 클래스 이름이 myclass 인 요소의 글자 색상을 변경 */
color: crimson;
}
#myid{
/*
아이디가 myid 인 요소의 글자 굵기를 변경한다.
아이디는 중복되어서는 안 된다. (중복될 경우 맨 위의 아이디만 적용된다.)
*/
font-weight: 600;
}
/* p 와 div 모두 선택 */
p,div{
font-size: 24px;
}
/* div 자식인 p, > 대신 공백으로 해도 된다. */
div>p{
background-color: deeppink;
}
/* 특정 태그에 특정 속성을 가지고 있는 요소 선택 */
input[type="text"]{
background-color: skyblue;
}
input[type="email"]{
background-color: bisque;
}
img{
width: 100px;
}
/* 단어 단위 검색 */
img[alt~="버섯"]{
border: 1px solid black;
}
a:hover{
background-color: aqua;
}
/* img 에 hover 했을 때 테두리가 생기도록 */
img:hover{
border: 1px solid black;
}
</style>
</head>
<body>
<p id="myid"></p>
<p class="myclass">class 가 있는 요소</p>
<p class="myclass">class 가 있는 요소</p>
<p>태그만 있는 요소</p>
<div>DIV 요소</div>
<div>
<p>DIV 안의 P태그(P 는 DIV의 자식)</p>
</div>
<input type="text">
<input type="email">
<br/>
<img src="../img/img01.jpg" alt="버섯 이미지"/>
<img src="../img/img02.jpg" alt="꽃"/>
<img src="../img/img03.jpg" alt="마리오"/>
<img src="../img/img04.jpg" alt="모르겠다."/>
<br/>
<a href="#">테스트 링크</a>
</body>
</html>
4. Border
border 는 컨텐츠를 감싸는 라인 입니다.
border 는 두께, 종류, 색상 등을 설정 해 줍니다.
border-방향-속성 형식으로 각 방향에 대한 속성을 설정 할 수 도 있습니다.
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="icon" href="../img/chrome.png">
<style>
/* border-[top|right|bottom|left]-[width|style|color] */
.one{
border: 5px solid red;
}
.two{
border-width: 10px;
border-style: groove;
border-color: brown;
}
.three{
border-top-style: dotted;
border-right-style: double;
border-bottom-style: dashed;
border-left-style: solid;
}
.four{
border-style: dotted;
/* 12 -> 3 -> 6 -> 9 */
border-color: red orange green blue;
}
.five{
/* 12&6 3&9 */
border-style: dashed solid;
border-color: red blue;
}
</style>
</head>
<body>
<p class="one">컨텐트 입니다.</p>
<p class="two">컨텐트 입니다.</p>
<p class="three">컨텐트 입니다.</p>
<p class="four">컨텐트 입니다.</p>
<p class="five">컨텐트 입니다.</p>
</body>
</html>
'CSS' 카테고리의 다른 글
| 03. Hover, Width, Position, Z_Index, Opacity, Sprite (0) | 2024.02.28 |
|---|---|
| 02. Space, BgColor, BgImage, Display (0) | 2024.02.28 |
