[기본 개념] 5 | (5.1) 변형

[기본 개념] 5 | (5.1) 변형1> 변형2 트렌지션3 애니메이션1 변형transform과 변형함수 기본형transform : 함수  변형을 적용하려면 transform 속성과 변형함수 이름을 함께 작성해야 한다. 2차원 변형함수종류설명translate(tx, ty)지정한 크기만큼 x축, y축으로 이동translateX(tx)지정한 크기만큼 x축으로 이동translateY(ty)지정한 크기만큼 y축으로 이동scale(sx, sy)지정한 크기만큼 x축과 y축으로 확대, 축소scaleX(sx)지정한 크기만큼 x축으로 확대, 축소scaleY(sy)지정한 크기만큼 y축으로 확대, 축소rotate(각도)지정한 각도만큼 회전skew(ax, ay)지정한 각도만큼 x축과 y축으로 왜곡skewX(ax)지정한 각도만큼..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 11.
• textsms

11. 구조 가상 클래스와 가상 클래스를 사용한 문제

11. 구조 가상 클래스와 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요. 1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.2. 메뉴6의 테두리를 없애고 나면 메뉴 전체 너비가 길어진다. 메뉴 전체 너비를 610px에서 605px로 줄인다.3. 메뉴6을 제외한 나머지 항목의 링크 위로 마우스 포인터를 올리면 배경색을 #555로, 글자색은 #fff로 바뀐다.4. 마지막 메뉴6의 링크 위로 마우스 포인터를 올리면 배경색은 #b30000로, 글자색은 #fff로 바꾼다.  메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 결과 화면A. 해설1. 메뉴6의 오른쪽에 있는 테두리를 없앤다.--> 구조 가상 클래스 ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 4.
• textsms

10. 구조 가상 클래스를 사용한 문제

10. 구조 가상 클래스를 사용한 문제다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다.  결과 화면A. 해설1. 구조 가상 클래스를 사용하여 첫 번째 이미지의 스타일을 테두리 색상은 빨강(#f00)으로, 두께는 2px로 지정한다.--> img 요소중 가장 첫 번째 이미지를 선택해야 하므로 A:first-of-type 클래스를 사용하여 지정한다.         출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 7. 4.
• textsms

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리

[정리] 4 | 연결과 속성 선택자, 가상과 구조 가상 클래스, 가상 요소 정리연결 선택자종류형식설명하위 선택자상위요소 하위요소상위요소에 포함된 모든 하위요소를 선택자식 선택자부모요소 > 자식요소부모요소에 포함된 자식요소만 선택인접 형제 선택자요소1 + 요소2요소1 이후 맨 먼저 오는 형제요소 선택형제 선택자요소1 ~ 요소2요소1과 형제인 모든 요소 선택속성 선택자종류선택요소예시[속성]해당 속성이 있는 요소[required][속성 = 값]지정한 속성값이 있는 요소[target = _blank][속성 ~= 값]지정한 속성값이 포함된 요소 (단어별)[class ~= button][속성 != 값]지정한 속성값이 포함된 요소 (하이픈 포함, 단어별)[title != us][속성 ^= 값]지정한 속성값으로 시작하..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 7. 4.
• textsms

[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소

[기본 개념] 4 | (4.2) 가상 클래스와 가상 요소1 연결 선택자2 속성 선택자3> 가상 클래스와 가상 요소3 가상 클래스와 가상 요소사용자 동작에 반응하는 가상 클래스  사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바꾸도록 만들고 싶을 때 가상 클래스 선택자를 사용한다. 1 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자' 웹 문서의 링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다. 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시된다. 이때 링크의 밑줄을 없애거나 색상을 바꿀 때 :link 선택자를 사용한다. 2 방문한 링크에 스타일을 적용하는 ':visited 가상 클래스 선택자' 웹 문서의 링크 중에서 한 ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 6. 28.
• textsms

[기본 개념] 4 | (4.1) 연결, 속성 선택자

[기본 개념] 4 | 고급 선택자 - (4.1) 연결, 속성 선택자1> 연결 선택자2> 속성 선택자3 가상 클래스와 가상 요소1 연결 선택자하위 요소에 스타일을 적용하는 하위 선택자 기본형상위요소 하위요소  부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. 상위 요소와 하위 요소를 공백으로 구분한다. (ex. 하위 선택자를 사용하여 글자색 적용하기) ... section p { color : blue; } // section 요소의 모든 하위 p 요소를 파란색 글자로 지정... 예약 방법 & 사용 요금 아직 온라인 예약 신청이 ... // section 요소의 모든 하위(자식, 손자) p 요소에 적용 가족실 // section 요소의 모든 하위(자식, 손자) ..

• format_list_bulleted 💠프로그래밍 언어/CSS
• · 2022. 6. 24.
• textsms

09. 배경 이미지 속성을 사용한 문제 II

09. 배경 이미지 속성을 사용한 문제 II다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 문서 전체의 배경색을 #02233b로 지정한다.2. #container 의 배경색은 흰색으로 지정한다.3. #container 의 배경 이미지는 images\mic.png로 지정하는데, 배경 이미지는 반복하지 않고 오른쪽 아래에 고정한다.4. 태그를 사용한 제목의 배경색을 #004344로 지정하고, 글자색은 흰색으로 바꾼다.  대학언론사 수습기자 모집 신입생 여러분을 기다립니다 모집분야 아나운서(0명) : 학내 소식을 라디오 방송으로 보도 오프닝쇼프로듀서(0명) : 라디오 방송 기획,..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 27.
• textsms

08. 배경 이미지 속성을 사용한 문제 I

08. 배경 이미지 속성을 사용한 문제 I다음 결과 화면을 참고하여 조건에 맞게 웹 문서를 작성하세요.(문서 안에 이미지 파일이 있다고 가정한다.) 1. 배경색은 회색이다.2. 배경이미지는 웹 브라우저의 아래에서 가로로 가득 차게 반복, 고정되어 있다.  웹 디자인 트렌드를 따라잡는 비법 대공개! 그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. 결과 화면A. 해설1. 배경색은 회색이다.--> body 스타일에 color 속성으로 글씨를 흰색으로 바꾼다.2. 배경이미지는 웹 브라우저의 아래에서 ..

• format_list_bulleted 💠문제 풀이/CSS 문제 풀이
• · 2022. 5. 27.
• textsms