1. CSS 기본 문법
선택자 {
속성1: 값;
속성2: 값;
/* ... */
}2. 폰트 스타일(기울이기) + 폰트 굵기
p {
/* normal, italic, oblique */
font-style: normal;
/* normal, bold, 100~900 */
font-weight: normal;
}
/*p 태그에 대해서 해당 폰트 기울기, 굵기가 적용된다.*/3. 요소마다 글자 크기 키우기 (일괄 키우기, 상대 비율로 키우기(복리 o,x))
(1) 일괄 커짐 (px : 픽셀)
선택자 {
font-size: ~~px;
}
/*해당 선택자 영역 내의 모든 글자는 ~~px만큼 크기가 커짐.*/(2) 갈수록 비율 만큼 커짐 (100%, 1em)
선택자 {
font-size: ##;
}
선택자 {
font-size: #.#em;
}
/*100%가 1em임.*/
/*선택자의 부모 요소보다 ##%만큼 더 커지는 것
ex- 120%면 부모 요소보다 1.2배 글자 크기가 더 커지는 것. */
/*이건 내부에 같은 이름의 태그가 있을 떄마다 중첩임. 선택자 내부 자손 태그들도 갈수록 1.2배씩 더 커짐.*/
/*만약 선택자가 div라면 div 내부의 div는 1.2배, 그 내부의 div는 1.2배 더 복리로 커진다.*/
/*선택자와 다른 태그는 해당 선택자 내부에 있더라도 적용이 안된다!! (실습 참고)*/(3) 딱 한번 비율만큼 커지고 그게 그대로 감.
선택자 {
font-size: #.#rem;
}
/*부모 요소보다 #.#배 글자 크기가 더 커지고, 그 이후 자식 클래스들에게도 똑같이 적용됨.
글자 수 크기 커지는 게 복리로 작용하지 않음.*/
4. 글자 꾸미기(밑줄, 선의 형태, 색 굵기)
p {
/*여기 적을 수 있는 속성이 엄청 많음. 글자 구부릴 것인지, 색깔, 줄을 어느 위치에 칠 것인지
적는 순서는 상관이 없음.
예시: green(그 외 색깔들), wavy, dotted, underline, overline, line-through, dashed line-through*/
text-decoration: wavy overline blue ;5. 영어 Only 앞 글자 자동 대문자 바꾸기, 전체 대문자, 전체 소문자
/* capitalize, uppercase, lowercase */
text-transform: capitalize;
}6. 글자 음영 주기
/*기본적으로 상,하로 얼마나 그림자 떨어트릴지, 그림자 색깔*/
p {
text-shadow:4px 1px #dedede;
}
/* 그림자는 중복해서 줄 수 있고, 뒤에 적은 것이 맨 겉을 감쌈.
좌표를 2개 이상 찍을 경우, 상,하,좌,우,대각선왼상, 대각선오상, 대각선왼하,대각선오하로 찍힘.
*/
p {
text-shadow:
/* 안쪽 흰색 그림자 */
1px 0 white, -1px 0 white, 0 1px white, 0 -1px white,
1px 1px white, 1px -1px white, -1px 1px white, -1px -1px white,
/* 바깥쪽 미국자두색 그림자 */
2px 0 plum, -2px 0 plum, 0 2px plum, 0 -2px plum,
2px 1px plum, -2px 1px plum, 1px 2px plum, 1px -2px plum,
2px -1px plum, -2px -1px plum, -1px 2px plum, -1px -2px plum,
2px 2px plum, 2px -2px plum, -2px 2px plum, -2px -2px plum;
}**참고**
크롬에서 ctrl + shift + i 하면 해당 페이지에서 쓰인 CSS HTML 코드 보여줌
나한테만 적용되지만 내가 거기서 값을 바꾸면 바꾼 결과가 화면에 나옴
그거 복사해서 원래 코드에 붙여서 바꾸면 수월!
7. 스스로 해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습용!!</title>
<style>
.style1 {
color:darksalmon;
}
</style>
<link rel="stylesheet" href="./pratice.css">
</head>
<body>
<!--폰트 기울이기, 폰트 굵기-->
<p class="style"> 폰트 기울이기와 굵기</p>
<br>
<ol class="Outer">
<h5>할 일 목록</h5>
<li>마크 언어 공부</li>
<li>java 공부</li>
<li>CSS 스타일 언어 공부</li>
<li>가사 쓰기</li>
<li class="end">일찍 자기
<ul>
<li>새벽 1시 내로(주중)</li>
<li>새벽 3시 내로(주말)</li>
</ul>
</li>
<ol>
<li>김건우</li>
<li>김현곤</li>
<li>김종민</li>
</ol>
<ul>
<li>이철호</li>
<li>허정현</li>
<li>김동수</li>
</ul>
</ol>
<ol class="Eng">
<h1><strong>--------------</strong></h1>
<li>What I want to do</li>
<li>I was ChildBook_Maker in 2026</li>
<li>I was rapped in Rap_House hosted by The Quiett in 2026</li>
<li>I was Google Developer in 2026</li>
<li>I am and was happy</li>
</ol>
</body>
</html>/*1. 폰트 기울이기, 폰트 굵기
2. 요소마다 글자 크기 키우기 (일괄, 상대적 (복리, 복리 x))
3. 글자꾸미기(글자에 줄, 선의 색, 형태)
4. 영어 앞글자 대문자, 전체 대문자, 전체 소문자
5. 글자 음영주기*/
body{
background-color: black;
}
html{
color: white;
font-size: 16px;
}
p:hover,ol li:hover, ol li:nth-child(odd):hover{
font-size: larger;
color: aquamarine;
}
ol li:nth-child(odd){
color: antiquewhite;
}
.style{
font-style: italic;
font-weight: 900;
}
ol{
font-size: 1.5em;
}
.Outer>li{
text-decoration:dashed cyan underline;
}
.Eng {
text-transform: uppercase;
}
.Outer>ol, .Outer>ul{
text-shadow: 20px 14px 5px #8bc34a;
}
'프론트엔드 개발 > HTML, CSS - 이론' 카테고리의 다른 글
| [CSS] 색 표현하기 (0) | 2023.02.17 |
|---|---|
| [CSS] 문단과 목록 스타일 만들기 (0) | 2023.02.16 |
| [HTML] CSS 적용 방법과 선택자들 (0) | 2023.02.15 |
| [HTML] 기타 활용되는 태그 (0) | 2023.02.10 |
| [HTML] 사용자로부터 입력 받기 3 (0) | 2023.02.10 |
