-
CSS기초 변수를 활용하기Dung--[CSS HTML] 2023. 5. 3. 16:00
CSS기초 변수를 활용하기
CSS 표만들기 및 테두리 꾸미는 방법
CSS 표만들기 및 테두리 꾸미는 방법 1. CSS 테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table,th,td요소에 적용하실 수 있습니다. tr요소에는 적용이 되지 않습니다. 2. 기본모양 아무런 꾸
dsmotion.tistory.com
CSS 표꾸미기, 정렬하는 방법
CSS 표꾸미기, 정렬하는 방법 1. CSS 표 관련된 정렬 방법 표에 관련된 정렬방법에는 표 정렬, 셀 안의 내용가로 정렬, 셀 안의 내용 세로 정렬이 있습니다. 기본적인 모양은 1)표 : 왼쪽 정렬 2)제목
dsmotion.tistory.com
CSS 테이블 꾸미기, 표 크기 설정하는 방법
CSS 테이블 꾸미기, 표 크기 설정하는 방법 1. CSS 표와 셀의 기본 크기 표와 셀의 크기는 정해져 있지가 않습니다. 내용이 짧다면 작은 크기로, 내용이 길다면 크게 표와 셀이 형성이 됩니다. 의도
dsmotion.tistory.com
1. CSS 변수
CSS에서 변수를 만들고 활용하실 수 있습니다 변수를 활용하면 여러 값을 한번에 변경가능합니다.
1)변수 선언
--variable-name: value;변수를 정의하자면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 활용하실 수 있습니다. 어떠한 곳에서나 활용하실 수 있게 하려면 :root에 정의합니다.
2)변수 사용
property: var( --variable-name )2. 예제
1) 기본
- 변수 --my--color-1을 red로 설정하고 활용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
:root {
--my-color-1: red;
}
.x {
color: var( --my-color-1 );
}
</style>
</head>
<body>
<h1 class="x">Lorem Ipsum Dolor</h1>
</body>
</html>
적용예시 2) 정의하지 않은 변수
- 정의하지 않은 변수를 활용하시면, 그 속성을 사용하지 않은 것과 같은 효과를 나타냅니다.
<style>
:root {
--my-color-1: red;
}
.x {
color: var( --my-color-2 );
}
</style>적용예시 - 변수가 정의되지 않았을 경우 사용할 값을 정하실 수 있습니다.
- --my-color-2가 정의되지 않았기 때문에 orange가 사용이 됩니다.
<style>
:root {
--my-color-1: red;
}
.x {
color: var( --my-color-2, orange );
}
</style>
적용예시 3) 특정 선택자에 변수 선언
- 특정 선택자에 변수를 선언하면 그 선택자가 적용되는 요소와 그 하위 요소에 변수를 활용하실 수 있습니다.
- .x에 정의된 --my-color-1은 .y에서는 사용하실 수 없습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.x {
--my-color-1: red;
}
.x span {
color: var( --my-color-1 );
}
.y {
color: var( --my-color-1 );
}
</style>
</head>
<body>
<h1 class="x"><span>Lorem Ipsum Dolor</span></h1>
<h1 class="y">Lorem Ipsum Dolor</h1>
</body>
</html>
적용예시 CSS를 HTML에 적용하는 방법 및 설명
CSS를 HTML에 적용하는 방법 및 설명 HTML에 CSS를 적용하는 방법에는 3가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞추어 적절한 방법을 선택합니다. - Inline Style sheet HTML 태그의 style 속성
dsmotion.tistory.com
css 기초 여러가지 문법 만들기
css 기초 여러가지 문법 만들기 1. 문법 가장 간단한 CSS 코드 입니다. h1 { color: red } h1, color, red 세가지의 단어가 있는데 각각 선택자, 속성, 값이라고 합니다. - 선택자 : 무엇을 꾸밀지 정합니다. h1
dsmotion.tistory.com
CSS의 !important 활용하기
CSS의 !important 활용하기 css는 같은 속성을 여러번 정의 하였을때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용이 되지 않게 하려면 속성값 뒤에 !important 를 붙이셔야 합니다. pr
dsmotion.tistory.com
css 상속에 대한 정의와 속성
css 상속에 대한 정의와 속성 1. 상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성으로 되어있습니다. 상속은 자식 요소에 형향을 끼칩니다. 상속하지 않는 속성은 자식 요소에 영향
dsmotion.tistory.com
'Dung--[CSS HTML]' 카테고리의 다른 글
CSS 선택자의 종류와 활용방법 (0) 2023.05.03 css 상속에 대한 정의와 속성 (0) 2023.04.28 CSS의 !important 활용하기 (0) 2023.04.28 css 기초 여러가지 문법 만들기 (0) 2023.04.27 CSS를 HTML에 적용하는 방법 및 설명 (1) 2023.04.26
