728x90
1. 가상 클래스, 요소
- 가상 클래스
별도의 클래스를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있습니다.
.example:hover {
background-colror: Blue; // example 클래스에 마우스를 롤오버 했을 때
}
.example:active {
font-size:24px; //example 클래스를 마우스를 클릭했을 때
}
.example:focus {
border: 2px solid Black; //example 클래스가 포커스됐을 때
}
.example span:first-of-type {
font-size:30px; // example 클래스의 span태그를 가진 처음 요소
}
.example span:last-of-type {
font-size:5px; // example 클래스의 span태그를 가진 마지막 요소
}
.example p:first-child {
font-size:25px; // example 클래스 첫번째 요소이면서 p 태그인 요소
}
.example p:last-child {
font-size:10px; // example 클래스 마지막 요소이면서 p 태그인 요소
}
- 가상요소
가상으로 존재하는 것처럼 요소에 기능을 부여합니다.
p::before {
content: '|'; // p태그를 가진 요소는 항상 앞에 | 문자를 달고 출력
}
p::after {
content: '...더보기'; //p태그를 가진 요소는 항상 뒤에 ...더보기 문자를 달고 출력
}
p::selection {
background-color: yellow; // p태그를 가진 요소를 선택하면 배경을 노랑색으로
}
li::marker {
content: '+'; //li태그의 목록 아이템 앞에 글머리기호를 선택
}
P::first-letter {
font-size:25px; //p태그의 첫 글자 크기를 25px로
}
p::first-line {
font-weight:bold; //p태그의 첫줄을 두껍게
}
2. Float
float은 물위를 떠다니고, 흘러다니는 것을 말합니다.
마찬가지로 텍스트나 인라인 요소가 주위를 감쌀 수 있도록 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/23/style.css">
</head>
<body>
<h1>clear 적용</h1>
<div class="div1">1</div>
<div class="div2">
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Est adipisci illum atque molestias amet omnis temporibus accusantium<br>
officia maiores, eum vitae, iure quas impedit nobis cumque tempore hic aliquid ipsam.
</div>
<h1>clear 미적용</h1>
<div class="div3">2</div>
<div class="div4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Est adipisci illum atque molestias amet omnis temporibus accusantium<br>
officia maiores, eum vitae, iure quas impedit nobis cumque tempore hic aliquid ipsam.
</div>
</body>
</html>.div1 {
float: left;
padding: 10px;
border: 3px solid olive;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
.div3 {
float: left;
padding: 10px;
border: 3px solid green;
}
.div4 {
padding: 10px;
border: 3px solid salmon;
clear: left;
}
클리어는 다음과 같은 값을 가집니다.
- none: 기본값입니다.
-left: 요소가 왼쪽 float 요소 아래로 밀려납니다.
-right: 요소가 오른쪽 float 요소 아래로 밀려납니다.
-both: 요소가 양쪽 float 요소 아래로 밀려납니다.
-inherit: 요소가 부모요소로부터 clear 값을 상속합니다.
3. Margin, Border, Padding, Content
-margin: 요소의 테두리 바깥을 둘러싼 영역입니다.
-border: 요소를 둘러싼 테두리를 말합니다.
-padding: 요소 테두리와 내용 사이의 공간을 말합니다.
-content: 요소의 내용 부분을 말합니다.
4. Google Font 사용
구글 검색창에 구글폰트라고 검색합니다.
원하는 폰트를 클릭합니다.
원하는 폰트를 골랐다면 +표시를 눌러 담습니다.
그리고 스크롤을 내려보면 html에 붙여넣을 수 있는 링크가 보입니다.
복사한 후 html의 head 속에 붙여넣습니다.
그리고 그 밑에는 CSS용 코드도 보입니다.
이역시 복사한 후 CSS에 붙여 넣습니다.
728x90
'🦴HTML & CSS > style.css' 카테고리의 다른 글
| [CSS]_프론트엔드의 꽃 @keyframes (0) | 2023.08.09 |
|---|---|
| [CSS]_프론트엔드의 꽃 :hover (0) | 2023.08.09 |
| [CSS]_프론트엔드의 꽃 3 (0) | 2023.07.22 |
| [CSS]_프론트엔드의 꽃 1 (0) | 2023.07.22 |
