728x90 300x250 SMALL Front-end/CSS65 css 변수 기본 사용법 css 변수란? css의 중복되는 값들을 미리 정의해서 여러곳에 사용할 수 있도록 한 것을 css변수라고 합니다. css 변수 기본 사용법 변수 앞에 -- 이중 하이픈을 추가해서 변수를 선언합니다. 변수는 대소문자를 구별합니다. :root - 가상선택자 :root를 이용하면 html문서 전체에 정의되는 전역변수를 만들 수 있습니다. 특정 element 를 사용하여 해당 element에만 변수값을 지정해 줄 수도 있습니다. 지정한 변수를 사용할때는 var(변수명) 형식으로 사용합니다. .contents { border: 2px solid #555; } .contents-tit { color: #555; } .contents-tit::before { content: ""; display: inline-blo.. 2021. 10. 27. [css] flex-flow, flex-direction, flex-wrap flex-flow는 flex-direction과 flex-wrap 속성의 단축 속성이다. 따라서 flex-flow를 이해하기 위해서는 먼저 flex-direction과 flex-wrap를 이해해야한다. flex-direction flex-direction은 플렉스 컨테이너 내에서 배치할때 방향을 설정하는 것으로 가로 열방향, 행방향, 열방향 역순, 행방향 역순을 지정할 수 있다. css: flex-direction 속성 열방향 배치 flex-direction: row; 열방향 역순 배치 flex-direction: row-reverse; 행방향 배치 flex-direction: column; 행방향 역순 배치 flex-direction: column-reverse; flex-wrap flex-wrap은 .. 2021. 10. 17. box-shadow 속성 그림자 효과 css box-shadow:none | 그림자값 그림자값 = inset 수평거리와 수직거리는 반드시 지정해야 하고 나머지 속성값은 옵션사항이라 필요할 때 사용하면 됩니다. box-shadow 속성 수평거리(필수속성) 그림자의 수평거리(수평으로 얼마나 떨어져 있는지) 양수값은 대상의 오른쪽, 음수값은 요소의 왼쪽 수직거리(필수속성) 세로로 얼마나 떨어져 있는지 양수값은 대상의 아래쪽, 음수값은 대상의 위쪽 그림자 표시 흐림정도 값이 커질수록 그림자가 부드러워지고 생략하면 기본값이 0이 되면서 진한 그림자를 표시한다. 그림자를 표시하면 음수값은 사용할 수 없다. 번짐정도 양수값은 그림자가 모든 방향으로 퍼져나가고 음수값은 모든방향으로 축소되어져서 보인다. 기본값은 0으로 설정된다. 색상 한가지 색상으로 표현할 수 .. 2021. 9. 9. [css] word-break word-break 줄바꿈 할 때 어떤 기준으로 줄바꿈 할지 정하는 속성 /* 키워드 값 */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* 사용 안함 */ /* 전역 값 */ word-break: inherit; word-break: initial; word-break: unset; normal : CJK(한중일) 문자는 글자 기준, 이외에는기본 줄 바꿈 규칙 사용 break-all : 글자기준으로 줄바꿈 keep-all : CJK(한중일) 문자에서는 단어 기준으로 줄바꿈 그 이외에는 normal과 동일 break-word : overflow-wrap 속성에 상관하지 않고, word-b.. 2021. 8. 12. 이전 1 ··· 11 12 13 14 15 16 17 다음 728x90 반응형 LIST