attribute중에 contenteditable을 사용하면

div를 input, textarea처럼 쓸수있다.

 

입력창을 커스텀해서쓸때 종종 쓰이곤한다.

방법은 간단하다.

 

html + css / html + scss 버전 두가지를 살펴보자

 

1. html + css

<div contenteditable placeholder='메시지를 입력해주세요'></div>
[placeholder]:empty:before {
  display: block;
  content: attr(placeholder);
  color: #a6a6a6;
}

 

 

2. html + scss

<div contenteditable placeholder='메시지를 입력해주세요'></div>
&[placeholder]:empty:before {
  display: block;
  content: attrs(placeholder);
  color: #a6a6a6;
}

 

 

728x90
반응형

'개발, 코딩 > CSS' 카테고리의 다른 글

HTML, div를 input으로 쓰기  (0) 2021.11.16
css, transition all 깜빡임 (flickering)  (0) 2021.07.08
viewport에 대하여  (1) 2021.01.21

transtion 효과를 쓰다보면 의도치 않게

주변 컴포넌트가 깜박이게되는 현상을 맞이할때가 있다.

 

transition을 먹여둔 컴포넌트에 아래의 css 한줄만 추가하면 이 문제를 해결할 수 있다.

-webkit-backface-visibility: hidden;

 

728x90
반응형

'개발, 코딩 > CSS' 카테고리의 다른 글

HTML, div를 input으로 쓰기  (0) 2021.11.16
css, transition all 깜빡임 (flickering)  (0) 2021.07.08
viewport에 대하여  (1) 2021.01.21

보통 "반응형", "모바일 사이트" 하면 나오는

 

키워드 두가지가 있다

 

Viewport와 Media 쿼리

 

 

 

둘 중 누구도 없어서는 안되면 필수적인 요소다.

 

media 쿼리는 웹 프론트를 만져본 사람이라면 기본적인 사용법은 익히들 알고있다.

 

물론 이것도 공부하려면 할것들이 제법 많지만

 

필요할때 구글링하면서 쓰면 될만한 내용이라

 

미리부터 공부할 필요는 없을것 같다

 

 

 

그런데 Viewport가 오늘 신선한 충격으로 다가왔다.

 

<meta name='viewport' content='width=device-width, initial-width=1.0' />

그냥 헤더에 이거 한 줄 넣는것.

 

이 이상으로 이것이 무슨 의미를 갖는지 정확히 어떤 역할을 하는지 관심갖지 못했었다.

 

그냥 넣으면 대부분 만사 오케이니까

 

더이상 건드릴 이유도 공부할 이유도 없었다. (몇가지 옵션 정도는 쓰고있지만..)

 

 

 

그런데 재밌는 부분이 있다.

 

내 데스크탑 기준의 css를 태블릿에서도 비율에 맞게 유지하려면 어떻게 하면좋을까?

 

media query로 일일히 퍼센트에 맞게 조정해준다?

 

물론 이거도 노력하면 비슷한 효과를 볼수있다.

 

지금 내가 말하려고 하는것은 물리적/논리적 해상도의 차이에 대해서다.

 

(지금부터, 아래의 내용은 다소 비 전문적이거나 부정확할 수 있습니다.)

 

 

 

 

물리적은 실제 디바이스의 너비이고

 

논리적은 제품사양에 명시된 스펙에 나온 해상도라고 생각하면 될것같다...

 

 

 

자, 먼저 Viewport를 제외하고 생각하면 media 쿼리는 물리적 해상도를 기준으로 

 

컴포넌트/태그 들의 크기를 일정하게 조정해 주는 역할을 한다고 보면 될것같다

 

 

그런데, Viewport를 잘 이용하면 특정 값을 기준으로 논리적 해상도를 기준으로 css를 적용할수있다. (내가 오늘 이해한 바로는)

 

간단히는 이렇게 볼수있다.

 

<meta name='viewport' content='width=1190' />

이렇게 설정해둔다면

 

디바이스의 크기에 상관없이 

 

css의 width: 100%를 1190px로 보게한다.

 

이미 작성해둔 css들은 걱정하지 않아도, 이를 기준으로해서 알맞게 조정한 크기를 보여주게된다.

 

viewport는 정말 어마무시한 친구다.

 

위의 설정을 누가 이용하는지 아는가?

 

바로, 우리가 매일 보고 사용하고 있는 "네이버"다

 

 

 

네이버를 데스크탑에서 열고 개발자 도구를 보면 viewport가 위와 같이 설정되어있다.

 

그런데, 화면의 크기를 모바일 사이즈정도로 작게하고

 

화면을 다시 로드하면 m.naver.com으로 리디렉션하며 

 

해당 페이지에서 개발자 도구를 보면 viewport는

 

<meta name='viewport' content='width=device-width, initial-width=1.0' />

과 같은 우리가 흔히 아는 내용으로 작성되어있다.

 

정말 놀라운 viewport의 세계다.

 

 

 

 

현재 내가 운영중인 서비스에서는 네이버처럼 m.을 분리하여 운영할 여력은 없어서

 

javascript를 이용해 디바이스 크기에 따라 로드 시점에 viewport를 다르게 주도록 설정해보았다.

728x90
반응형

'개발, 코딩 > CSS' 카테고리의 다른 글

HTML, div를 input으로 쓰기  (0) 2021.11.16
css, transition all 깜빡임 (flickering)  (0) 2021.07.08
viewport에 대하여  (1) 2021.01.21
  1. 데브공구 2021.03.02 16:26

    ■ 1/10비용으로 프로그램이 의뢰가 가능한
    IT 아웃소싱에 혁신! [데브공구]를 소개합니다.

    프로그램 개발 의뢰 시 개발되는
    프로그램의 저작권을 의뢰자에게 주어
    개발완료 후 프로그램이 재판매 될 때마다
    최대 50%를 의뢰자에게 돌려주는 구조입니다.

    회사 업무관련 프로그램 개발이 필요하시다면
    의뢰자에게 수익 공유해 드리는
    데브공구를 활용해 보세요.

    https://dev09.co.kr