지금까지 CSS의 선택자에 대해 알아보았습니다. 이제 선택한 요소들을 디자인하기 위해 각종 주요 속성과 그 속성이 가지는 속성값에 대해 알아보겠습니다. 이번 포스팅에서는 글자속성에 대해 알아보겠습니다. 색상 CSS이 글자 생상은 색상 모델에 따라, 진법에 따라, 알파값 표현 여부에 따라 다양한 방법을 지원합니다. 이중에서 빨강, 초록 파랑 각 색상 요소의 강도를 두 자리의 16진수로 표기하는 #RRGGBB 방식이 웹 표준방식으로 가장 흔히 사용되고 있습니다. 이때 '#'가 없으면 색상 값으로 인정이 안되므로 주의해야 합니다! 출처 : w3cschools #RRGGBB 방식으로 표현할 때 참고하면 좋은 자료입니다. 위의 사진외에도 많은 색상들을 지원해주고 있습니다. 평소에 우리가 #RRGGBB으로 어떤 색..
저번에 기본선택자에 이어서 계층선택자와 가상선택자를 공부하도록 하겠습니다 (*ㅁ*) 앞서 말씀드렸다시피 웹페이지의 디자인을 의도한대로 나타나게 하기 위해서는 알맞는 선택자를 쓰는 것이 중요합니다. 계층선택자 및 가상선택자는 특정 조건을 만족하는 정확한 태그를 찾도록 도와줄 것입니다. 계층선택자 HTML 문서는 태그끼리 트리형태의 계층구조를 띕니다. 부모 태그 아래에 여러 자식 태그가 있고 그 자식 아래에 손자가 있는.... 계층선택자는 이런 복잡한 계층 구조 속에서 원하는 태그를 찾는 방법입니다. 계층선택자에서는 자식선택자와 형제선택자로 나눌 수 있습니다. 먼저 자식선택자는 태그 아래에 직계 자식만을 선택합니다. 부모태그 > 자식태그 {...} 와 같은 형태로 '
앞서 CSS 세가지 요소에 대해 말했습니다. S (Selector, 선택자) P (Property, 속성) V (Value, 속성값) 이 있고 문법은 S {P : V;} 와 같이 사용할 수 있습니다. 이렇게 CSS 문법을 적용할 때 스타일 적용 대상을 명확히 해야 의도한대로 웹 페이지의 스타일이 적용될 수 있습니다. 따라서 스타일을 적용할 대상을 지정하는 선택자는 매우 중요한 요소라고 생각합니다. ★★★★★ (별이 다섯개!) 이번 포스팅에서는 선택자 중에서 기본이 되는 선택자들을 살펴보겠습니다. Tag 선택자 선택자 중 가장 많이 사용하는 선택자가 바로 Tag 선택자입니다. 적용할 태그 이름 { 속성1 : 속성값; ...}과 같은 방식으로 사용할 수 있습니다. 이전 포스팅에서 태그에 적용한 방법이 태그 ..
CSS로 스타일을 적용하기 위해서는 CSS의 문법을 사용해줘야 합니다. CSS의 문법은 SPV를 기억해주면 됩니다 바로 S(Selector, 선택자) P(Property, 속성) V(Value, 속성값)입니다. 적용하고자 하는 태그(또는 id, class)를 선택자라고 하고 CSS에서 제공하는 디자인 관련 속성을 속성, 그 속성에 맞는 값을 속성값이라고 합니다. 위 사진을 예로 들면 HTML 문서의 p 태그를 선택자로 설정하였습니다. 그리고 중괄호 안에 background-color라는 배경색을 주는 속성과 color라는 글자색을 주는 속성을 이용하였습니다. 각각 값은 black, white로 배경은 검은색, 글자색은 하얀색으로 주고자 했습니다. Hello World! 참고 : 위 스타일을 적용할 htm..
