본문 바로가기

IT/css32

css 인접 선택자 css 인접 선택자는 부모 자식 관계가 아닌 동일한 레벨의 요소 중에서 인접한 요소에 style을 적용시킬 수 있는 방법입니다. + 기호를 사용해서 기준 요소 + 인접 요소의 형식으로 사용할 수 있습니다. 사용법 기준요소 + 인접요소{ style } title text1 text2 2023. 3. 15.
css class 선택자 css class 선택자는 html 요소들을 하나의 그룹으로 묶어서 css를 적용하고 싶을 때 사용하는 방법입니다. 같은 종류의 요소가 아니라도 class를 부여하면 공통된 스타일을 적용시킬 수 있습니다. 사용법 .class{ style } Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam voluptatibus, repellat excepturi rem suscipit quo repellendus odio voluptas saepe voluptates alias quis laboriosam eaque! Natus distinctio sapiente ipsa aspernatur! Lorem ipsum dolor sit am.. 2023. 3. 15.
css id 선택자 CSS ID 선택자는 HTML 요소 중에서 특정 id 값을 가진 요소를 선택하여 스타일을 적용하는 방법입니다. ID 선택자는 "#"을 사용하여 표시하며, 해당 ID값을 지닌 요소를 찾아내서 스타일을 적용합니다. 사용법 예를 들어, 아래와 같은 HTML 코드가 있다고 가정해봅시다. Hello, World! 위 코드에서 "#my-element"은 ID 선택자로, id 속성 값이 "my-element"인 div 요소를 선택합니다. 따라서, 이 div 요소에 대해서 스타일을 적용하고자 할 때는 아래와 같은 CSS 코드를 작성할 수 있습니다. #my-element { color: red; font-size: 20px; } 위 코드는 ID 선택자를 사용하여 "my-element" ID 값을 가지는 div 요소에 대.. 2023. 3. 14.
css 요소 선택자 css 요소 선택자는 html 요소를 지정해서 css를 적용시킬 수 있습니다. 요소를 하나 지정하거나 콤마를 사용하여 여러 개를 지정할 수 있습니다. 사용법 html 요소 { style } Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos expedita illum perferendis aperiam omnis quidem alias at doloribus vero asperiores, odio quas accusamus, nulla pariatur esse reiciendis quod neque placeat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat la.. 2023. 3. 14.
css 전체 선택자 css 전체 선택자는 html 문서의 모든 요소에 css를 적용시킬 수 있습니다. 주로 html 문서의 여백을 없애기 위해서 사용됩니다. 사용법 * { style } hello world 전체 선택자를 사용해서 html 문서의 여백을 제거하지 않은 경우입니다. hello world 전체 선택자를 사용해서 여백을 제거한 경우입니다. 2023. 3. 14.
css 배경색 변경 css background-color 는 배경색을 변경하기 위한 속성입니다. 해당 속성에 입력하는 형식은 6가지 입니다. 첫 번째는 keyword를 입력하는 방법, 두 번째는 16진수를 입력하는 방법, 세번째는 RGB를 입력하는 방법, 네 번째는 HSL로 입력하는 방법, 다섯 번째는 Special keyword 입력하는 방법, 여섯 번째는 Global value를 입력하는 방법 입니다. keyword background-color: red; 16진수 background-color: #bbff00; RGB background-color: rgb(255 255 128); HSL background-color: hsl(50 33% 25%); Special keyword background-color: curr.. 2023. 3. 6.
css 글자색 변경 css로 글자색을 변경하기 위해서는 color 속성을 사용해서 변경할 수 있습니다. color 속성에 입력할 수 있는 형식에는 6가지가 있습니다. 첫 번째는 키워드를 입력해서 사용하는 방법으로 직관적으로 알 수 있어서 좋습니다. 두 번째는 16진수로 입력하는 방법, 세 번째는 rgb로 색상을 조합해서 입력하는 방법, 네 번째는 rgba로 상 rga에 투명도까지 입력하는 방법, 다섯 번째는 hsl 색상, 채도, 명도를 조합해서 입력하는 방법, 여섯 번째는 hsl에 투명도까지 추가하는 방법입니다. 키워드 입력 hello world 16진수 입력 hello world rgb 입력 hello world rgba 입력 hello world hsl 입력 hello world hsla 입력 hello world 2023. 3. 5.
css 사용법 css는 html 요소를 꾸미기 위한 문법입니다. css를 html 적용시키는 방법은 3가지가 있습니다. 첫 번째는 html 요소의 속성에 style 속성을 사용하는 방법입니다. 두 번째는 hello world 두 번째 사용법 hello world 세 번째 사용법 index.css 파일 h1 { color: blue; } index.html 파일 hello world 결과 세 번째 방법이 많은 파일에 css를 적용시키기 좋기 때문에 가장 많이 사용이 됩니다. 2023. 3. 4.