1. CSS:
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어
css 문법
HTML 문서<head> 요소 안에 <style> 요소를 사용하여 css 문법을 적용
선택자는 스타일을 적용할 요소를 선택하는 역할을 합니다. 예를 들어, h1 선택자는 모든 h1 태그에 스타일을 적용합니다.
속성은 요소의 특정 스타일을 정의합니다. 예를 들어, color 속성은 텍스트의 색상을 정의합니다.
속성값은 속성에 대한 구체적인 값을 지정합니다. 예를 들어, color 속성의 값으로 red를 지정하면 텍스트의 색상을 빨간색으로 설정합니다.
선택자 { 속성명:속성값; 속성명;속성값; ... }
p { text-align: center; color: 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' hre='css 파일 경로'>
<.head>
✔ rel
현재 문서와 링크된 문서 사이의 연관관계를 명시
2. 선택자:
1. 전체 선택자
- 스타일을 모든 요소에 적용
- * 기호를 사용하여 표현
- 너무 많은 요소가 있는 HTML 문서에 사용할 경우 부하를 줄 수 있음
- 개별적으로 적용한 스타일은 전체 선택자에 적용한 스타일보다 우선순위가 높음
- EX) * { 속성명1: 속성값, 속성명2: 속성값; .. }
2. 요소 선택자
- 특정 요소가 쓰인 모든 요소에 스타일을 적용
✔ 상속
부모 요소의 속성값이 자식 요소에게 전달되는 것
<p>
<span>
span 요소
</span>
</p>
3. id 선택자
- 웹문서안의 특정 부분 스타일을 적용
- #기호를 사용하여 id 속성을 가진 요소에 스타일을 적용
[HTML]
<h2 id ='hello'>안녕하세요</h2>
<h2>반갑습니다</h2> [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: blod; } /* "안녕하세요" 글자 두께를 blod로 적용 */
5. 그룹 선택자
- 여러개의 선택자를 나열하여 스타일을 적용
- ,(콤마)로 구분
- h2, p {text-align: center; }
✔ 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: deeppink; }
7. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
- body p { color: deepskyblue; }
8. 자식 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
- h2 + p {color: deepskyblue;}
9. 일반 형제 선택자
- 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
- h2 ~ p {color: deeppink; }
10. 속성 선택자
- HTML 요소에서 src, href, style, id, class ... 등 속성을 선택자로 지정해서 스타일을 적용
- 패턴이 너무 많음
[HTML]
<img src='apple.png' alt='사과 이미지'>
<img src='banana.png' alt='바나나 이미지'> [CSS]
[src] { boreder: 3px solid red; }
[src= 'banana.png'] { boreder: 3px solid red; }
11. 가상선택자
- 클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
[HTML]
<ul>
<li>김사과</li>
<li>반하나</li>
<li>오렌지</li>
<li>이메론</li>
</ul> [CSS]
ul li:first-child
ul 자식 중 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
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
3. CSS 컬러 & 텍스트
CSS 컬러
- 색상 이름으로 표현
red, yellow, blue, black, salmon ... - RGB 색상값으로 표현
rgb(0, 0, 255)
rgba(0, 0, 255, 0.5) - 16진수 색상값으로 표현
#0000FF
00 00 FF => # #00F
R G B
CSS 텍스트
letter-spacing: 텍스트 내에서 글자 사이의 간격을 설정
안녕하세요. 오늘은 월요일!
안 녕 하 세 요 . 오 늘 은 월 요 일 !
world-spacing: 텍스트 내에서 단어 사이의 간격을 설정
안녕하세요. 오늘은 월요일 !
text-align: 텍스트 수평 방향 정렬을 설정(left, right, cener, justify)
text-indent: 단락의 첫 줄의 들여쓰기를 설정
line-height: 줄 높이를 설정하는 속성
- 행간격: 텍스트 행 간의 간격이 넓어짐
- 텍스트 정렬: 수직 정렬
- 텍스트 레이아웃: 텍스트 요소의 높이와 너비를 조절
text-decoration: 텍스트에 효과를 설정하거나 제거하는데 사용(none, underline, line-throught, overline)
font-variant: 소문자를 작은 대문자로 변경(small-caps)
text-shadow: 텍스트에 그림자 효과를 설정
ㄴ text-shadow: 가로길이 세로길이 번짐정도 색상;
white-space: 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 결정하는 속성(nowrap, pre, pre-wrap, pre-line)
text-overflow: 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트틀 어떻게 처리할지 결정하는 속성(clip, elipsis)
overflow: 요소내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성(visible, hidden, scroll, auto)
font-family: 텍스트의 글꼴을 설정
- 글꼴을 선택하는 방법
- 누구나 설치되어 있는 기본 글꼴을 사용
- 이미지로 처리
- 클라이언트에 글꼴을 다운로드 시켜 사용
- 웹 폰트를 사용
'웹 개발' 카테고리의 다른 글
| 9. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 2 (0) | 2024.04.08 |
|---|---|
| 8. 웹 개발을 위한 기본 CSS 태그 모음 & 요약 정리 1 (0) | 2024.04.08 |
| 6. 웹 개발을 위한 기본 HTML 태그 모음 & 요약 정리 3 (0) | 2024.04.05 |
| 5. HTML 요소 이해: 인라인, 블록, 시맨틱 태그 (0) | 2024.04.05 |
| 과제- 뉴스기사,즐겨찾기,이력서 html 만들기 (0) | 2024.04.04 |
