EverGiver

반응형 웹 디자인이란 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현한다. 모바일 기기를 위한 뷰포트 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역 뷰포트 지정하기 뷰포트는 태그를 이용해 태그 사이에 작성한다. ​​ ​ width=device-width - 웹 페이지의 크기가 모니터가 스마트폰의 실제 액정 크기를 따라가도록 한다. initial-scale=1 - 보이는 화면의 zoom up 정도를 1배율로 한다는 것이다. ▷이 값을 키우면 보여지는 화면이 좀 더 크게 보인다. ▷ 스마트폰에서 작은 사진을 두 손가락을 이용해 확대시키는 것과 비슷하다. (스마트폰에서만 효과가 있다) maximum-scale - 확대할 수 있는 최대 비율 minimum-scale ..

사용자 동작에 반응하는 가상 클래스 - 사용자가 웹 요소를 클릭하거나 마우스 포인터를 올려놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶다면 가상 클래스 선택자를 사용한다. 방문하지 않은 링크에 스타일을 적용하는 ':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의 줄임말로 앞에서부터 빨간색, 초록색, 파란색이 들어 있는 값을 나타낸다. ..