2023/01(14)
-
Web/HTML, CSS
2023.01.09
2
[CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자)
CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
-
Web/HTML, CSS
2023.01.07
3
[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제)
일치 선택자(Basic Combinator) A와 B를 동시에 만족하는 요소를 선택 See the Pen 일치 선택자 by wjdxo513 (@wjdxo513) on CodePen. 일치선택자는 두 가지 조건을 동시에 만족하는 요소에 적용됩니다. 위의 예제에서 li태그에서 green이라는 클래스명으로 지정된 요소들에만 CSS가 적용되는 것을 보실 수 있습니다. 자식 선택자(Child Combinator) A의 자식 요소 B를 선택 자식은 부모 바로 밑에 있는 요소 ‘>'는 자식 선택자의 기호 See the Pen 자식 선택자 by wjdxo513 (@wjdxo513) on CodePen. 자식 선택자는 A > B의 형태로 설정되며 여기서 > 기호는 자식 선택자를 의미합니다. 위의 예제에서는 div의 자식..
-
Web/HTML, CSS
2023.01.04
1
[CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디)
CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..
-
일상/블로그
2023.01.02
32
[블로그] 2022년 블로그 결산 (+Next Level)
안녕하세요. 코딩팩토리입니다. 시간 참 빠르기만 합니다. 이번에도 어김없이 새해가 밝았습니다. 저는 여전히 불안하지만 해가 지날수록 점차 안정적이고 규칙적인 삶을 찾아가고 있다고 생각합니다. 하지만 그렇다 보니 안주하게 되고 도전과 변화에 대한 열정이 식어가고 있다는 사실을 이번 회고에서 뼈저리게 느낍니다. 성장을 멈추는 순간 위기가 찾아온다고 합니다. 2023년에는 잠시 주춤하고 있는 제 삶에 대한 열정을 다시 한번 일으킬 수 있는 한 해가 되었으면 좋겠습니다. 2022년도 블로그 결산 작년 한 해에는 300만 명이 넘는 분들이 제 블로그를 방문해주셨고 페이지뷰는 669만을 기록하였습니다. 사용자와 세션은 작년에 비해 절대적인 수치는 약 10만 명 정도 소폭 늘었지만 페이지뷰 수는 무려 150만 뷰 ..
-
Web/HTML, CSS 2023.01.09 2[CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자) CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
-
Web/HTML, CSS 2023.01.07 3[CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제) 일치 선택자(Basic Combinator) A와 B를 동시에 만족하는 요소를 선택 See the Pen 일치 선택자 by wjdxo513 (@wjdxo513) on CodePen. 일치선택자는 두 가지 조건을 동시에 만족하는 요소에 적용됩니다. 위의 예제에서 li태그에서 green이라는 클래스명으로 지정된 요소들에만 CSS가 적용되는 것을 보실 수 있습니다. 자식 선택자(Child Combinator) A의 자식 요소 B를 선택 자식은 부모 바로 밑에 있는 요소 ‘>'는 자식 선택자의 기호 See the Pen 자식 선택자 by wjdxo513 (@wjdxo513) on CodePen. 자식 선택자는 A > B의 형태로 설정되며 여기서 > 기호는 자식 선택자를 의미합니다. 위의 예제에서는 div의 자식..
-
Web/HTML, CSS 2023.01.04 1[CSS] 선택자(Selector)에 대하여 (전체, 태그, 클래스, 아이디) CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..
-
일상/블로그 2023.01.02 32[블로그] 2022년 블로그 결산 (+Next Level) 안녕하세요. 코딩팩토리입니다. 시간 참 빠르기만 합니다. 이번에도 어김없이 새해가 밝았습니다. 저는 여전히 불안하지만 해가 지날수록 점차 안정적이고 규칙적인 삶을 찾아가고 있다고 생각합니다. 하지만 그렇다 보니 안주하게 되고 도전과 변화에 대한 열정이 식어가고 있다는 사실을 이번 회고에서 뼈저리게 느낍니다. 성장을 멈추는 순간 위기가 찾아온다고 합니다. 2023년에는 잠시 주춤하고 있는 제 삶에 대한 열정을 다시 한번 일으킬 수 있는 한 해가 되었으면 좋겠습니다. 2022년도 블로그 결산 작년 한 해에는 300만 명이 넘는 분들이 제 블로그를 방문해주셨고 페이지뷰는 669만을 기록하였습니다. 사용자와 세션은 작년에 비해 절대적인 수치는 약 10만 명 정도 소폭 늘었지만 페이지뷰 수는 무려 150만 뷰 ..