분류 전체보기589 CSS pseudo-classes pseudo-class가 무엇인가? pseudo class는 선택하고자 하는 HTML 요소의 특별한 상태(state)를 정의하는 데 사용된다. 예를 들어, 다음과 같은 용도로 사용할 수 있다: 사용자가 요소 위에 마우스를 올릴 때 요소 스타일 지정 방문한 링크와 방문하지 않은 링크 스타일이 다릅니다 요소가 포커스를 맞출 때 스타일 지정 구문 selector:pseudo-class { property: value; } 클래스나 아이디에도 pseudo class를 사용할 수 있다. selector.class-name:psudo-class { property: value; } or selector.id-name:psudo-class { property: value; } Pseudo Class 대표적인 CSS .. 2023. 8. 29. CSS combination CSS combination CSS는 HTML 요소(elements)의 스타일을 적용하는 역할을 한다. 이 때 HTML 요소들을 특정할 때 선택자(selector)를 통해 해당 요소의 스타일을 지정한다. 콤비네이터는 선택자(selector) 간의 관계를 설명하는 것이다. CSS 선택자는 둘 이상의 단순 선택자를 포함할 수 있다. 단순 선택자 사이에 결합기를 포함할 수 있다. CSS에는 다음과 같은 네 가지 콤비네이터가 있다: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) Descendant Selector(space) descendatn selector는 지정된 .. 2023. 8. 28. CSS 수평, 수직 정렬 요소 가운데 정렬 블록 요소(와 같은)를 수평으로 중앙에 놓으려면 margin: auto; 를 사용한다. 요소의 너비를 설정하면 컨테이너의 가장자리까지 늘어나는 것을 방지할 수 있다. 그러면 요소가 지정된 너비를 차지하고 나머지 공간은 두 여백 사이에서 동일하게 분할된다: 가운데 정렬 요소 블록 요소(예: div)를 수평으로 중앙에 놓으려면 마진: auto; 를 사용한다 Hello World! 'center' 클래스 요소를 가운데 정렬하려면 margin:auto 를 설정한다. 위의 코드를 실행하면 아래와 같은 그림과 같이 출력된다. 텍스트 가운데 정렬 텍스트를 요소 내부에 중앙에 배치하려면 text-align: center; 를 사용한다. 텍스트 가운데정렬 나는 가운데이다.!!!. center 클래스에 .. 2023. 8. 27. CSS display:inline-block CSS display:inline-block 값 display: inline과 비교할 때, 주요 차이점은 display: inline-block을 사용하여 요소의 너비와 높이를 설정할 수 있다는 것이다. 또한 display: inline-block에서는 상단 및 하단 여백/패딩이 존중되지만 display: inline에서는 그렇지 않습니다. display: block과 비교할 때, 주요 차이점은 display: inline-block은 요소 뒤에 줄 바꿈을 추가하지 않으므로 요소는 다른 요소 옆에 앉을 수 있습니다. 다음 예제에서는 inline, display: inline-block 및 display: block의 서로 다른 표시 동작을 보여 줍니다: display 속성 display: inline 서.. 2023. 8. 26. 이전 1 ··· 51 52 53 54 55 56 57 ··· 148 다음
