본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 8. 트랜지션과 애니메이션(1) - transform(변형) 1 이번 아티클부터는 CSS에서 애니메이션을 다루는 방법에 대해서 살펴봅니다. 첫 번째로는 우선 CSS에서 사용하게 되는 transform 속성의 개념과 사용 방법에 대해서 살펴보겠습니다. 말 그대로 물체의 크기, 형태의 위치 등을 바꾸는 것을 트랜스폼(transform)으로 지정하게 됩니다. transform 속성도 다른 여타 CSS에서의 속성들과 비슷한 형태로 지정하게 됩니다. transform: 함수() 형태로 선언하게 되지요. 예를 들어서 어떤 클래스 선택자에 요소를 x축 100px, y축 50px 이동하는 속성을 부여한다고 하면 아래와 같이 작성하게 됩니다. .picture { transform: translate(100px, 50px); } ○ 2차원 트랜스폼(transform) 웹에서도 여타 다..
[CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 2 앞서 살펴본 구조 가상 클래스와 관련된 내용을 계속해서 살펴보도록 하겠습니다. [CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 1 이번에는 구조 가상 클래스에 대해서 살펴보도록 하겠습니다. 일단, '구조 가상 클래스'의 정의에 대해서 간단하게라도 살펴봐야 하겠죠? 구조 가상 클래스라 함은, 웹 문서의 전체적인 구조를 nozeroslope.tistory.com ○ 가상 요소 가상 클래스를 통해서는, 웹 문서의 여러 가지 요소 중에서 특정한 요소를 선택할 수 있었습니다. 가상 요소는 비슷해 보이지만 그 개념과 활용이 조금 다르죠. 가상 요소는 불필요한 태그를 적용하지 않아도, 특정한 부분에 스타일을 적용해 꾸밀 수 있도록 하고자 사용되는 것입니다. 개념이 조금 복잡하죠? 대표적으로 아래의..
[CSS] 7. 가상 클래스와 가상 요소(3) - 구조 가상 클래스 1 이번에는 구조 가상 클래스에 대해서 살펴보도록 하겠습니다. 일단, '구조 가상 클래스'의 정의에 대해서 간단하게라도 살펴봐야 하겠죠? 구조 가상 클래스라 함은, 웹 문서의 전체적인 구조를 기준으로 잡고, 이 안에서 특정한 위치에 있는 요소를 골라서 스타일을 적용하는 가상 클래스 선택자입니다. 여기서 살펴볼 내용이 바로, 위에서 언급한 [특정한 위치]를 정의하는 방식이 되는 것이죠. ○ 특정 위치의 자식 요소 선택 우리는 앞서 살펴본 방식에 따라, class 또는 id를 사용하여 특정한 웹 문서의 요소를 선택하고 스타일을 적용해 왔습니다. 그런데 여러가지 요소가 뒤섞여 여러 개 나열되어 있는 경우에는 요소의 배치 '순서'를 통해서 스타일을 적용할 수 있습니다. 즉, "n번째 요소에만 스타일을 적용해라."라..
[CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 2 ○ :checked - "선택한 항목"에 대해서 스타일을 적용 우리가 어떤 form의 라디오 버튼, 체크 박스에서 특정 항목을 선택할 경우 이 요소에는 checked라는 속성이 추가됩니다. 그래서 이러한 checked 속성이 부여된 요소에 스타일을 적용할 때는 :checked선택자를 사용하게 됩니다. '라디오 버튼을 클릭했을 때 레이블에 적용된 스타일을 변경한다'라고 정의하게 되면, 다음 예시와 같이 사용하게 됩니다. 참고로 이번 예시에서는 adjacent selector(인접 형제 선택자)를 사용하게 됩니다. 이 선택자의 정의가 기억나지 않으신다면, 아래 아티클에서 다시 복습하시기 바랍니다. [CSS] 6. 고급 선택자(1) - 연결 선택자 2 연결 선택자(selector) 중에서 이번에는 형제 관계로..
[CSS] 7. 가상 클래스와 가상 요소(2) - 요소 상태에 따른 가상 클래스 1 ○ :target - 앵커 대상에 스타일 적용 앵커(anchor)는 같은 문서 내에서, 다른 위치로 이동할 때 사용하는 요소입니다. 를 사용할 때 외부 링크 이동을 위해 URL을 요소 속성 값으로 입력하게 되는데, 여기에 속성 값으로 특정 id를 '#news' 같은 형태로 작성하게 되면 이 링크를 클릭했을 때 한 번에 해당 영역으로 이동하게 됩니다. 이제 스타일 태그나 CSS에서, 특정 id에 ':target' 가상 클래스를 추가하여 스타일을 선언한다면, 해당 앵커 영역으로 이동을 진행하게 되는 대상 id 영역에 스타일을 적용하게 됩니다. 예제를 통해서 살펴보도록 하겠습니다. 회사 소개 서비스 소개 결제 및 환불 문의하기 회사 소개 Excepteur do est eiusmod nulla et veniam..
[CSS] 7. 가상 클래스와 가상 요소(1) - 가상 클래스 정의 앞선 아티클에서 우리는 고급 선택자를 통해 세부적인 조건을 지정하여 요소를 선택해 스타일을 적용하는 방법에 대해서 알아보았습니다. 하지만 첫 번째 글자만 선택한다거나 특정 리스트의 두 번째 항목만 선택한다든지의 세부적인 요소 지정은 어려운 상태입니다. 이럴 때 가상 클래스, 또는 가상 요소를 사용하게 됩니다. ○ 가상 클래스 : 사용자의 동작에 따라 반응 가상 클래스는, 유저가 특정 요소를 클릭하거나 마우스 포인터를 올리는 등의 동작을 할 때와 같이 상태 변경 시에 어떤 스타일을 바꿀 때 사용하게 됩니다. 대표적인 가상 클래스 선택자를 요약하면 아래와 같습니다. 1) :link - 방문하지 않은 링크 일반적으로 웹 문서에서 한 번도 방문하지 않은 링크는 파란색 글자 + 밑줄로 표시되는 것을 경험해 보셨을..
[CSS] 6. 고급 선택자(2) - 속성 선택자 3 ○ [속성 $= 속성값] - 특정 속성 값으로 끝나는 요소를 선택한다 앞서서 살펴본 [속성 ^= 값]은 특정 값으로 '시작'하는 요소를 선택했습니다. 그렇다면 이와 반대로, 특정 값으로 '끝나는' 요소를 선택하는 것도 가능합니다. 끝나는 요소의 값으로 지정하는 경우가 과연 있을까요? 잘 생각해 보면, 의외로 자주 사용할 수 있습니다. 바로 어떠한 파일을 링크로 걸었을 때죠. 특정 첨부 파일을 링크로 제공하게 된다면, 필연적으로 해당 파일의 확장자를 작성하게 됩니다. 이 요소의 끝나는 값은 대부분 파일 확장자입니다. $= 속성 선택자를 사용한다면 이처럼 파일 확장자를 기준으로 구분해 특정 요소를 선택할 수 있게 되는 것입니다. 만일 링크를 제공하게 될 경우, 태그의 href 속성 값을 제공하게 됩니다. 이..
[CSS] 6. 고급 선택자(2) - 속성 선택자 2 ○ [속성 |= 속성값] - 특정 속성 값이 포함된 속성 요소를 선택한다 [속성 |= 속성값]은 역시 [속성 ~= 속성값] 선택자와 마찬가지로 특정 '속성값'을 가진 요소를 선택하는 선택자 유형입니다. 그럼 '~=' 과 차이점은 무엇일까요? '~= 속성값'의 경우, 정확하게 해당 '속성값'을 가진 요소를 선택합니다. 하지만 '|= 속성값'의 경우에는 정확하게 속성값이 '속성값'이거나, '속성값-' 즉 하이픈으로 연결되는 속성까지 포함해서 선택하게 됩니다. 여기서 가장 큰 차이점이 생기게 됩니다. 예를 들어 아래의 선택자 작성 형태를 보겠습니다. a[title |= us] { // .... } 위의 선택자에서는 태그 요소의 'title' 속성값이 "us"인 경우, 그리고 "us-"로 시작하는 경우를 의미하..

티스토리툴바