- 옛날에 샀던 udemy 강의 중에 html, css, javascript로 여러가지 것들을 간단한 것들을 구현하는 강의가 있었다. 이것들을 좀 정리해볼까 한다. 옛날에는 판매 되는 강의였지만 github에도 공유가 되어있다.
https://www.youtube.com/watch?v=69FkUGpw3ok
- upsplash라는 사이트에서 무료로 호스팅되는 이미지들을 가져와서 사용할 수 있다.
- 폰트는 구글 폰트를 사용하였다.
- 사전에 적용된 기본 CSS 값이 있다.
*{
box-sizing: border-box;
}
body{
font-family: 'Muli', sans-serif;
margin: 0;
display:flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow:hidden;
}
box-sizing: border-box; 을 쓰는 이유
CSS는 박스 모델에 의해서 CSS가 적용되는 영역이 나누어진다.
css에서 box-sizing 을 border-box로 하는 이유
Box-sizing 이란? 우리가 보통 css 초기 설정할 때 하는 것 중 하나가 아래 설정이다. box-sizing: border-box; box-sizing 속성은 요소의 전체 너비와 높이를 어떻게 계산하는지 설정한다. 다시 말해, 요소마다
juicyjerry.tistory.com
해당 블로그에 잘 설명이 되어 있지만 그래도 나름 설명해보면 어떤 태그를 사용하게 될 때 해당 태그에 문자를 표현하기 위해 h1, p 태그를 사용할 수 있고 또 image나 video를 사용할 수도 있다. 이러한 것들이 실제로 표시되는 영역을 conent area라고 한다. 이 영역은 보이기 때문에 사용자가 쉽게 확인할 수 있다.
그러나 보이지 않는 투명색 공간들이 있다. padding, border, margin이 그러한 영역들인데 해당 값들은 다음과 같이 값을 지정할 수 있다.
padding : | 위 | 오른쪽 | 아래 | 왼쪽 |
/* Apply to all four sides */
padding: 1em;
/* top and bottom | left and right */
padding: 5% 10%;
/* top | left and right | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 2em;
/* Global values */
padding: inherit;
padding: initial;
padding: revert;
padding: revert-layer;
padding: unset;
1) 하나의 값만 입력하면 모든 방향으로 같은 값이 설정된다.
2) 두개의 값을 입력하면 상하는 첫번째 값이, 좌우는 두번째 값이 설정된다.
3) 세개의 값을 입력하면 상단은 첫번째 값이, 좌우는 두번째 값이, 하단은 세번째 값이 설정된다.
4) 네개의 값을 입력하면 시계 방향으로 값이 설정된다.
=> 개인적으로 1번 방식과 4번 방식으로 사용하는 것이 기억하기 쉽고 직관적이라고 생각한다. 아니면 다음과 같이 따로 설정하는 것도 나중에 이해하고 변경하기에 좋을 것 같다. 물론 그렇게 되면 반대로 사용하지 않았을 때 CSS 코드가 굉장히 길어지게 된다.
h3 {
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
}
한편 tailwindcss는 어떻게 이러한 것들을 해결할까?
https://tailwindcss.com/docs/padding
Padding - Tailwind CSS
Utilities for controlling an element's padding.
tailwindcss.com
" p{t|r|b|l}-{size}"로 앞 글자만 따와서 코드의 수가 줄어들게 되었다. 근데 이렇게 생각하지 말고 좀 더 순서를 생각해보자.
1. 선택자를 적는다. ex) h1
2. 공백을 넣기 위해 스페이스를 누른다.
3. 괄호를 적는다. ex) {를 누르면 자동으로 }가 생긴다.
4. 엔터를 눌러서 줄바꿈을 한다. ex) enter를 누른 직후 자동으로 앞에 4개의 공백이 생긴다.
5. 5번째에 원하는 속성값을 넣는다. ex) p를 누른다음 원하는 페딩값을 찾는다.
6. 원하는 값을 넣는다.
이런 과정인데
tailwindcss는 5번째 ~ 6번째 과정에서 몇초가 안되는 시간에 이득을 볼 수 있다. 물론 앞서 작성한 코드가 있다면 복붙을 하는게 더 빠르다. 300달러에 최신판을 팔긴 하는데 무료로 올라온 것도 좀 있다... 좀 오래 되긴 했는데 웹 디자인 할려는 사람들 한테 좋지 않을까 싶다. 한번 쭉 읽어보는 것도 좋을 듯.
https://www.refactoringui.com/?ref=sidebar
Refactoring UI
Each font is shown in an example UI for that category, so you can get a feel for exactly how it’s going to look where you intend to use it, without having to try each font yourself. If you’ve ever felt uneasy trying to choose a typeface, this is going
www.refactoringui.com
다시 좀 돌아와서 저 box 값을 쓰는 이유는 width와 heigt 값이 계산되는 방식이 달라지기 때문이다. 좀 더 잘 설명된 곳이 있다.
https://tailwindcss.com/docs/box-sizing
Box Sizing - Tailwind CSS
Utilities for controlling how the browser should calculate an element's total size.
tailwindcss.com
프레임워크를 사용하지 않은 css를 Pure css라고 하는 사람이 있다. tailwind css와 병행해서 검색해보면 좀 더 쉽게 알 수 있을 것 같다. https://tailwindcss.com/docs/preflight
Preflight - Tailwind CSS
An opinionated set of base styles for Tailwind projects.
tailwindcss.com
pure css와는 다른 tailwind css는 기존 CSS의 여러가지 문제점들을 해결하기 위해 미리 지정된 스타일 규칙을 사용한다. 또 이미 완성된 UI들을 가져다가 사용할 수 있다.
https://tw-elements.com/docs/standard/getting-started/quick-start/
Install a free Tailwind CSS components library
Install TW elements via npm, via command line, via CDN or download a free .zip package. Use our open source Tailwind CSS components for free.
tw-elements.com
1. cdn으로 직접 HTML에서 동적 동작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS JavaScript Event</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<style>
/* Additional styles can be added here */
</style>
</head>
<body>
<button id="myButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>
<script>
// JavaScript code
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
alert('Button clicked!');
});
</script>
</body>
</html>
2. 리액트에서 tailwindcss의 선택자를 받아 jsx로 처리 하면 다음과 같다.
import React from 'react';
const MyComponent = () => {
const handleClick = () => {
alert('Button clicked!');
};
return (
<button
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
onClick={handleClick}
>
Click me
</button>
);
};
export default MyComponent;import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<div>
<h1>My React App</h1>
<MyComponent />
</div>
);
};
export default App;
화면상의 결과물은 똑같지만 완전히 다른 방식으로 작성하게 되고 폴더 구조도 다르게 된다. 웹 상에서 UI들의 움직임을 표현하는 것과 3D 모델이 움직임을 표현하는 것과는 당연히 다르다. 물론 이러한 것들을 세부적으로 조정할 수도 있을 것이다.
https://www.mixamo.com/#/?page=1&type=Motion%2CMotionPack
Mixamo
www.mixamo.com
https://creativecloud.adobe.com/ko/learn/app/dimension?promoid=9DJJ4NB6&mv=other
https://creativecloud.adobe.com/ko/learn/app/dimension?mv=other&promoid=9DJJ4NB6
creativecloud.adobe.com
https://creativecloud.adobe.com/ko/learn/dreamweaver/web/style-web-page-css
https://creativecloud.adobe.com/ko/learn/dreamweaver/web/style-web-page-css
creativecloud.adobe.com
어도비에서 점점 다른 영역까지 확대하고 있는 상황을 볼 수 있었다. 대중적인 영역 안에 웹 개발이 들어가게 되면서 워드나 한컴파일을 작성하는 능력처럼 변화하고 있는 것 같다.