css_study_d3

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 (1) |

특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 합니다. 그리고 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소라고 합니다.

하위 선택자

상위요소 하위요소
Copy

하위 선택자를 사용하면 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 합니다.

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 (2) |

자식 선택자

부모요소 > 자식요소
Copy

자식 선택자는 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자로, 두 요소 사이에 > 기호를 표시해 부모 요소와 자식 요소를 구분합니다.

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 (1) |

웹 문서에서 부모 요소가 같을 경우 형제 관계라고 하고, 형제 관계인 요소에서 먼저 나오는 요소를 형 요소, 나중에 나오는 요소를 동생 요소라고 합니다.

인접 형제 선택자

/* 요소1의 형제인 요소2 중 첫 번째 요소2 */
요소1 + 요소2
Copy

형제 요소 중에서 첫 번째 동생 요소만 선택하는 것을 인접 형제 선택자라고 합니다.

형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 (2) |

형제 선택자

요소1 ~ 요소2
Copy

형제 선택자는 형제 요소의 스타일을 정의하고 모든 형제 요소에 적용됩니다.

특정 속성이 있는 요소를 선택하는 [속성] 선택자 |

대괄호([ ]) 사이에 원하는 속성을 입력하면 속성값에 따라 원하는 요소를 선택할 수도 있습니다.

특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자 |

주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용합니다.

여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자 |

[속성 ~= 값] 선택자는 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리합니다.
속성값과 정확하게 일치하는 요소만 선택합니다.

특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자 |

[속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택합니다.

특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값] |

속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용합니다.

일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자 |

