AI교육과정 - CSS.1

단비·2022년 10월 25일

AI교육과정

목록 보기

18/69

id 선택자
- 웹 문서 안의 특정 부분 스타일을 적용, (#)기호를 사용해서 id 속성을 가진 요소에 스타일을 적용
class 선택자
- 특정 집단의 요소를 한 번에 스타일을 적용, (.)기호를 사용해서 같은 class 이름을 가진 요소에 스타일을 적용
그룹 선택자
- 여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용
자손/자식 선택자
- 자손 선택자
  - 조성요소 하위의 모든 요소의 스타일을 적용, 자손은 자식을 포함
```
div p {}
```
- 자식 선택자
  - 부모의 요소 하위의 자식 요소에 스타일을 적용
```
```html
  div>p {}
```
```
```
<html>
<head>
    <title>제목</title>
</head>
<body>
    <h2>HTML의 구조</h2>
    <p>안녕하세요.  <span><b>HTML의 구조</b>를 알아볼게요</span></p>
</body>
</html>
```
  HTML
  head body
  title h2 p
  제목 HTML의 구조 안녕하세요 span
  <b> 를 알아볼게요
  HTML의 구조
일반/인접 형제 선택자
- 일반 형제 선택자
  - 형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
```
h2~p {}
```
- 인접 형제 선택자
  - 동일한 부모의 요소를 갖는 자식 요소들의 관계
```
h2 + p {} 
```
속성 선택자
- HTML 요소에서 src, href, style, type, id, class..등 속성을 선택자로 지정해서 스타일 적용
```
[src]{}
[src="apple.png"] {}
```

가상 선택자

클래스를 추가할 필요없이 요소 중에서 순서에 따라 스타일을 적용

li:first-child
/*li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용*/
li:last-child
/*li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용*/
li:nth-child(n)
/*li 요소 중에서 n번째 요소의 스타일을 적용 (예: 첫번째 요소부터 두번째마다 선택 li:nth-child(2n+1)*/
li:nth-child(odd)
/*li 요소 중에서 홀수번째에 해당하는 요소의 스타일을 적용*/
li:nth-child(even)
/*-li 요소 중에서 짝수번째에 해당하는 요소의 스타일을 적용*/
:link
/*하이퍼 링크가 연결됐을 때 선택*/
:visited
/*특정 하이퍼링크를 방문한 적이 있을 때 선택*/
:hover
/*특정 요소에 마우스를 올렸을 때 선택*/
:active
/*특정 요소에 마우스 버튼을 클릭하고 있을 때 선택*/
::before
/*특정 요소 앞에 텍스트 및 이미지를 삽입*/
::after
/*특정 요소 뒤에 텍스트, 이미지 등을 삽입*/

CSS의 컬러
1. 색상 이름으로 표현
  
  ex) deeppink, deepskyblue, red, blue …
2. RGB 색상 값으로 표현
  
  ex) rgb(0~255, 0~255, 0~255)
  
  rgba(0~255, 0~255, 0~255, 0~1의 소수)
3. 16진수 색상값으로 표현
  
  ex) #0000ff(파랑)
CSS의 텍스트
1. color
  - 텍스트의 색상을 설정, 기본색은 검정색
2. letter-spacing
  - 텍스트 내에서 글자 사이의 간격을 설정 ex) 안 녕. 규 카 츠 방 어
3. word-spacing
  - 텍스트 내에서 단어 사이의 간격을 설정 ex) 안녕. 규카츠 방어
4. text-align
  - 텍스트 수평 방향 정렬을 설정
5. text-indent
  - 단락의 첫 줄의 들여쓰기를 설정
6. line-height
  
  줄 높이를 정하는 속성
  - normal : 1.2
  - px, %, 자연수 ex) 글자크기가 40px일 때 line-height: 1.5 → 줄 높이는 40의 1.5배인 60px → 글자 크기는 40px이므로 글자 위와 아래에 각각 10px의 여백이 생김(줄 높이가 글자 크기보다 작으면 세로 방향으로 글자가 겹침)
  😑 브라우저 텍스트 크기
  
  pc : 16px / mobile : 12px
