EverGiver

사용자 동작에 반응하는 가상 클래스 - 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. 방문하지 않은 링크에 스타일을 적용하는 ':link 가상 클래스 선택자' - 사용자가 아직 방문하지 않은 링크에 스타일을 적용 - 텍스트 링크는 기본적으로 파란색 글자와 밑줄로 표시한다. - 링크의 밑줄을 없애거나 색상을 바꾸려면 :link 선택자를 사용한다. 방문한 링크에 스타일을 적용하는 ':visited 가성 클래스 선택자' - 한 번 이상 방문한 링크에 스타일을 적용 - 한 번 이상 방문한 텍스트 링크는 보라색이 기본값이다. - 이때 사용자가 방문한 텍스트 링크와 색상이 달라지지 않게 하게 하려면 :visited 선택..

특정 속성이 있는 요소를 선택하는 [속성] 선택자 [속성] 선택자를 이용하여 원하는 요소를 선택할 수도 있다. [ ] 사이에 원하는 속성을 입력하면 된다. a[href] { ..... } 특정 속성 값이 있는 요소를 선택하는 [속성=속성 값] 선택자 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용한다. [ ] 안에 속성값을 넣고 그 사이에 '=' 기호를 표시한다. a[target = _blank] { ..... } 여러 값 중에서 특정 속성 값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자 해당 속성값이 포함된 요소를 선택한다. 속성이 하나면서 속성 값이 여러 개일 떼 특정 속성 값을 찾는 데 편리하다. [class ~= button] { ..... }# class값 중에 bu..

하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소라고 한다. - 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 하며, 그 자식 요소의 한 단계 아래는 손자 요소하고 한다. 하위 선택자 (descendant selector) - 부모 요소에 포함된 하위 요소를 모두 선택하며 자손 선택자라고도 한다. (자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.) - 하위 선택자는 상위 요소와 하위 요소를 공백으로 구분한다. 상위요소 하위요소​ 자식 선택자 (child selector) - 자식 요소에만 스타일을 적용하는 선택자 - 두 요소 사이에 '>' 기호를 표시해 부모 요소와 자식 요소를 구분한다..

선형 그러데이션 선형 그러데이션이란 섹상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다. linear-gradient(to 또는 , , [, ...]); 방향 - 끝 지점을 기준으로 to 예약어와 함께 사용한다. - to 다음에는 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다. - 이때 예약어는 수평 방향을 나타내는 left와 right, 수직 방향을 나타내는 top과 bottom을 사용한다. - 위치나 각도 옵션을 생략하면 to bottom으로 인식한다. 각도 - 선형 그러데이션에서 색상이 바뀌는 방향을 알려 주는 방법이다. - 각도는 그러데이션이 끝나는 부분이고 값은 deg로 표기한다. - 각도 맨 윗부분이 0deg이고, 시계방향으로 회전하면서 90deg, 180deg가 된..

글자색을 지정하는 color 속성 color : 16진수로 표현하는 방법 - #RRGGBB로 표시 - 만약 색상값이 #0000ff처럼 두 자리씩 중복될 경우 #00f로 줄여서 표기할 수도 있다. hsl과 hsla로 표현하는 방법 - hsl ▷ hue(색상), saturation(채도), lightness(명도)의 줄임말이다. - hsla ▷ hue(색상), saturation(채도), lightness(명도), alpha(불투명도)의 줄임말이다. 색상을 영문명으로 표현하는 방법 - red, yellow, black처럼 잘 알려진 색상 이름을 사용한다. rgb와 rgba로 표현하는 방법 - rgb ▷ red, green, blue의 줄임말로 앞에서부터 빨간색, 초록색, 파란색이 들어 있는 값을 나타낸다. ..

글꼴을 지정하는 font-family 속성 font-family: ¦ [, ] cf) 기본형 기호 이해하기 1. ¦ 는 나열한 옵션 중 하나가 값이 되어야 한다는 의미 font-size: 값1 ¦ 값2 ¦ 값3 2. 속성 값을 나열할 때 키워드는 그대로 나열한다. font-variant: normal ¦ small-caps 3. 속성값을 나열할 때 값이 아니라 유형이라면 로 묶는다. 이때 다른 속성을 유형처럼 사용할 수 있다. font-size: ¦ ¦ ¦ font: 글자 크기를 지정하는 font-size 속성 font-size: ¦ ¦ ¦ 1. 절대 크기 : 브라우저에서 지정한 글자 크기 2. 상대 크기 : 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기를 지정 3. 크기 : 브라우저와 상관..