지금까지 CSS의 선택자에 대해 알아보았습니다. 이제 선택한 요소들을 디자인하기 위해 각종 주요 속성과 그 속성이 가지는 속성값에 대해 알아보겠습니다. 이번 포스팅에서는 글자속성에 대해 알아보겠습니다. 색상 CSS이 글자 생상은 색상 모델에 따라, 진법에 따라, 알파값 표현 여부에 따라 다양한 방법을 지원합니다. 이중에서 빨강, 초록 파랑 각 색상 요소의 강도를 두 자리의 16진수로 표기하는 #RRGGBB 방식이 웹 표준방식으로 가장 흔히 사용되고 있습니다. 이때 '#'가 없으면 색상 값으로 인정이 안되므로 주의해야 합니다! 출처 : w3cschools #RRGGBB 방식으로 표현할 때 참고하면 좋은 자료입니다. 위의 사진외에도 많은 색상들을 지원해주고 있습니다. 평소에 우리가 #RRGGBB으로 어떤 색..
저번에 기본선택자에 이어서 계층선택자와 가상선택자를 공부하도록 하겠습니다 (*ㅁ*) 앞서 말씀드렸다시피 웹페이지의 디자인을 의도한대로 나타나게 하기 위해서는 알맞는 선택자를 쓰는 것이 중요합니다. 계층선택자 및 가상선택자는 특정 조건을 만족하는 정확한 태그를 찾도록 도와줄 것입니다. 계층선택자 HTML 문서는 태그끼리 트리형태의 계층구조를 띕니다. 부모 태그 아래에 여러 자식 태그가 있고 그 자식 아래에 손자가 있는.... 계층선택자는 이런 복잡한 계층 구조 속에서 원하는 태그를 찾는 방법입니다. 계층선택자에서는 자식선택자와 형제선택자로 나눌 수 있습니다. 먼저 자식선택자는 태그 아래에 직계 자식만을 선택합니다. 부모태그 > 자식태그 {...} 와 같은 형태로 '
앞서 CSS 세가지 요소에 대해 말했습니다. S (Selector, 선택자) P (Property, 속성) V (Value, 속성값) 이 있고 문법은 S {P : V;} 와 같이 사용할 수 있습니다. 이렇게 CSS 문법을 적용할 때 스타일 적용 대상을 명확히 해야 의도한대로 웹 페이지의 스타일이 적용될 수 있습니다. 따라서 스타일을 적용할 대상을 지정하는 선택자는 매우 중요한 요소라고 생각합니다. ★★★★★ (별이 다섯개!) 이번 포스팅에서는 선택자 중에서 기본이 되는 선택자들을 살펴보겠습니다. Tag 선택자 선택자 중 가장 많이 사용하는 선택자가 바로 Tag 선택자입니다. 적용할 태그 이름 { 속성1 : 속성값; ...}과 같은 방식으로 사용할 수 있습니다. 이전 포스팅에서 태그에 적용한 방법이 태그 ..
웹언어에서 HTML의 단짝이라고 생각하는 언어가 바로 CSS입니다. CSS는 정보를 표현하는 HTML에 화장을 해주는 언어입니다. 한마디로 디자인을 담당하는 언어가 바로 CSS가 되는 것이죠. CSS는 HTML문서의 배경, 글자 등의 디자인 뿐만 아니라 HTML Element의 배치까지도 변화시킬 수 있는 언어입니다. CSS가 어떻게 탄생하게 되었는지는 w3schools에 나와있습니다. 출처 : https://www.w3schools.com/css/css_intro.asp / 왜 CSS가 사용되는지와 CSS의 탄생 동기에 대해 설명하고 있습니다. HTML은 태그를 통해 각각의 Element를 표현합니다. 그 표현하는 태그들도 다양한데 HTML 3.2 시절에 폰트, 색상 관련 속성이 도입되었지만 모든 태그..
