HTML/CSS문법79 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 float 예제 이 페이지에는 일반적인 float 예제를 살펴볼 것이다. Grid of Boxes Float을 활용하여 박스를 옆으로 나란히 배치: 사과상자. 바나나상자. 파인애플상자. Note: 여기서는 clearfix hack을 사용하여 레이아웃 흐름을 관리합니다. 또한 추가 패딩으로 인해 상자가 깨지지 않도록 상자 크기 속성을 사용합니다. 효과를 보려면 이 코드를 제거하십시오. 3개의 float 박스를 쉽게 나란히 만들 수 있다. 그러나 각 상자의 너비를 확장하는 것(예: 패딩 또는 테두리)을 추가하면 상자가 깨진다. 상자 크기 속성을 통해 상자의 전체 너비(및 높이)에 패딩과 테두리를 포함할 수 있으므로 패딩이 상자 내부에 남아 있고 깨지지 않도록 할 수 있다. 이미지를 옆으로 나란히 배치하기 상자 그리드를 사용.. 2023. 8. 25. 이전 1 2 3 4 5 6 7 8 ··· 20 다음
