[정리] 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

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리

[정리] 3 | 배경 이미지, 선형 그라데이션, 원형 그라데이션 정리배경 이미지 속성종류설명background-color배경색을 지정background-clip배경색이나 이미지를 어디까지 적용할지 지정background-image배경 이미지를 지정background-repeat배경 이미지의 반복 방법을 지정background-position배경 이미지를  배치할 기준을 지정background-attachment배경 이미지를 문서에 고정background하나의 속성으로 배경 스타일을 한꺼번에 지정background-size배경 이미지의 크기 조절선형 그라데이션 속성종류설명방향끝 지점을 기준으로 to 예약어 2개까지 사용 가능 (left, rignt, top, bottom)각도그라데이션이 끝나는 각도 지정 ..

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

[기본 개념] 3 | (3.2) 그라데이션

[기본 개념] 3 | (3.2) 그라데이션1 배경색과 배경 범위 지정하기2 배경 이미지 지정하기3> 그라데이션 효과로 배경 꾸미기3 그라데이션 효과로 배경 꾸미기선형 그라데이션 기본형linear-gradient (to 또는 , , [,  ...]) ; 방향 수평방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용하여 끝 지점을 기준으로 to 예약어와 함께 사용한다.  (ex.  방향을 사용해 선형 그라데이션 만들기) ... .grad { background : blue; // 지원하지 않는 웹 브라우저용 background : linear-gradient(to right bottom, blue, white); // 왼쪽 위에서 오른쪽 아래 방향으로..

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

[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지

[기본 개념] 3 | (3.1) 배경색, 배경 범위, 배경 이미지1> 배경색과 배경 범위 지정하기2> 배경 이미지 지정하기3 그라데이션 효과로 배경 꾸미기1 배경색과 배경 범위 지정하기배경색을 지정하는 background-color 속성  배경색을 지정하려면 background-color 속성을 사용한다.  글꼴이나 글자 크기 등은 태그 선택자에서 지정하면 문서 전체에 상속되었지만 background-color값은 상속되지 않는다. 배경색의 적용 범위를 조절하는 background-clip 속성  박스 모델의 가장 외곽인 테두리까지 적용할지, 패딩 범위까지 적용할지, 내용 부분에만 적용할지 선택하려면 background-clip 속성을 사용한다. 종류설명border-box가장 외곽인 테두리까지 적용 (..

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