CSS(Cascading Style Sheets)
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
CSS 문법
HTML 문법 <head> 요서 안에 <Style> 요소를 사용하여 CSS 문법을 적용
선택자 {속성명:속성값; 속성명:속성값; ... }
p { text-align: center; color: blue; }
--- ---- ----
선택자 속성 속성값
p: 선택자 text-align, color: 속성 center, blue: 속성값
주석문
/* ~ */ 사이에 내용을 입력
CSS를 적용하는 방법
1. 인라인 스타일
- HTML 요소 내부에 style 속성을 사용하여 적용하는 방법
<p style="text-align:center; color:blue;">안녕하세요</p>
2. 내부 스타일
HTML 문서의 <head> ~</head> 사이에 <style> ~ </style> 요소를 사용하여 적용하는 방법
<head>
<style>
p { text-align: center; color: blue; }
</style>
</head>
3. 외부 스타일
웹사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법
<head>
<link rel='stylesheet' href='css 파일 경로'>
</head>
✔rel: 현재 문서와 링크된 문서 사이의 연관관계를 명시
선택자
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용해서 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 클라이언트에 부하를 줄 수 있음
- 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음
* {속성명1: 속성값; 속성명2: 속성값; ...}
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
✔상속
- 부모 요소의 속성값이 자식 요소에게 전달되는 것
<p> # 부모
<span> # 자식
span 요소 # 자식의 자식
</span>
</p>
https://www.w3.org/TR/CSS22/propidx.html
3. id 선택자
- 웹 문서 안의 특정 부분 스타일을 적용
- # 기호를 사용하여 id 속성을 가진 요소에 스타일을 적용
[HTML]
<h2 id='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
/* <p id='hello'>또 만나요!</p> */ id는 유니크값이기 때문에 문법 자체가 잘못되었다
[CSS]
h2 {font-size:30px;} /* "안녕하세요", "반갑습니다" 모두 두 글자 크기를 30px로 적용 */
h2#hello {font-size:20px;} /* "안녕하세요" 글자만 크기를 20px로 적용 */
#hello {color: pink;} /* "안녕하세요" 글자만 색상 pink로 적용 */
4. Class 선택자
- 특정 집단의 요소를 한번에 스타일을 적용
- . 기호를 사용하여 같은 class 이름을 가진 요소에 스타일을 적용
[HTML]
<h2 id='hello'>안녕하세요</h2>
<h2>반갑습니다</h2>
<p class='hello'>Hello!</p>
<p>또 만났군요</p>
CSS
h2 { font-size: 20px; } /* 안녕하세요", "반갑습니다" 글자 크기를 20px 적용 */
.hello { color: deeppink; } /* 안녕하세요", "hello!" 글자 색상을 deeppink로 적용 */
h2.hello { font-weight:bold; } /* "안녕하세요" 글자 두께를 bold로 적용 */
5. 그룹 선택자
- 여러 개의 요소를 나열하여 스타일 적용
- ,(콤마)로 구분
✔html의 구조 확인하기
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의 <b>구조</b>입니다!!!</p>
<p>자식/자손 선택자 예제</p>
</body>
</html>
<html>
<head> <body>
<title> <h2> <p> <p>
테스트 HTML의 구조 HTML의 <b> 입니다! 자식/자손
구조
6. 자식 선택자
- 부모의 요소 하위의 자식요소의 스타일을 적용
body > p {color: deekskyblue; }
7. 자손 선택자
- 조상 요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p {color: deepskyblue; }
8. 인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용 (적힌 순서와 순서가 맞아야 인식)
h2 + p {color: deepskyblue;}
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p {color: deeppink;}
10. 속성 선택자 (Attribute selectors)
- html 요소에서 src, href, style, type, id, class ...등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
[html]
<img src='apple.png' alt='사과이미지'>
<img src='banana.png' alt='바나나이미지'>
[css]
[src] {border: 3px; solid: red;}
[src='banan.png'] { border: 3px solid red; }
11. 가상 선택자
- 클래스를 추가할 필요 없이 요소 중에서 순서에 따라 원하는 요소를 선택
[html]
<ul>
<li>김사과</li>
<li>반하나</li>
<li>오렌지</li>
<li>이메론</li>
</ul>
[CSS]
ul > li:first-child
ul 자식 중 li 요소 중에서 첫번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(n)
ul 자식 중 li 요소 중에서 n번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(even)
ul 자식 중 li 요소 중에서 짝수번째 해당하는 li 요소의 스타일을 적용
ul > li:nth-child(odd)
ul 자식 중 li 요소 중에서 홀수번째 해당하는 li 요소의 스타일을 적용
ul > li:last-child
ul 자식 중 li 요소 중에서 마지막에 해당하는 li 요소의 스타일을 적용
✔ 스타일링 링크
a:link
하이퍼링크가 연결되었을 때 선택
a:visited
특정 하이퍼링크를 방문한 적 있을 때 선택
a:hover
특정 요소에 마우스를 올렸을 때 선택
a:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
문제
'닷홈' 페이지 링크에 스타일링링크를 자유롭게 적용
(단, 외부스타일을 적용)
css 컬러
1. 색상 이름으로 표현
red, yellow, blue, black, salmon ...
2. RGB 색상값으로 표현
rgb(0, 0, 255) -> rgb(0~225, 0~225, 0~225)
red green blue
rgba(0, 0, 225, 0.5) -> rgba(0~225, 0~225, 0~225, 0~1의 소수(투명도))
16진수 색상값으로 표현
#0000FF -> #00F 파랑
00 00 FF
R G B
CSS 텍스트
letter-spacing: 텍스트 내에서 글자 사이의 간격을 설정
안녕하세요. 오늘은 월요일!
안 녕 하 세 요 . 오 늘 은 월 요 일 !
word-sapcing: 텍스트 내에서 단어 사이의 간격을 설정
안녕하세요. 오늘은 월요일 !
text-align: 텍스트를 수평 방향 정렬을 설정(left, right, center, justify)
text-indent: 단락의 첫 줄의 들여쓰기를 설정
line-height: 줄 높이를 설정하는 속성
1. 행 간격 : 텍스트 행 간의 간격이 넓어짐
2. 텍스트 정렬 : 수직 정렬
3. 텍스트 레이아웃 : 텍스트 요소의 높이와 너비를 조절
text-decoration: 텍스트에 효과를 설정하거나 제거하는데 사용(one, underline, lin-through, overline)
font-variant: 소문자를 작은 대문자로 변경(small-caps)
text-shadow: 텍스트에 그림자 효과를 설정
text-shadow: 가로길이 세로길이 번짐정도 색상;
white-space: 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성 (nowrap, pre, pre-wrap, pre-line)
text-overflow: 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할지 결정하는 속성 (clip, ellipsis)
overflow: 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 (visible, hidden, scroll, auto)
font-size: 텍스트 크기를 설정 (px, %, em, rem, ...)
font-family: 텍스트의 글꼴을 설정
글꼴을 선택하는 방법
- 누구나 설치되어 있는 기본 글꼴을 사용
- 이미지로 처리
- 클라이언트에 글꼴을 다운로드하여 사용
- 웹 폰트를 사용
https://noonnu.cc/
눈누
상업용 무료한글폰트 사이트
noonnu.cc
https://fonts.google.com/?subset=korean¬o.script=Kore
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
font-weight: 텍스트의 굵기를 설정, 기본 굵기는 400, 범위는 100 ~ 900
font-size: 텍스트 크기를 설정. px, %, em, rem, ...
'Web > CSS' 카테고리의 다른 글
| CSS 참고 (0) | 2024.05.31 |
|---|---|
| 2024-04-12 Day4 (0) | 2024.04.17 |
| 2024-04-11 Day3 (0) | 2024.04.17 |
| 2024-04-09 CSS Day2 (0) | 2024.04.09 |