개발 & IT/프론트엔드 (15) 썸네일형 리스트형 모바일에서도 PC처럼 보이게 만드는 웹사이트 뷰포트 설정 방법 요즘 대부분의 웹사이트는 반응형 웹을 채택하고 있어, 화면 크기에 따라 레이아웃이 자동으로 조정됩니다. 하지만 경우에 따라서는 모바일에서도 PC와 동일한 고정 해상도로 보여주고 싶을 때가 있습니다.예를 들어,모바일에서 너무 간단하게 축약된 UI가 마음에 들지 않을 때특정 서비스나 데모 사이트를 PC 기준으로만 설계했을 때디자인 시안 그대로 모바일에서도 유지하고 싶을 때이 글에서는 HTML, CSS, 그리고 뷰포트 설정을 통해 모바일에서도 PC와 동일한 해상도로 고정해서 보여주는 방법을 소개합니다.✅ 뷰포트(Viewport)란?모바일 브라우저는 기본적으로 태그를 이용해 웹사이트가 어떻게 보여질지를 결정합니다.이 설정을 바꾸면 모바일 화면이 PC 화면처럼 축소되어 보이도록 만들 수 있습니다.✅ 고정 해상도.. 😲 “((” 이게 다르다고? — 괄호의 숨겨진 정체 어느 날, ((와 같은 괄호가 텍스트 치환이 안 되는 이상한 상황을 마주했습니다. 분명 코드에서는 "("를 잘 인식하고 있었는데, 현실에서는 작동하지 않더군요. 왜 그럴까요?✅ 괄호도 다를 수 있다?우리가 흔히 쓰는 괄호 (와 )는 키보드에서 쉽게 입력할 수 있습니다. 그런데 문제는 문서나 입력기, 환경에 따라 비슷해 보이지만 완전히 다른 문자로 인식될 수 있다는 데 있습니다.예를 들어 아래 두 괄호를 보세요:( (반각 괄호, ASCII)（ (전각 괄호, Full-width)🔍 실제로 확인해보자: 유니코드 비교괄호의 정체를 확인하는 가장 확실한 방법은 유니코드 코드포인트를 살펴보는 것입니다.문자 이름 유니코드(반각 소괄호 (half-width)U+0028（전각 소괄호 (full-width)U+FF08?.. Vue 3에서 컴포넌트 간 데이터 변동을 감지하고 관리하는 주요 방법들 Vue 3는 컴포넌트 간 통신을 위한 다양한 방법을 제공합니다. 오늘은 부모 컴포넌트와 자식 컴포넌트 사이에서 데이터 변동을 감지하는 주요 방법들에 대해 알아보겠습니다.1. Props와 Emits부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식에서 부모로 이벤트를 전달합니다. 부모 컴포넌트: 자식 컴포넌트: {{ message }} Send Update 2. v-model컴포넌트에서 간단한 양방향 바인딩을 구현할 때 사용합니다. 부모 컴포넌트: 입력값: {{ inputValue }} 자식 컴포넌트 (CustomInput): 3. provide/inject깊은 컴포넌트 트리에서 데이터를 전달할 때 유용합니다. 최상위 컴포넌트: 깊이 중첩된 자식 컴포넌트: {{ sh.. countdown timer 설정 {{ elapsedTime }} Vue 3.0에서 타입스크립트 사용하기 타입스크립트는 정적 타입을 지원하여 개발자가 더욱 안정적이고 예측 가능한 코드를 작성할 수 있게 도와줍니다. Vue 3.0은 기본적으로 타입스크립트를 지원하므로, 이제는 더욱 간편하게 타입스크립트를 사용할 수 있습니다. 1. 프로젝트 설정 Vue CLI를 사용하여 Vue 3.0 프로젝트를 생성합니다. 터미널에서 다음 명령어를 실행하세요: vue create my-vue-app 생성된 프로젝트 폴더로 이동한 후, 타입스크립트 옵션을 선택합니다. 이후 필요한 설정을 입력하면 타입스크립트가 자동으로 프로젝트에 추가됩니다. 2. 컴포넌트 작성 타입스크립트로 작성된 Vue 컴포넌트를 생성해보겠습니다. `HelloWorld.vue` 파일을 생성하고 다음과 같이 작성합니다: {{ greeting }} Click me.. [Vue] Component 재사용 export default { path: '/test', component: () => Layout, children: [ {path: 'path1', component: () => Listcomponent}, {path: 'path2', component: () => Listcomponent}, ] } path만 다르게 해서 하나의 컴포넌트를 재사용할 때, 컴포넌트가 업데이트되지 않는 문제 발생. router-view에 key 속성을 추가하여 path로 컴포넌트를 식별하도록 해줌으로써 해당 컴포넌트를 동일요소가 아닌 다른 요소로 인식하여 컴포넌트 데이터가 업데이트된다. key는 이름답게 고유해야만 렌더링 오류를 방지할 수 있다. key 속성 참고.. https://v2.vuejs.org/v2/api/#.. [Html] Video Tag start_time, end_time 운영 중인 사이트에 고객이 올려놓은 동영상의 thumbnail 이미지가 동일하다는 문의가 들어왔다. 동영상의 첫 번째 프레임이 전부 같았던 문제. 슈퍼 하도급 용역은 동영상 프레임 문제니 동영상을 수정하라고 할 수 없으므로, video src value에 start_time을 조정해준다. ※poster attr를 사용하여 직접 썸네일을 지정해 줄 수도 있다. 이런 식으로 시작시간을 미세하게 조정해주면 thumbnail도 바뀐다. ※ HTML5 공식 문서에는 따로 언급 안되어 있다. #t=[start_time], [end_time] 위와 같은 형식으로 구간을 설정할 수도 있으며, #t=[hour]:[minutes]:[seconds]로 시간을 지정할 수 있다고 한다. https://web.dev/video-.. 이전 1 2 다음
