개발새발 로그

CSS Preprocessor Sass(SCSS) 전처리 도구 웹브라우저에서 표준 CSS를 제외하면 이러한 전처리 도구는 직접 동작이 불가하다. 작성의 효율성을 위해 전처리 도구를 활용하되 웹 브라우저에서 직접 동작할 수 있는 CSS로 최종에는 변환작업을 해야한다. 이러한 변환 작업을 위해서는 NodeJS환경을 필요로한다. -> NodeJS 설치하기! Sass https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com 라이브러리를 사용할 때 성숙..

@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다. /* 최상위 코드 레벨 */ /* @media 타입 and (기능) { 스타일 }*/ @media screen and (min-width: 900px) { article { padding: 1rem 3rem; } } /* 다른 조건부 @규칙 내에 중첩 */ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } max-width 700px : 최대 가로너비가..

CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법 기능쿼리라고 부른다. .flex-container > * { padding: 0.3em; list-style-type: none; text-shadow: 0 0 2px red; float: left; } /*display: flex를 사용할 수 있으면 아래 코드를 사용하고 아니라면 사용하지않는다.*/ @supports (display: flex) { .flex-container > * { text-shadow: 0 0 2px blue; float: none; } .flex-container { display: flex; } } Not 연산자 연산자 not는 표현식 앞에 위치하여 표현식을 부정합니다. 브라우저의 transfor..

변수 선언하기 element { --main-bg-color: brown; } 변수 사용 방법 element { background-color: var(--main-bg-color); } 변수를 선언할 때는 특정한 선택자에 선언해야한다. :root 선택자로 선언하면 그 아래 후손들은 모두 변수를 사용할 수 있다. :root는 가상클래스 선택자 최상위 요소를 선택하는 가상클래스 선택자이다. 이는 html 선택자를 적은 것과 동일하다. :root { --main-bg-color: brown; } :root를 사용하는 이유는 CSS의 명시도 때문이다. 태그 선택자는 명시도가 1점이지만 가상클래스 선택자는 명시도가 10점이다. 명시도가 높아야 안정적이다.(큰 차이는 없음) 사용자 지정 속성 대안 값 주어진 변수..

filter /* SVG 필터를 가리키는 URL */ filter: url("filters.svg#filter-id"); /* 값 */ filter: blur(5px); // 흐림처리 filter: brightness(0.4); // 밝음 처리 filter: contrast(200%); // 색 대비 filter: drop-shadow(16px 16px 20px blue); // (x축거리 y축거리, 그림자의 흐림정도)로 그림자의 표현 filter: grayscale(50%); // 회색빛으로 filter: hue-rotate(90deg); // 원형의 색상표를 기준으로 각도로 지정 filter: invert(75%); // 요소의 색상을 반전시킴 filter: opacity(25%); // 투명도 fi..

column-count 다단을 만들 수 있게 된다. column-width 단마다 너비를 줄 수 있다. 너비는 최소 너비로 설정되어 column-count에 따라 자동으로 너비가 설정된다. 만약 최소너비보다 column-count가 크다면 column-count가 무시된다. column-rule 단마다 구분선을 줄 수 있다. column-rule-width column-rule-style column-rule-color 세가지의 속성을 줄 수도 있다. 단축속성도 가능하다. columns: column-width column-count column-gap -기본 값은 normal - 단과 단 사이의 거리를 지정할 수 있다.

perspective는 3차원 변환함수에서만 적용된다. 아래는 perspective함수를 사용한 것이다. transform: perspective(300px) rotateY(45deg); - perspective를 적용하지 않으면 아래와 같이 작동함 - perspective는 부모 요소에 적용하는 것이 보편적이다. 원근의 기준을 바꿀 수도 있다. 아래와 같이 x축과 y축을 구성한다. 기본값은 50% 50%이다. perspective-origin : 0 0; - 위 처럼 적용하면 부모요소의 왼쪽 상단에서 item이 변화하는 모습을 볼 수 있다. 주의점 perspective()는 자식요소에만 적용됨 즉 자식의 자식요소에는 적용이 안된다. (후손에 적용이안됨) 이를 해결하기 위해 자식요소에 아래 속성을 추가해..

단위 fr(fraction) 그리드 트랙 사이즈로 사용 되는 fr 단위는 유연한 단위로 그리드 컨테이너의 여유 공간을 비율로 나눠 설정합니다. 퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아닙니다. 그래서 calc() 함수에서 다른 값과 함께 처리할 수 없습니다. min-content grid-template-rows:100px grid-template-columns : repeat(4,min-content); - 한글과 영어의 차이가 있다. - 그래서 아래와 같은 속성을 한글이 적혀있는 item에 적용하면 영어와 같이 띄워쓰기를 기준으로 동작을 하게 된다. .item { ... word-break : keep-all } word-break의 속성 normal 기본 줄 바꿈 규..