[CSS] CSS 선택자 :hover 에 대하여 알아보기

2021-04-20 :hover 선택자는 유저의 커서(마우스 포인터)가 요소 해당 선택자 위에 올라가 있으면 선택됩니다. - 예제 코드 Hello world ​ 예제 코드는 일반적인 버튼을 만들어 둔뒤 :hover로 추가 정의를 해주었다. 이후 결과를 확인하면 해당 버튼에 마우스 커서가 없을시에는 일반적인 버튼이었다가 마우스커서를 해당 버튼에 위치시키면 css로 부여해준 배경색 속성이 부여되게 된다. 메인 이미지 출처: Photo by Jakob Owens on Unsplash

• format_list_bulleted WEB/CSS
• · 2021. 4. 20.
• textsms

[CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after

2021-04-16 가상 선택자는 말 그대로 가상의 요소를 추가 선택한다고 이해할 수도 있는데, 해당 표현만으로는 가상 선택자를 표현하기가 어렵다. 떄문에 오늘은 구체적인 예를 들어 가며 가상 선택자 중 ::before / ::after 이 두 가지를 알아보도록 하자. - ::before ::before는 단독으로 사용되는 것이 아닌 다른 선택자 뒤에 붙어 사용하게 된다. 해당 가상 선택자 ::before의 역할은 요소의 내용 앞에 일부 내용을 삽입하는 데 사용할 수 있다. 아래의 예제를 보자. Hello World1 ​ ::before에 들어갈 가상의 내용은 content라는 속성에 값을 넣어주면된다. 예제에서는 특수문자 별을 넣어두었으며, 추가적인 css 속성들을 부여해주었다. 결과를 확인하면 아래와..

• format_list_bulleted WEB/CSS
• · 2021. 4. 16.
• textsms

[CSS] CSS Attribute Selectors(속성 선택자) 알아보기

2021-03-28 속성 선택자는 말 그대로 특정 속성 또는 속성 값이 있는 HTML 요소의 스타일 선택하여 지정할 수 있다. 이와 같은 속성 선택자를 사용하는 방법을 알아보자. - a[Target] 속성 선택자는 보통 앞에 태그와 그 뒤에 [ ]가 오게 되며, [ ] 안에 선택하고자 하는 속성을 적어 주면 된다. 예제에서는 div [id="testDiv1"]와 같이 선택하였다. Hello1 Hello2 Hello3 Hello4 위의 코드의 결과로는 아래와 같은 결과로 나타난다. - CSS [attribute~="value"] Selector 속성 선택자는 =기호를 다른 특수 문자와 조합하면 다양한 기능을 가지게 된다. 우선적으로 ~와 결합한 ~=는 지정된 단어를 포함하는 속성 값을 가진 요소를 선택하는..

• format_list_bulleted WEB/CSS
• · 2021. 3. 28.
• textsms

[CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류)

2021-03-23 Combinators 선택자들은 각 선택자들의 관계를 설명하며, 특정한 부호로 이들과의 관계를 규정하며 표현할 수 있다. - descendant selector( " " ) descendant 한국어로 번역하면 자손이라는 의미를 가지고 있다. 때문에 [ 부모선택자 자손 선택자 ]라고 지정 시 해당 부모의 모든 자손이 선택된다. (space 키 즉 하나의 빈공 백문자가 기호로 사용된다.) AAA BBB BBB-1 BBB-2 BBB-3 CCC DDD 위의 예제는 가장 상위 부모태그 outset을 기준으로 하위에 있는 li 태그를 선택하였다. 그 결과 outset이 감싸고 있는 모든 li 태그들이 영향을 받는 것을 확인할 수 있다. - child selector( " > " ) child ..

• format_list_bulleted WEB/CSS
• · 2021. 3. 23.
• textsms