[속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택합니다.

사용자 동작에 반응하는 가상 클래스 |

사용자가 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용합니다.

방문하지 않은 링크에 스타일을 적용하는 ‘:link 가상 클래스 선택자’
방문한 링크에 스타일을 적용하는 ‘:visited 가상 클래스 선택자’
특정 요소에 마우스 포인터를 올려놓으면 스타일을 적용하는 ‘:hover 가상 클래스 선택자’
웹 요소를 활성화했을 때 스타일을 적용하는 ‘:active 가상 클래스 선택자’
웹 요소에 초점이 맞추어졌을 때 스타일을 적용하는 ‘:focus 가상 클래스 선택자’

1 ~ 4의 가상 클래스 선택자는 다음과 같은 순서로 정의해야 합니다.
```
 ① :link ② :visited ③ :hover ④ :activ
```

요소 상태에 따른 가상 클래스 (1) |

가상 클래스 선택자를 사용하여 웹 사이트나 애플리케이션 화면에서 요소의 상태에 따라 스타일을 적용할 수 있습니다.

앵커 대상에 스타일을 적용하는 ‘:target 가상 클래스 선택자’

같은 문서 안에서 다른 위치로 이동할 때에는 앵커(anchor)를 이용합니다.

:target 선택자를 사용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 쉽게 적용할 수 있습니다.

요소 상태에 따른 가상 클래스 (2) |

요소의 사용 여부에 따라 스타일을 적용하는 ‘:enabled와 :disabled 가상 클래스 선택자’

해당 요소가 사용할 수 있는 상태일 때 스타일을 지정하려면 :enabled 선택자를 사용하고, 사용할 수 없는 상태일 때 스타일을 지정하려면 :disabled 선택자를 사용합니다.

선택한 항목의 스타일을 적용하는 ‘:checked 가상 클래스 선택자’

폼의 라디오 박스나 체크 박스에서 선택된 항목에는 checked라는 속성이 추가됩니다. 이렇게 checked 속성이 있는 요소의 스타일을 지정할 때 :checked 선택자를 사용하면 편리합니다.

특정 요소를 제외하고 스타일을 적용하는 ‘:not 가상 클래스 선택자’

:not 선택자에서 not은 ‘괄호 안에 있는 요소를 제외한’이라는 의미입니다.

구조 가상 클래스 (1) |

특정 위치의 자식 요소 선택하기

요소가 여러 개 나열되어 있는 경우에는 class나 id를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있습니다.

구조 가상 클래스의 선택자
| 종류 | 설명 |

구조 가상 클래스 (2) |

수식을 사용해 위치 지정하기

위치를 지정할 때 위치가 계속 바뀐다면 반복된 규칙을 찾아내서 an+b처럼 수식을 사용할 수도 있습니다. 이때 n값은 0부터 시작합니다.

가상 요소 |

가상 요소는 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가합니다.
가상 요소는 가상 요소 이름 앞에 콜론 2개(::)를 붙여서 표시합니다.

첫 번째 줄, 첫 번째 글자에 스타일을 적용하는 ‘::first-line 요소, ::first-letter 요소’

지정한 요소의 첫 번째 줄이나 첫 번째 글자에 스타일을 적용할 수 있습니다.
::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데, 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다.

내용 앞뒤에 콘텐츠를 추가하는 ‘::before 요소, ::after 요소’

지정한 요소의 내용 앞뒤에 스타일을 넣을 수 있습니다.

translate( ) 함수를 사용해 웹 요소 이동하기 |

transform과 변형 함수

transform: 함수
Copy

CSS에서 변형을 적용하려면 transform 속성과 변형 함수 이름을 함께 작성해야 합니다.
2차원 변형 함수 : translate(), scale(), rotate(), skew()
3차원 변형 함수 : translate3d(), translateZ(), scale3d(), scaleZ(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), perspective()

웹 요소를 이동시키는 translate( ) 함수

transform: translate(tx, ty) 
transform: translate3d(tx, ty, tz) 
transform: translateX(tx) 
transform: translateY(ty) 
transform: translateZ(tz)
Copy

translate( ) 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동합니다.

scale( ) 함수를 사용해 확대/축소하기 |

요소를 확대/축소하는 scale( ) 함수

transform: scale(sx, sy) 
transform: scale3d(sx, sy, sz) 
transform: scaleX(sx) 
transform: scaleY(sy) 
transform: scaleZ(sz)

함수를 사용해 2차원에서 회전하기 |

요소를 회전시키는 rotate( ) 함수

2차원 rotate( ) 함수

transform: rotate(각도)
Copy

rotate( ) 함수를 2차원에서 사용할 때는 각도만 지정하면 됩니다.
각도의 값은 일반적인 각도(degree)나 래디안(radian)을 사용합니다.
회전 각도가 양수일 경우 오른쪽으로 회전하고, 음수일 경우 왼쪽으로 회전합니다.

이미지 회전하며 원근감 주기 |

3차원 rotate( ) 함수

transform: rotate(rx, ry, 각도)
transform: rotate3d(rx, ry, rz, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)
Copy

3차원 rotate( ) 함수는 x축이나 y축, z축을 기준으로 회전시킵니다.
3차원 변형에서 perspective 속성을 함께 사용해서 원근감을 추가해 주면 회전 형태를 입체적으로 표현할 수 있습니다.

skew( ) 함수를 사용해 도형 비틀기 |

요소를 비틀어 왜곡하는 skew( ) 함수

transform: skew(x각도, y각도) 
transform: skewX(x각도) 
transform: skewY(y각도)
Copy

skewX( ) 함수는 각돗값이 양수면 왼쪽이 올라가고 오른쪽이 내려가는 형태가 됩니다.
skewY( ) 함수는 각돗값이 양수면 오른쪽이 올라가고 왼쪽이 내려가는 형태가 됩니다.

skew( ) 함수를 텍스트 영역에 적용하기 |

텍스트 영역에 skew( ) 함수를 적용하면 이미지를 사용하지 않고도 도형의 형태를 만들 수 있습니다.

트랜지션 대상과 진행 시간 지정하기 |

트랜지션이란

트랜지션은 웹 요소의 스타일 속성이 바뀌는 것을 말합니다.

트랜지션과 속성

트랜지션의 대상을 지정하는 transition-property 속성

transition-property: all | none | <속성 이름>
Copy

트랜지션의 진행 시간을 지정하는 transition-duration 속성

transition-duration: <시간>
Copy

지정할 수 있는 시간 단위는 초(second) 또는 밀리초(millisecond)입니다.
트랜지션의 대상 속성이 여러 개라면 진행 시간도 쉼표(,)로 구분해서 여러 개를 지정할 수 있습니다.

트랜지션 속성 한꺼번에 지정하기 |

트랜지션의 속도 곡선을 지정하는 transition-timing-function 속성

transition-timing-function: linear | ease | ease-in | ease-out| ease-in-out | cubic-bezier(n, n, n, n)
Copy

트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 전체 속도 곡선을 만들 수 있습니다.
transition-timing-function 속성값
| 종류 | 설명 |

transition-delay: <시간>
Copy

이 속성을 사용하면 지정한 시간만큼 기다렸다가 트랜지션이 시작됩니다.

트랜지션의 속성을 한꺼번에 표기하는 transition 속성

transition: <transition-property값> | <tran

애니메이션의 지점, 이름, 실행 시간 적용하기 |

CSS 애니메이션에서 사용하는 속성

애니메이션의 지점과 이름을 설정하는 @keyframes 속성, animation-name 속성

@keyframes <이름> {
    <선택자> { <스타일> }
}
Copy

애니메이션의 시작과 끝을 비롯하여 상태가 바뀌는 부분이 있다면 keyframes 속성을 이용해 바뀌는 지점을 설정합니다.
선택자는 스타일 속성값이 바뀌는 지점을 가리킵니다.

animation-name: <키프레임 이름> | none
Copy

애니메이션의 실행 시간을 지정하는 animation-duration 속성

animation-duration: <시간>
Copy

기본값은 0이므로 animation-duration 속성값을 정하지 않으면 애니메이션은 실행되지 않습니다.

무한 반복하는 애니메이션 만들기 |

애니메이션의 방향을 지정하는 animation-direction 속성

animation-direction: normal | alternate
Copy

animation-direction의 속성값
| 종류 | 설명 |

animation-iteration-count: <숫자> | infinite
Copy

animation-iteration-count의 속성값
| 종류 | 설명 |

| ——– | ——– |
| 숫자 | 애니메이션의 반복 횟수를 정합니다. |
| infinite | 애니메이션을 무한 반복합니다. |
애니메이션의 속도 곡선을 지정하는 animation-timing-function 속성

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n)
Copy

