CSS10 Canvas Canvas - 태그와 JavaScript를 사용하면 다양한 그래픽 요소를 만들 수 있음 1. 시작하기 - 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성 → 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋음 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다. - 자바스크립트를 사용해서 엘리먼트를 선택 const canvas = document.querySelector("#canvas"); - 너비와 높이를 설정해 주어야 함 → 크기를 설정하지 않으면 기본적으로 300 픽셀 * 150 픽셀의 사이즈로 생성 - 설정 방법 1 : 태그 속성으로 설정. 다만, 이 방법은 어떤 단위로 속성값을 설정해 주든 픽셀로만 인식 // 500픽셀 * 500픽셀로 설정됩.. 2023. 1. 17. CSS 애니메이션 CSS 애니메이션 - 여러 개의 CSS 스타일을 부드럽게 전환 시켜줌 - 그 중에서도 @keyframes 키워드를 활용하면 시간 순서대로 정밀하게 짤 수 있음 1. @keyframes - 키프레임을 할용하기 위해서는 우선 CSS로 키프레임 블록을 만든다 /* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */ @keyframes 애니메이션이름 { 0% { /* from 이라고 작성해도 됩니다.*/ CSS속성 : 속성값; } 50% { /* 애니메이션 진행도에 따른 스타일을 설정합니다. */ /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/ CSS속성 : 속성값; } 100% { /* to 라고 작성해도 됩니다.*/ CSS속성 : 속성값; } } - 해당 키 프레임 애.. 2023. 1. 17. 미디어 쿼리 미디어 쿼리 - 반응형 웹 디자인의 핵심 부분 - 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있음 미디어 쿼리 적용법 - 1 태그 안에 삽입 → media 속성을 통해 조건을 지정 + 조건에 만족할 때만 해당 CSS 파일을 불러옴 - 2 태그 안에 - 3 CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성 미디어 쿼리 구문 @media 미디어 타입 (조건(너비 및 높이)){ (CSS 입력하는 부분) } /* 예제 */ @media screen (max-width: 400px) { body { color: red; } } ▶ 미디어 쿼리의 기본적인 구조 - 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줌 - 조건(너비 및 높이) : 지정한 창이나 너비의 높이를 기.. 2023. 1. 16. 가상 클래스와 가상 요소 a. 가상 클래스 1. 사용자의 동작에 반응하는 가상 클레스 · :link : 웹 문서의 링크 중 사용자가 아직 방문 하지 않은 링크에 스타일 적용 · :visited : 웹 문서의 링크에서 한 번 이상 방문한 링크에 스타일 적용 · :hover : 웹 요소 위에 마우스 포인터를 올려 놓을 때 스타일 적용 · :active : 웹 요소의 링크나 이미지 등을 활성화 했을 때, 즉 클릭했을 때 스타일 지정 · :focus : 웹 요소에 초첨을 맞추엇을 때(텍스트 필드에 마우스 포인터를 올려놓거나, 커서 이동을 했을 때 등.) 스타일 적용 2. 요소 상태에 따른 가상 클래스 · :target : · :not : [ ] 괄호 안에 있는 요소를 제외한 이라는 의미. 해당 요소를 제외하여 선택 · :checked .. 2022. 10. 27. 속성 선택자 a. 속성 선택자 : 태그 안에서 사용하는 속성값에 따라 요소를 선택하는 것. 1. [속성] 선택자 : HTML 태그를 작성할 사용한 속성값에 따라 원하는 요소 선택 2. [속성="속성값"] 선택자 : 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일 지정 /**인 요소 지정/ a [target="_blank"] { ... } 3. [속성 ~= "속성값"] 선택자 : 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택 - 속성이 하나면서 속성값이 여러 개일 때 특정 속성을 찾는데 용이 4. [속성 |= "속성값"] 선택자 : 특정 속성값이 포함된 속성에 스타일 적용 - 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어도 선택 - [속성 ~= "속성값"] 선택자는 하이픈.. 2022. 10. 27. 연결 선택자 a, 연결 선택자 : 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지를 지정. 1. 자손 선택자와 자식 선택자 : 특정 요소를 기준으로 하여 그 안에 포함된 요소를 자손 요소라고 함. 그리고 현재 요소를 기준으로 한 단계 아래는 자식 요소, 그 작식의 한 단계 아래는 손자 요소라고 함. 1) 자손 선택자 : descendant selector. 부모 요소에 포함된 하위 요소를 모두 선택. - 자식 요소뿐 아니라 손자 요소, 손자의 손자 요소 등 하위 요소까지 적용 - 상위 요소와 하위 요소를 공백으로 구분 2) 자식 선택자 : child selector. 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자 - 자식 선택자에서는 바로 한 단계 아래 요소, 즉 자식 선택자에만 스타.. 2022. 10. 27. 이전 1 2 다음