7. text-decoration
  - 텍스트에 여러가지 효과를 설정하거나 제거하는데 사용 ex) none, underline, line-through, overline
8. text-transform
  - 텍스트에 포함된 영문자에 대한 대소문자를 설정 ex) lowercase, uppercase, capitalize
9. font-variant
  - 소문자를 작은 대문자로 변경 ex) small-caps
10. text-shadow
  - 텍스트에 그림자 효과를 설정
```
선택자 {text-shadow: 가로거리 세로거리 번짐정도 색상;}
```
11. text-overflow
  - 텍스트를 줄바꿈하지 않았을 때 넘치는 텍스트를 어떻게 처리할 지를 결정하는 속성 ex) clip, ellipsis
12. white-spase
  - 스페이스와 탭, 줄바꿈, 자동 줄바꿈을 어떻게 처리할 지 결정하는 속성 ex) nowrap, pre, pre-wrap, pre-line
  스페이스와 탭 줄바꿈 자동 줄바꿈
  normal 병합 병합 O
  nowrap 병합 병합 X
  pre 보존 보존 X
  pre-wrap 보존 보존 O
  pre-line 병합 보존 O
13. overflow
  - 요소 내의 컨텐츠가 너무 커서 모두 보여주기 힘들 때 어떻게 보여줄지 결정하는 속성 ex) visible, hidden, scroll, auto
14. font-size
  - 텍스트 크기를 설정
    - 단위 : px, %, em, rem,
15. font-family
  - 텍스트의 글꼴을 설정
  😛 글꼴을 선택하는 방법
  1. 누구나 설치되어 있는 기본 글꼴 사용
  2. 이미지로 처리
  3. 웹 폰트를 사용
16. text-weight
  - 텍스트의 굵기를 설정
    - 기본 굵기: 400(범위 100~900)
17. background-color
  - HTML 요소의 배경색을 설정
18. background-image
  - HTML 요소의 배경으로 나타날 배경 이미지를 설정, 배경 이미지는 기본 설정으로 반복되어 나타남
```
background-image:url(경로);
```
  - background-repeat
    - 배경 이미지를 수평이나 수직방향으로 반복하도록 설정 ex) repeat-x, repeat-y, no-repeat
19. background-position
  - 반복되지 않는 배경 이미지의 상대 위치를 변경
  - %나 px을 이용해서 상대위치를 직접 설정할 수 있음
  - 상대 위치를 결정하는 기준은 왼쪽 상단(left top)
```
background-position: 가로위치값 세로위치값;
```
  left top center top right top
  left center center right center
  left bottom center bottom right bottom
20. background-attachment
  - 위치가 설정된 배경 이미지를 원하는 위치에 고정시킬 수 있음
  - 고정된 배경 이미지는 스크롤과 무관하게 화면의 위치에서 이동되지 않음
21. background-size
  - 배경 이미지 크기를 설정 px, %를 사용
  - contain
    - 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건 하에 가능한 설정
    - 가로, 세로 비율은 유지
    - 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같음
  - cover
    - 배경 이미지의 가로, 세로, 길이 모두 요소보다 크다는 조건 하에 가능한 설정
    - 가로, 세로 비율은 유지
    - 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같음
22. background
  - 배경 속성을 한 번에 적용
```
background : 파일 위치 반복여부 위치 사이즈 ...
```

	스페이스와 탭	줄바꿈	자동 줄바꿈
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

left top	center top	right top
left center	center	right center
left bottom	center bottom	right bottom

단비

tistory로 이전! https://sweet-rain-kim.tistory.com/

이전 포스트

AI교육과정 - HTML.2

다음 포스트

AI교육과정 - CSS.1

AI교육과정

AI교육과정 - HTML.2

AI교육과정 - CSS.2

0개의 댓글

	HTML
head			body
title	h2		p
제목	HTML의 구조	안녕하세요	span
			<b>	를 알아볼게요
			HTML의 구조