셀렉터4 [CSS] 셀렉터 3 - 속성 셀렉터 이번 포스트에서는 태그 내부의 속성에 따라서 스타일을 다르게 적용할 수 있는 속성 셀렉터들에 대해서 다루겠습니다. 같은 태그라도 속성에 따라 다른 스타일을 적용할 수 있기 때문에 더 다채로운 구성이 가능해집니다. 1. 속성 셀렉터의 기본 속성 셀렉터는 기본적으로 다음과 같은 형태를 띕니다. 셀렉터[속성] { 속성: 속성 값; } [ ]사이에 원하는 속성을 지정하여 효과를 주게 됩니다. 셀렉터를 지정하지 않았을 경우 문서 내의 모든 요소에서 해당 속성을 가진 요소에 스타일이 적용됩니다. 아래 예제는 a태그에 href속성이 존재하면 붉은 글씨로 나타나게 스타일을 적용시킨 모습입니다. 이와같이 href속성이 없을 경우에는 스타일이 지정되지 않아 속성에 따라 다른 스타일을 적용할 수 있음을 보여줍니다. 2. 속.. 2020. 9. 27. [CSS] 셀렉터 2 - 연결 셀렉터 지난 포스트에서 대표적으로 쓰이는 5가지 셀렉터를 알아보았다면 이번 포스트에서는 여러 요소들을 연결해주는 연결 셀렉터에 대해서 알아보겠습니다. 1. 하위 셀렉터 (자손 셀렉터, Descendant Selector) 처음 배울때는 자손 셀렉터로 배웠었는데, 인터넷을 찾아보니 하위 셀렉터라는 이름을 가지는 것이 더 좋다고 판단되어서 하위 셀렉터로 기술하겠습니다. (양질의 검색결과 + 후에 나올 자식 셀렉터와의 혼용 방지) 하위 셀렉터는 상위 요소의 스타일이 하위 요소에 모두 적용되는 셀렉터입니다. 상위 요소를 먼저써주고 하위 요소를 써주는데 이 둘은 공백으로 구분합니다. 하위 셀렉터는 상위 요소내에 포함된 특정 하위 요소들에 전부 스타일이 적용되며, 이는 하위의 하위 즉 자손 요소 까지도 적용이 됩니다. 아.. 2020. 9. 26. [CSS] 셀렉터 1 "셀렉터" 셀렉터란, CSS에서 스타일을 적용할 요소를 선택할 수 있게 해주는 요소 입니다. 셀렉터는 스타일의 적용 상황이 모두 다르듯 그 종류가 굉장히 방대합니다. 이번 포스트에서는 자주 쓰이는 셀렉터 몇가지를 소개하겠습니다. 1. 전체 셀렉터 이름이 말해주듯 모든 요소에 스타일을 적용하는 셀렉터입니다. 사용법은 간단하게 '*'를 사용합니다. * { 속성: 속성 값; } 2. 태그 셀렉터 태그 셀렉터는 특정 태그를 선택하여 그 태그에 스타일을 적용합니다. '태그명'을 통해 적용시킵니다. 태그명 { 속성: 속성 값; } 3. 클래스 셀렉터 클래스 셀렉터는 일부분에만 다른 스타일을 적용하는 경우에 사용합니다. 클래스를 사용하기 위해서는 태그 안에 클래스명을 명시하고 css에서 반드시 .(점)을 통해 지정해.. 2020. 9. 25. [CSS] CSS 지난 포스트로 html의 대표적으로 많이 사용되는 태그들을 알아보았었습니다. html과 짝꿍을 이루며 등장하는 css를 이번포스트부터 다뤄보려고 합니다. html이 웹에서 기본 구조를 담당하고 있다면 css는 웹의 디자인적 요소들을 담당하고 있습니다. CSS(Cascading Style Sheet)는 디자인적 요소를 html에서 분리시켜 주는 역할을 합니다. html과 스타일요소가 함께 쓰인다면 html문서는 굉장히 난잡하고 관리하기 어려워집니다. 그래서 css를 통해 스타일을 따로 관리하게 됩니다. 스타일을 따로 관리한다면, 기능적 요소를 수정할때는 html문서만 수정할 수 있는 장점이 있습니다. 반대로 스타일요소는 css파일로 따로 관리하기 때문에 같은 html문서라도 css설정에 따라서 다른 디자인.. 2020. 9. 9. 이전 1 다음 300x250
