필름마크 만들며 Tailwind CSS 배워보기
다양한 프론트엔드 라이브러리가 존재하는데 가볍고 개발자가 직접 스타일을 커스텀마이징할수 있는 Tailwind 라이브러리를 알게되어 공부하던중 CGV의 필름마크를 보다가 문득 이런 생각이 들었습니다.
Tailwind를 사용하여 필름마크처럼 웹에 이미지를 배치하면서 문법도 같이 공부하면 더 재밌지 않을까? 그래서 오늘은 Tailwind CSS를 사용하여 필름마크와 유사한 웹페이지를 만들어볼 예정입니다.
Tailwind CSS자동완성
어느 언어에서도 자동완성이 있으면 코딩을 조금 더 편하게 작성할 수 있습니다. Tailwind CSS에서도 vscode에서 사용가능한 자동완성 확장프로그램을 지원하고 있습니다.
Tailwind CSS IntelliSense 설치 및 자동완성 오류 해결법| VSCode
VSCode에디터에서 Tailwind CSS의 자동완성을 도와주는 IntelliSense확장프로그램 설치하면 Tailwind 문법을 사용할 때 일부만 입력해도 자동완성이 되거나 실제 css스타일을 미리 보는 등 굉장히 편리하게
newstroyblog.tistory.com
이전에 제가 포스팅한 글을 참고하셔서 VSCode의 Tailwind CSS자동완성 확장프로그램을 적용한 뒤 따라와 주세요.
Tailwind CSS 사용해 보기 - CDN
HTML파일에서 Tailwind CSS를 사용하려면 직접 설치하여 사용하는 방법도 있지만 HTML코드 내에 스크립트파일을 삽입하면 바로 사용가능하도록 구현된 CDN방법으로 알아보겠습니다.(CDN예제 링크)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="font-bold text-3xl underline">
Hello world!
</h1>
</body>
</html>예제 코드를 전부 복사하여 HTML파일에 붙여 넣고 웹페이지에 접근해 보면 'Hello world!'라는 문자가 출력됩니다.
기본적인 HTML파일과 동일하고 'head'태그 안에 tailwindcss의 스크립트파일만 추가한 상태입니다.
필름마크 배경 만들기
필름마크의 배경색이 검은색으로 이루어져 있으니 새로운 Div요소를 생성하여 세로로 배경을 만들어줍니다.
<div class="bg-black w-[420px] h-[800px]">검은 배경을 만드는 데 사용된 클래스는 bg와 w, h요소가 있습니다.
배경(bg) 속성
taliwind color문서(링크)를 살펴보면 정말 수많은 색상 클래스를 지원합니다. 여기에서 원하는 색상을 배경으로 지정할 수 있으며 필름마크인 점을 고려하여 'black'속성을 주었습니다.
가로 w(width), 세로 h(hegiht) 클래스
w와 h클래스
- 'width'의 약자 'w' 가로 너비를 의미합니다.(링크)
- 'height'의 약자인 'h' 세로 너비를 의미합니다.(링크)
- 각 단위는 'rem' 각 'rem'의 실제 'px'값은 주석으로 처리되어 있습니다.
예를 들어, 다음과 같이 작성하면 가로 세로 8px의 'div'요소가 생성됩니다.
<div class="w-2 h-2"></div>
사용자 지정으로 사이즈 지정하는 법
여기서 한 가지 문제가 있습니다. 세로 길이를 큰 값으로 설정하고 싶은데, 문서에서는' h-96'가 가장 높은 값이고 이는 '384px'를 의미합니다. 384px보다 더 큰 값을 사용하고 싶을 때는 사용자가 직접 값을 입력할 수 있습니다.
h-[원하는px] 형태로 지정하면 됩니다.
Tailwind CSS에서는 h클래스가 아닌 다른 클래스의 값도 사용자가 직접 원하는 px값을 지정하고 싶을 경우에는 [] 안에 원하는 값을 입력하면 됩니다.
width문서(링크)도 홈페이지에서 살펴볼 수 있으며 방금 설명한 'helight'와 대부분 유사합니다.
저는 필름마크의 세로 길이를 감안해 아래와 같이 사이즈를 직접 지정해 주었습니다.
w-[420px] h-[800px]
필름마크 타이틀 작성
<div class="bg-black w-[250px] h-[750px]">
...
<div class="flex justify-center p-4 text-lg font-bold text-black bg-white border-2 border-gray-700">
FILM MARK
</div>
...
</div>
이전에 작성했던 div요소 안에 이번에는 영화제목을 입력하도록 합니다.
타이틀을 설정하기 위해 사용된 클래스들을 하나씩 알아보겠습니다.
1. Flex와 Justify 클래스
- flex : 내부 요소를 플렉스 박스로 만들기 위해 사용합니다. 요소 정렬을 위해 항상 필요합니다.(링크)
- justify-center: 플렉스 박스 내부 요소들을 수평으로 가운데 정렬합니다. (링크)
즉 div요소 안의 텍스트가 flex요소로 인해 가운데 정렬됩니다.
2. 여백 클래스
- p-4: 내부 여백(패딩)을 설정합니다. 텍스트 위아래 여백이 생깁니다. (링크)
- m-4: 외부 여백(마진)을 설정할 때 사용됩니다. 이 예제에서는 사용되지 않았지만, 알아두면 좋습니다.(링크)
코드에서는 p-4 값을 주어 가운데로 정렬된 텍스트의 16px만큼의 상단 여백을 두었습니다.
3. 텍스트 관련 클래스
- text-lg, font-bold: 글자의 크기를 크게 하고 굵게(Bold) 만듭니다.(링크)
- font-bold: 글자를 굵게(Bold) 만듭니다.(링크)
- text-black: 글자의 색상을 검은색으로 설정합니다.(링크)
- border-2, border-gray-700: 2px의 테두리와 색상을 그레이색으로 설정합니다.(링크)
필름 & 이미지 영역 나누기 flex
<!--<div class="bg-black w-[250px] h-[570px]">
<div class="flex justify-center p-4 text-lg font-bold text-black bg-white border-2 border-gray-700">
FILM MARK
</div>-->
...
<!-- div박스생성 -->
<div class="flex">
<!-- 첫번째열 -->
<div class="flex flex-col">
<h1 class="text-white">이곳은 첫번째 열입니다.</h1>
</div>
<!-- 두번째열 남은공간사용 grow -->
<div class="flex flex-col grow">
<h1 class="text-white">이곳은 두번째 열입니다.</h1>
</div>
<!-- 세번째열 -->
<div class="flex flex-col">
<h1 class="text-white">이곳은 두번째 열입니다.</h1>
</div>
</div>
...
<!-- </div>-->FILM MARK타이틀을 입력한 뒤 그 바로아래에 새로운 flex박스를 생성합니다. 최상위 검정배경 div안에다가 작성해야 합니다.
flex div태그 아래에는 '첫 번째 열, 두 번째 열, 세 번째 열 div'가 존재합니다.
'flex flex-col'은 flex박스에서 열에 해당합니다. 총 세 개의 열로 사용할 div를 생성하였고, 2번째 열에는 'div'영역에 'grow' 클래스가 사용되었는데, 이는 남은 영역만큼 공간을 차지한다는 의미입니다.
즉 첫 번째 열과 세 번째 열에서 사용되는 콘텐츠 너비를 제외한 나머지 공간만큼 두 번째 열이 공간을 사용합니다.
사이드 필름영역 만들기
필름마크의 필름 부분을 구현하기 위해서 div를 통한 하얀 박스를 생성합니다.
아래 코드를 살펴보면 첫 번째 열에 새로운 흰색 배경의 div를 만들었습니다.
세 번째 열에도 동일한 div요소를 붙여 넣어주시면 됩니다.
- 'w-4, h-4' : 가로세로 16px (링크)
- 'mt-2 ml-2 mr-2' : div영역밖의 상단, 왼쪽, 오른쪽 여백을 8px (링크)
- 'bg-white' : 배경을 흰색으로 설정 (링크)
<!-- div박스생성 -->
<div class="flex">
<!-- 첫번째열 -->
<div class="flex flex-col">
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
</div>
첫 번째 열과 세 번째 열 영역에 방금 만든 네모박스 div를 여러 번 붙여 넣어 필름을 구현합니다.
<!-- div박스생성
<div class="flex">
첫번째열
<div class="flex flex-col"> -->
<div class="w-4 h-4 mt-1 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<div class="w-4 h-4 mt-2 ml-2 mr-2 bg-white"></div>
<!--
</div>-->
필름마크 중앙 제목 & 이미지
이제 영화 이름을 작성하고 영화 스틸샷을 넣어야 합니다. 먼저 영화 제목을 넣어보겠습니다.
아래코드처럼 두 번째 열 영역에 영화제목을 넣기 위한 클래스를 생성하고 영화제목을 넣었습니다.
...
<!-- 두번째열 남은공간사용 grow -->
<div class="flex flex-col grow">
<div class="text-center text-white text-[35px]">조커
</div>
</div>
...
마무리로 필름마크의 메인이라고 할 수 있는 영화 스틸컷을 넣으면 완성됩니다.
아래 코드를 참고하여 img 태그를 사용하여 원하는 이미지를 넣어주면 됩니다.
'w-full'클래스를 이미지가 가로 너비에 꽉 차게 하고, 두 번째 이미지부터는 'mt-3'을 넣어주어 상단 이미지와의 간격을 만들었습니다.
<!--
두번째열 남은공간사용 grow
<div class="flex flex-col grow">
<div class="text-center text-white text-[35px]">조커 -->
<img class="w-full h-[100px]" src="001.jpg" alt="">
<img class="w-full h-[100px] mt-3" src="002.png" alt="">
<img class="w-full h-[100px] mt-3" src="003.jpg" alt="">
<img class="w-full h-[100px] mt-3" src="004.jpg" alt="">
<!--
</div>
</div>-->
완성본
방금 알려드린 내용을 바탕으로 저는 고질라 필름마크를 제작해 봤습니다.
이미지의 사이즈나 필름마크 배경의 너비 등은 제작 스타일에 맞게 조정하고 만들어봤습니다.
전체코드
GitHub - Blue-B/FilmMark
Contribute to Blue-B/FilmMark development by creating an account on GitHub.
github.com