본문 바로가기

HTML5 & CSS355

[HTML5 & CSS3] 트랜지션 ▶ 트랜지션 트랜지션(transition)은 변형을 넘어 하나의 스타일에서 다른 스타일로 완전히 바꾼다. *트랜지션이란? 트랜지션(transition)이란 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것을 말한다. 속성 설명 transition-property 트랜지션 대상을 설정한다. transition-duration 트랜지션 진행 시간을 설정한다. transition-timing-function 트랜지션 속도 곡선을 설정한다. transition-delay 트랜지션 지연 시간을 설정한다. transition transition-property와 transition-duration, transition-timing-function, transi.. 2021. 2. 14.

[HTML5 & CSS3] 변형과 관련된 속성들 ▶ 변형과 관련된 속성들 앞에서 배운 변형 함수들에서 2차원 변형에 원근감을 추가하면 3차원 변형을 만들 수 있는데 이때 단순히 z축만 추가한다고 해서 원근감이 생기지는 않는다. 다시 말해 변형할 때 기준이 되는 지점을 바꾸거나 요소의 원근감을 표현하기 위한 다른 속성도 필요하다. *transform-origin 속성 - 변형 기준점 설정하기 앞에서 transform 속성에 쓰이는 변형 함수를 배울 때 x축과 y축, z축을 기준으로 변형했다. 그런데 transform-origin 속성을 이용하면 축이 아닌 특정 지점을 변형의 기준으로 설정할 수 있다. 물론 2차원 변형과 3차원 변형 모두에서 사용 가능하다. 기본형) transform-origin: | initial | inherit ; 속.. 2021. 2. 14.

[HTML5 & CSS3] 변형 ▶ 변형 특정 요소의 크기나 형태가 변하는 것. CSS3를 이용하면 스타일 시트 소스만으로 간단히 이미지를 변형할 수 있다. *2차원 변형과 3차원 변형 '2차원 변형'은 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것을 말한다. '3차원 변형'은 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말한다. *transform과 변형 함수 이미지를 회전시키거나 이동하는 등 웹 요소를 변형하려면 transform 속성을 사용해야 하는데 transform: 다음에 변형 함수를 함께 입력해 사용한다. 예를 들어 .photo라는 클래스 선택자를 가진 웹 요소를 x축으로 50px, y축으로 100px 이동시키려면 웹 요소를 이동시키는 변형 함수 translate을.. 2021. 2. 14.

[HTML5 & CSS3] 가상 클래스와 가상 요소 ▶ 가상 클래스와 가상 요소 예를 들어 메뉴에서 몇 번째 항목이라든가 단락의 첫 번째 글자 등의 경우, 어떻게 지정해야 할까요? 이 때 클래스 이름 앞에 콜론(:)을 붙여 표시하는 가상 클래스와 클래스 이름 앞에 콜론 두 개(::)를 붙여 표시하는 가상 요소를 사용한다. *사용자 동작에 반응하는 가상 클래스 사용자가 웹 요소를 클릭하거나 마우스 커서를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. 1. :link 가상 클래스 선택자 - 방문하지 않는 링크에 스타일 적용 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나.. 2021. 2. 14.

[HTML5 & CSS3] 속성 선택자 ▶ 속성 선택자 속성 선택자는 태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정한다. 속성 값 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식이다. *[속성] 선택자 - 지정한 속성에 스타일 적용하기 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 *[속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용하기 HTML5 표준안 사이트 HTML CSS Selector Level 3 미디어쿼리 *[속성 ~= 값] 선택자 - 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기 메뉴 1 메뉴 2 메뉴 3 메뉴 4 *[속성 |= 값] 선택자 - 특정 값이 포함된 속성에 스타일 적용하기 외국어 서비스 : 영어 영어 일본어 .. 2021. 2. 14.

[HTML5 & CSS3] 연결 선택자 ▶ 연결 선택자 *하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기 하위 선택자는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 한다. 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정한다. *자식 선택자 - 자식 요소에만 스타일 적용하기 자식 선택자는 자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분한다. 자식 선택자는 종종 하위 선택자와 혼동되는데 하위 선택자에서는 자식 요소뿐만 아니라 자식의 자식, 즉 손자 요소까지 적용되는 반면, 자식 선택자에서는 바로 아래 요소, 즉 자식 요소에만 스타일이 적용된다. *인접 형제 선택자 - 가장 가까운.. 2021. 2. 14.

이전 1 2 3 4 5 6 7 ··· 10 다음

티스토리툴바