[기본 개념] 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

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

[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리

[정리] 2 | 박스 모델, 테두리, 여백, 레이아웃, 위치 지정 속성 정리박스 모델 속성종류설명width박스 모델의 너비를 지정height박스 모델의 높이를 지정box-sizing박스 모델의 크기를 계산하는 기준을 지정box-shadow박스 모델에 그림자 효과 추가테두리 속성종류설명border-style상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정border-위치-styletop, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 스타일만 지정border-width상하좌우 4개 방향의 테두리 두께를 한꺼번에 지정border-위치-widthtop, rigth, bottom, left 중에서 선택해서 특정 위치의 테두리 두께만 지정border-color상하좌우 4개 방향의 테두리..

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

[기본 개념] 2 | (2.2) 여백 조절, 레이아웃, 위치 지정

[기본 개념] 2 | (2.2) 여백 조절, 레이아웃, 위치 지정1 CSS와 박스 모델2 테두리 스타일 지정하기3> 여백을 조절하는 속성4> 웹 문서의 레이아웃 만들기5> 웹 요소의 위치 지정하기3 여백을 조절하는 속성 요소 주변의 여백을 설정하는 margin 속성 기본형margin :  | | auto 종류설명예시너비값이나 높이값을 px나 em같은 단위와 함께 수치로 지정margin: 50px ;박스 모델을 포함한 부모요소를 기준으로 너비값이나 높이값을 퍼센트로 지정margin: 0.1% ;autodisplay 속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정   주변 여백을 의미하는 마진은 요소와 요소 사이의 간격을 조절할 수 있다.  4개 방향에 한 번에 똑같이 지정할 수도 있고, 하이픈(-)..

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

[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일

[기본 개념] 2 | CSS 박스 모델 - (2.1) 박스 모델, 테두리 스타일1> CSS와 박스 모델2> 테두리 스타일 지정하기3 여백을 조절하는 속성4 웹 문서의 레이아웃 만들기5 웹 요소의 위치 지정하기1 CSS와 박스 모델블록 레벨 요소와 인라인 레벨 요소  박스 모델은 블록 레벨 요소인지 인라인 레벨 요소인지 따라 나열 방법이 달라진다. 블록 레벨 요소  태그를 사용해 요소 삽입 시, 혼자 한 줄 차지 ex) , , 등인라인 레벨 요소  태그를 사용해 요소 삽입 시, 콘텐츠 영역만큼만 차지 ex) , , 등 박스 모델의 기본 구성  콘텐츠 영역의 크기를 지정하는 width, height 속성 종류설명너비나 높이의 값을 px나 em 단위로 지정박스 모델을 포함하는 부모 요소를 기준으로 너비값이..

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