하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 (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를 사용하지 않고도 스타일을 지정할 요소가 몇 번째인지를 따져서 스타일을 적용할 수 있습니다.
- 구조 가상 클래스의 선택자
- | 종류 | 설명 |
| ——– | ——– |
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택합니다. |
| A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택합니다. |
| :first–child | 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택합니다. |
| :last–child | 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택합니다. |
| A:first-of-type | 부모 안에 있는 A 요소 중에서 첫 번째 요소를 선택합니다. |
| A:last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소를 선택합니다. |
| :nth–child(n ) | 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택합니다. |
| :nth–last–child(n ) | 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택합니다 |
| A:nth-of-type(n ) | 부모 안에 있는 A 요소 중에서 n번째 요소를 선택합니다. |
| A:nth-last-of-type(n ) | 부모 안에 있는 A 요소 중에서 끝에서 n번째 요소를 선택합니다. |
구조 가상 클래스 (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 속성값
- | 종류 | 설명 |
| ——– | ——– |
| ease | 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝냅니다. 기본값입니다. |
| linear | 시작부터 끝까지 똑같은 속도로 진행합니다. |
| ease-in | 느리게 시작합니다. |
| ease-out | 느리게 끝냅니다. |
| ease-in-out | 느리게 시작하고 느리게 끝냅니다. |
| cubic-bezier(n , n , n , n ) | 베지에 함수를 정의해서 사용합니다. 이때 n값은 0~1 사이만 사용할 수 있습니다. |
트랜지션의 지연 시간을 설정하는 transition-delay 속성
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의 속성값
- | 종류 | 설명 |
| ——– | ——– |
| normal | 애니메이션을 끝까지 실행하면 원래 위치로 돌아갑니다. 기본값입니다. |
| alternate | 애니메이션을 끝까지 실행하면 왔던 방향으로 되돌아가면서 애니메이션을 실행합니다. |
반복 횟수를 지정하는 animation-iteration-count 속성
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 | 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다. |
| inline-flex | 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치합니다. |
플렉스 방향을 지정하는 flex-direction 속성
- 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성입니다.
- 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 |
댓글