자주 찾는 CSS 정리 - 크기에 맞춰서 글자 출력하기 html 문자는 훈민정음 서문입니다. 나랏말싸미 듕귁에 달아 문자와를 서로 사맛디 아니할쎄 이런 전차로 어린백성이 니르고저 할빼이셔도 마참내 제 뜻을 능히펴지 못할놈이 하니다. 내이를 어여삐 녀겨 새로 스물여덟자를 맹가노니 사람마다 수비니겨 날로쓰매 편아케 하고저 할 따라미니라. | 첫 번째 방법 - 글자 폰트를 줄이고, 간격을 줄임으로써 영역 안에 넣기. 태그에 letter-spacing: -2px; /*글자 간의 간격 줄이기*/ font-size: 14px; /*글자 사이즈 줄이기*/ div{ box-sizing: border-box; background: yellow; width: 140px; height: 140px; padding: 10px..

@extend - 거의 똑같은 css클래스가 있을 경우 예외처리를 위해 또하나의 클래스를 만드는 대신 @extend기능을 사용 - 새로운 스타일을 생성 - 클래스 간에 스타일을 공유 여기는 아메리카노가 좋습니다. 여기는 케이크가 좋습니다. .cafe{ background-color: green; border: 1px solid green; padding: 6px; border-radius: 8px; p{ color: #ffffff; } } .cafe-two{ @extend .cafe; background-color: red; border: 1px solid red; } @extend .cafe의 스타일 정보를 그대로 사용하면서 .cafe-two에서의 색상을 변경 | 플레이스홀더 선택자 사용 (%) - 다..

| 믹스인 라이브러리 - Sass 사용하는 프로젝트에서 재사용 | @import - 여러 scss파일을 하나로 합친다. - css가 하나일 경우 HTTP 연결 횟수가 줄어든다 > 성능 - EX) _mixin.scss, _variables.scss (파일2개) common.scss @import "_mixin.scss"; @import "_variables.scss" > common.scss 파일을 컴파일 할때 import 했던 파일을 하나의 파일로 생성

| 믹스인(Mixin) - 스타일 그룹을 정의하여 사용 - 선언 @mixin - 사용 @include | 사용하기 안녕하세요. 지금은 Sass, Scss를 공부중입니다. | 인자가 없을 경우 //선언 [@mixin] @mixin intro-txt{ color: red; font:{ size: 1.4rem; weight: bold; } } //사용 [@include] div p strong{ @include intro-txt } | 인자사용 (단일/다중) //font 색상, 사이즈, 폰트의 두께를 인자로 받음 @mixin intro-txt($color, $size, $weight){ margin: 0; color: $color; font:{ size: $size; weight: $weight; } } di..

| 변수 - 자주 반복되는 색상, 서체, 배경 등을 일괄 처리 가능하게끔 변수로 지정 - 변수 선언은 앞에 $ 를 붙여준다. - 유지보수가 쉽다. ex) 사이트의 포인트 색상이 #CD6799 가 변경될 경우, 모든 색상을 검색하여 변경해야되는 불편함이 있었음 > 변수로 지정 시, 변수에 색상코드만 변경 //변수 선언 $color-point: #CD6799; // 사용방법 예시 button{ padding: 8px 10px; border: 1px solid $color-point; background-color: $color-point; color: #ffffff; } strong{ color: $color-point; }

여러 줄의 주석 /* .. */ 중요한 주석 표현 > 저작권 정보, 저자명, 브라우저 메모 등등 /*! .. */ 한줄 이상 > 최종 출력물엔 반영되지 않는다. 즉 .css 파일로 변경 시 주석은 반영되지 않는다. //