animation에서도 애니메이션의 시작, 중간, 끝에서 속도를 지정하여 전체 속도 곡선을 만들 수 있습니다.

애니메이션 2개를 한꺼번에 지정하기 |

애니메이션의 속성을 한꺼번에 표기하는 animation 속성

animation: <animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> | <animation-iteration-count> | <animation-direction>
Copy

애니메이션 속성을 사용할 때 animation-duration 속성을 반드시 표기해야 한다는 점을 주의해야 합니다.

뷰포트 단위를 사용해 글자 크기 조절하기 |

반응형 웹 디자인이란

기존 웹 사이트의 내용을 그대로 유지하면서 다양한 화면 크기에 맞게 표시할 수는 있는 반응형 웹 디자인은 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현해 줍니다.

모바일 기기를 위한 뷰포트

뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.
뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시할 수 있습니다.

뷰포트 지정하기

<meta name="viewport" content="속성1=값1", "속성2=값2", ......">
Copy

뷰포트의 속성

종류설명사용 가능한 값기본값

width	뷰포트 너비	device-width 또는 크기	브라우저 기본값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본값
user-scalable	확대/축소 가능 여부	yes 또는 no (yes는 1로, device-width와 device-height값은 10으로 간주)	yes
initial-scale	초기 확대/축소 값	1~10	1

뷰포트 단위

vw(viewport width): 1vw는 뷰포트 너비의 1%와 같습니다.
vh(viewport height): 1vh는 뷰포트 높이의 1%와 같습니다.
vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같습니다.
vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같습니다.

미디어 쿼리 알아보기 |

미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법입니다.
미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.

미디어 쿼리 구문

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
not : not 다음에 지정하는 미디어 유형을 제외합니다.
and : 조건을 여러 개 연결해서 추가할 수 있습니다.

미디어 쿼리 적용하기

외부 CSS 파일 연결하기

<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

@import url(css 파일 경로) 미디어 쿼리 조건

웹 문서에 직접 정의하기

<style media="<조건>"> {
    <스타일 규칙>
}
</style>

<style>
    @media <조건> {
        <스타일 규칙>
    }
</style>

그리드 레이아웃 알아보기 |

그리드 레이아웃이란

그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말합니다.
그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있습니다.

그리드 레이아웃을 만드는 방법

플렉서블 박스 레이아웃

그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것입니다.
수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치합니다.

CSS 그리드 레이아웃

수평과 수직 어느 방향이든 배치할 수 있습니다.

플렉스 항목 배치하기 |

플렉스 박스 레이아웃에서 사용하는 용어

책 p.412를 참고해서 플렉스 박스 레이아웃에서 사용하는 용어를 살펴보세요!

플렉스 박스 항목을 배치하는 속성

플렉스 컨테이너를 지정하는 display 속성

플렉스 박스 레이아웃을 만들려면 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 합니다.
display의 속성값
| 종류 | 설명 |

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성입니다.

flex-direction의 속성값종류설명

row	주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치합니다. 기본값입니다.
row-reverse	주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치합니다.
column	주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치합니다.
column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치합니다.

https://voucher.elice.io/courses/7739/lectures/all

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스

한 권으로 끝내는 웹 기본 교과서

voucher.elice.io

'학부생나부랭이 > _web_programing' 카테고리의 다른 글

javascript_study_d1_정리 (0)	2022.01.24
css_study_d4_정리 (0)	2022.01.18
css_study_d2_정리 (0)	2022.01.07
css_study_d1_정리 (0)	2022.01.04
혼자 끄적여 본 html (0)	2022.01.03

css_study_d3_정리