[CSS] #과 .의 차이점

CSS에서 #과 .은 각각 아이디(id)와 클래스(class)를 나타내는 선택자입니다. 이 두 선택자는 웹 페이지의 요소에 스타일을 적용하는 데 사용됩니다. 그러나 각각의 선택자는 다음과 같이 서로 다른 용도와 사용법을 가지고 있습니다.  # 선택자# 선택자는 요소의 고유한 아이디를 나타내며, 해당 아이디를 가진 요소를 선택합니다. 아이디는 문서 내에서 유일해야 합니다. 즉, 동일한 아이디 를 가진 두 개 이상의 요소는 없어야 합니다.#header { background-color: #333; color: #fff;}위 예제는 아이디가 'header'인 요소에 배경색과 텍스트 색상을 지정하는 CSS입니다.  . 선택자. 선택자는 class를 나타내며, 해당 class를 가진 모든 요소를 선택합니다. ..

• format_list_bulleted CSS
• · 2024. 5. 7.
• textsms

[CSS] 이미지 회전하기

웹 디자인에서 이미지를 회전하는 것은 종종 필요한 작업입니다. 이미지를 회전하면 디자인에 다양한 효과를 줄 수 있으며, 사용자의 시선을 끌거나 콘텐츠를 강조할 수 있습니다. CSS를 사용하여 이미지를 회전하는 방법을 알아보겠습니다.  transform 속성 사용하기가장 간단한 방법은 CSS의 transform 속성을 사용하여 이미지를 회전하는 것입니다. transform 속성은 요소를 변형할 때 사용되며, rotate() 함수를 사용하여 요소를 회전시킬 수 있습니다.See the Pen 이미지 회전 -1 by saladent (@saladent) on CodePen.rotate() 함수에 전달되는 값은 회전할 각도를 나타냅니다. 양수 값은 시계 방향으로, 음수 값은 반시계 방향으로 회전합니다. 따라서 ..

• format_list_bulleted CSS
• · 2024. 5. 6.
• textsms

[CSS] 텍스트에 짧은 밑줄(라인) 만들기

텍스트에 밑줄 만들기 텍스트 밑에 짧은 밑줄을 만드는 방법입니다. 밑줄은 border 속성을 이용해 만들 수 있으며 width값을 조절하면 긴 밑줄도 만들 수 있습니다. See the Pen css - underline by saladent (@saladent) on CodePen.

• format_list_bulleted CSS
• · 2022. 3. 8.
• textsms

[CSS] display 속성 none, inline, block, inline-block 개념과 차이

display 속성 display 속성은 요소를 어떻게 보여줄지를 결정합니다. none, inline, block, inline-block 총 4가지 속성값이 있습니다. 아래 예시를 통하여 4가지 속성값의 개념과 차이를 알아보겠습니다. BOX 1 BOX 2 BOX 3 none 요소를 숨김처리 합니다. visibility 속성을 hidden으로 설정한 것과 달리 공간을 차지 않고 숨김처리합니다. See the Pen css - display : none by saladent (@saladent) on CodePen. inline 새 라인에서 시작하지 않고 내용만큼 너비를 차지합니다. 너비와 높이를 설정하려고 해도 효과가 없습니다. See the Pen css - display : inline by sala..

• format_list_bulleted CSS
• · 2022. 3. 6.
• textsms