Lpla 개발 블로그

HTML&CSS

[SCSS] 색상 관련 내장함수

HTML default darken lighten saturate desaturate adjust-hue opacity SCSS $red : #d8222b; div { width: 10rem; height: 10rem; margin: 1rem; display: inline-block; text-align: center; line-height: 10rem; color: #fff; font-size: 1.4rem; } .box1 { background-color: $red; } .box2 { background-color: darken($red, 30%); } .box3 { background-color: lighten($red, 30%); } .box4 { background-color: saturate(..

HTML&CSS

[CSS] 형광펜 효과

1. 가상 요소 선택자 (:before, :after) 가상 요소 선택자를 사용하여 형광펜 효과 내기 p {font-size: 26px; position: relative; display: inline-block;} span {position: relative; display: inline-block;} span:before {content:""; display:inline-block; width: 100%; height: 10px; display: inline-block; background: #FFD84B; position: absolute; bottom: 0; left: 0; z-index: -1;} 2. box-shadow p {font-size: 26px; position: relative; d..

HTML&CSS

[CSS] 3D 카드 효과(transform, perspective)

사이트를 제작하면서 한 가지 난관에 부딪혔다. 첫번째 움짤과 같이 트랜스폼(Transform)으로 3D 카드 효과를 만들려고 했다. 하지만 두번째 움짤처럼 3D 효과가 적용되지 않고 평면적으로 카드가 넘어가버렸다. 여기에 적용된 코드는 아래와 같다. FAKER FAKER SANGHYEOK LEE - 미드MAY 7, 1996 - SOUTH KOREA 자기소개 FAKER IS ONE OF JUST TWO PLAYERS, ALONG WITH HIS FORMER TEAMMATE BENGI, TO HAVE WON THE LEAGUE OF LEGENDS WORLD CHAMPIONSHIP THREE TIMES. body { background-color: #000; margin-top: 100px; } .team_p..

HTML&CSS

[CSS] border와 outline의 차이

어떤 요소에 테두리 효과를 주기 위해서 일반적으로 border를 사용한다. border는 실제로 그만큼의 공간을 차지하게 되어 레이아웃에 영향을 끼친다. div:hover{ border: 2px solid #e2012d; } 반면 outline은 레이아웃에 영향을 끼치지 않는다. div:hover{ outline: 2px solid #e2012d; outline-offset: -2px; } 이렇게만 보면 outline이 더 좋아 보인다. 다만 outline은 border-top, border-right 처럼 특정 부분만 효과를 줄 수 없으며, border-radius 같은 효과도 쓸 수 없다. 상황에 따라 잘 선택해서 사용해야 한다. border를 사용하고도 간단한 눈속임을 쓴다면 레이아웃을 유지한 채 ..

HTML&CSS

CSS로 스크롤바 숨기기

HTML Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorum delectus harum molestias repudiandae sapiente ipsam, atque voluptatibus libero saepe dolorem beatae! Modi veritatis quidem delectus rem aut quod nihil molestias? Repudiandae, nam aperiam eveniet hic amet id quis aliquid molestias quo velit accusantium ea officiis at, labore corporis maxime consequatur neque fugiat qui ab dist..

HTML&CSS

CSS로 그라데이션 텍스트 쉽게 만들기

그라데이션이 들어간 텍스트를 CSS만으로 만들 수 있다. See the Pen vqOaPL by lpla (@lpla) on CodePen. background-clip은 배경의 영역을 지정하는 코드로 기본값은 initial 이다. background-clip: padding-box; 는 패딩 영역까지 배경이 보이도록 하고, background-clip: border-box; 는 테두리 영역까지 배경이 보도록 하는 것이다. 예외적으로 webkit(사파리, 크롬) 에서만 background-clip: text; 가 사용 가능한데 텍스트 영역에 배경이 보이도록 하는 것이다. 그리고 텍스트 색상을 투명화하면, 배경색상이 텍스트에 입혀지는 원리이다.