HTML156 CSS Math 함수 CSS 수학 함수는 수학식을 성질 값으로 사용할 수 있게 해준다. 여기서는 calc(), max(), min() 함수에 대해 설명하겠다. CSS calc() 함수 calc() 함수는 속성 값으로 사용할 계산을 수행한다. CSS 구문 calc(expression) 값 설명 expression 필수입니다. 수학식입니다. 결과값이 사용됩니다. 다음 연산자를 사용할 수 있습니다. + - * / The calc() 함수 창의 양쪽과 창의 가장자리 사이에 50px 간격으로 창을 가로질러 뻗어 있는 디브를 만듭니다: 텍스트... 위의 예제에서 calc(100%-100px)를 계산하면 100%-100px로 width가 지정되며 아래 그림과 같이 결과를 표시한다. CSS Max() 함수 max() 함수는 쉼표로 구분된 .. 2023. 9. 14. CSS !Important rule(중요도 규칙) CSS !important rule이란 무엇인가? CSS의 !important 규칙은 속성/값에 일반적인 것보다 더 중요한 값을 추가하는 데 사용된다. 실제로 !important 규칙을 사용하면 해당 요소의 특정 속성에 대한 이전 모든 스타일링 규칙이 재정의된다! 예를 들어 보자: 이것은 단락이다.. 이것은 단락이다.. 이것은 단락이다.. 위의 예에서 ID 선택기와 클래스 선택기가 더 높은 특정성을 가지더라도 세 문단 모두 빨간색 배경색이 된다. !important 규칙은 두 경우 모두 배경색 속성을 재정의한다. p 요소 스타일은 background-color red로 설정하였고 !important를 지정하였다. 아래 p요소의 글들의 스타일은 모두 배경색이 빨강색으로 우선 지정한다. 위의 코드를 실행한 .. 2023. 9. 13. CSS Specificity CSS Specificity가 무엇인가? 동일한 요소를 가리키는 CSS 규칙이 두 개 이상 있는 경우, 가장 높은 특정성(specificity) 값을 가진 선택자가 "win"되고 해당 스타일 선언이 해당 HTML 요소에 적용된다. 특정성을 요소에 최종적으로 적용할 스타일 선언을 결정하는 점수/순위로 생각한다. 다음 예를 확인합니다: 예제 1 Hello World! 이 예에서는 "p" 요소를 선택자로 사용하고 이 요소에 빨간색을 지정했다. 텍스트는 빨간색이다: 예제 2 이 예에서는 클래스 선택기("test"라는 이름)를 추가하고 이 클래스에 녹색을 지정했다. 이제 텍스트가 녹색으로 표시된다(요소 선택기 "p"에 빨간색을 지정했음에도 불구하고). 이는 클래스 선택기가 더 높은 우선 순위를 받기 때문이다: H.. 2023. 9. 12. CSS Units CSS Unit CSS에는 길이를 표현하기 위한 몇 가지 다른 단위가 있다. 많은 CSS 속성은 width, margin, padding, font-size 등의 "length" 값을 사용합니다. Length는 10px, 2em 등 길이 단위 뒤에 오는 숫자이다. 제목 1 T제목 2 단락용 텍스트입니다.. 단락용 텍스트입니다. 참고: 숫자와 단위 사이에 공백을 둘 수 없다. 그러나 값이 0인 경우에는 단위를 생략할 수 있다. 일부 CSS 속성의 경우 음의 길이가 허용된다. 길이 단위에는 absolute 단위와 relative 단위의 두 가지 유형이 있다. 절대 단위(Absolute Unit) 절대 길이 단위는 고정되어 있으며 이들 중 하나로 표현된 길이는 정확히 그 크기로 나타난다. 화면 크기가 너무 다.. 2023. 9. 11. 이전 1 2 3 4 ··· 39 다음
