CodeHoon

Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.

Vue.js 3 - tailwindcss3 를 사용하였습니다.

하는 방법 바로 가시죠.

우선 tailwind.config.js 파일이 /src 내에 있습니다.

이곳에다가 작성하는것인데요,

theme.extend. 내에 작성

module.exports = {
  purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        'hero-pattern': "url('pattern-bg.png')",
        'second-image-pattern': "url('sencond-bg.png')",
      })
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.

사용 사례

이상입니다.

유용하게 쓰십쇼

mainActivity.kt

val videoUri = Uri.parse("android.resource://" + packageName + "/" + R.raw.first );
        binding.videoView.setVideoURI(videoUri);
        binding.videoView.start();
        binding.videoView.setOnCompletionListener {
            binding.videoView.start();
        }

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <VideoView
        android:id="@+id/videoView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"

        />
</RelativeLayout>

ConstraintLayout -> RelativeLayout으로 변경.

VideoView를 삽입하고, 해당 내용을 작성한다.

=> VideoView Layout 아래부터 코드를 작성하면 동영상 레이아웃이 가장 하단에 쌓여,

z-index가 가장 낮은 순위가 된다.

포토샵으로 보자면, 동영상 레이아웃을 가장 아래에 놓고 위에 다른 레이아웃들을 쌓는 형태이다.

안녕하세요 상훈입니다.

웹 개발 시 배경을 지정하여야하는데, 마땅한 배경을 지정할게 없거나, 랜덤으로 새로고침할 때마다 등장하는 배경을 찾고 싶으시다면

background-image: url( 
 https://source.unsplash.com/random/1920x1080 
)

을 사용해주시길 바랍니다. 

1920x1080은 본인의 배경 크기를 지정할 수 있습니다. 

좋네요. ㅎ

예시)

이상입니다.