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