HOHO - 240318-Tailwind-예시1 블로그

chan_hari·2024년 7월 29일
HOHO-DAIRYscss

HOHO-DIARY

목록 보기
33/56
post-thumbnail

그전에 해놓은 웹 카피 라이팅 해놓을 것을 테일윈드로 다시 해보려고 한다.

주의점

  • Tailwind CSS는 기본적으로 box-sizing: border-box를 사용합니다. 따라서 요소의 너비를 설정할 때 여백과 테두리의 크기를 고려해야 합니다.
  • width 속성은 요소의 콘텐츠 영역의 너비를 설정합니다. 패딩이나 마진은 여기에 포함되지 않습니다.

에러

  • width 속성에 잘못된 값을 지정하면 오류가 발생할 수 있습니다. 예를 들어, w-100px와 같이 숫자만 지정하면 오류가 발생합니다.
  • width 속성과 max-width 속성을 동시에 사용하면 예상치 못한 결과가 발생할 수 있습니다.

0. blog

// #blog {
//     background-color: #fff;
//     color: #777;
//     font: normal 15px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
// }

background-color: #fff

⇒bg-white

font

⇒font-bold font-normal font-serif text-[14px]

1.Header

<header>
    <div class="wrapper">
      <div class="ex">
        <h1 class="logo" id="logo">Simply</h1>
        <nav>
          <ul class="nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">BLOG</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
.wrapper {
//     margin: 0 auto;
//     padding: 0 10px;
//     width: 940px;
// }

// .ex {
//     display: flex;
//     justify-content: center;
//     flex-direction: row;
//     align-items: flex-start;
//     height: 120px;
// }

// #logo {
//     margin-top: 32px;
//     color: #02b8dd;
//     width: 400px;
// }

// .nav li {
//     display: flex;
//     list-style: none;
//     width: 60px;
//     margin: 30px;
//     margin-bottom: 0;
//     color: #444;
//     text-transform: uppercase;
//     font-weight: bold;

// }

// .nav {
//     display: flex;
//     width: 540px;
//     padding: 0;
//     justify-content: space-around;
//     margin-bottom: 0;
// }

(1)wrapper

.wrapper {
//     margin: 0 auto;
//     padding: 0 10px;
//     width: 940px;
// }

magin- 상하가 0 좌우가 오토

⇒ my-0 mx-auto

padding 상하가 0 좌우가 10px

⇒ py-0 px-2.5

테일 윈드의 사이즈를 적는 방식

rem을 기준으로 하고 있음

1rem = 16px = 4(테일윈드에서 사용하는 값)

0.25rem= 4px = 1

해당 수치를 기준으로 width 와 height를 작업 하면 됨

width - 940px

⇒w-{940px}

(2) ex

// .ex {
//     display: flex;
//     justify-content: center;
//     flex-direction: row;
//     align-items: flex-start;
//     height: 120px;
// }

display-flex(자식요소들은 자신이 가진 컨텐츠의 크기만큼만 넓이를 가지게 됨)

⇒flex

justify-content : center( 콘텐츠 항목 사이와 주위에 공간을 분배하는 방법- 아이템들을 가운데로 정렬)

⇒justify-center

flex-direction : row(아이템을 배치 할때 사용할 주축을 왼쪽부터 시작/ 글의 작성방향과 동일)

⇒flex-row

align- items: flex-start ( 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정-요소의 정렬 상태를 위쪽으로 설정)

⇒items-end

height:120px( 높이 120px)

⇒h-{120px}


// #logo {
//     margin-top: 32px;
//     color: #02b8dd;
//     width: 400px;
// }

#logo

margin-top: 32px

⇒mt-8

color : #02b8dd

💥💥💥💥💥

tailwind는 기본 색상 팔레트가 있음

<사용자 정의 색상>

파일 color에서 개체를 변경 하면 됨. → tailwind.config.js

them.colors 구성 파일 섹션 아래에 직접 색상을 추가

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        current: "currentColor",
        'logo': '#02b8dd'
      },
    },
  },
  plugins: [],
};

⇒text-logo

width : 400px

⇒ w- {400px}

// h1 {
//     font-family: 'Crete Round', serif;
//     font-weight: bold;
//     color: #444;
//     font-size: 45px;
//     margin-bottom: 20px;
// }

로고 글자를 h1 으로 작성 하여서 같이 봐야함

font-famaily

⇒font-serif

font-wight :bold

⇒ font-bold

font-size: 45px / 값을 따로 사용자로 지정할수도 있음 하지만 일회성 폰트 사이즈값을 사용?

대괄호를 사용하여 임의의 값을 사용하여 즉석에서 속성을 생성

⇒text-[45px]

margin-bottom: 20px

⇒mb-5

(4) nav


// .nav li {
//     display: flex;
//     list-style: none;
//     width: 60px;
//     margin: 30px;
//     margin-bottom: 0;
//     color: #444;
//     text-transform: uppercase;
//     font-weight: bold;

// }

// .nav {
//     display: flex;
//     width: 540px;
//     padding: 0;
//     justify-content: space-around;
//     margin-bottom: 0;
// }

nav

⇒ flex

⇒ w-[540px]

⇒p-0

⇒justify-around

⇒mb-0

nav li

⇒flex

list-style : none

⇒list-none

width: 60px

⇒w-[60px]

margin:30px

⇒m-[30px]

margin-bottom:0

⇒mb-0

color : #444

⇒text-primary

text-transform: upper case;

⇒ uppercase

font-weight:bold

⇒font-bold

2. Hero image


// h2 {
//     
//     color: #444;
//     font-weight: bold;
//     text-transform: uppercase;
//     text-align: center;
//     margin-bottom: 20px;
// }

=>**font -bold
text-primary
uppercase
text-center
mb-5**

// .heroImage {
//     height: 580px;
//     padding-top: 1px;
//     background: #e8eced url("https://picsum.photos/940/580") no-repeat center;
//     display: flex;
//     justify-content: center;
//     align-items: center;
// }

**=>h-[580px]
pt-px  /**padding-top: 1px;
bg- hero bg-heroImage bg-no-repeat bg-center
flex
justify-center
items-center

// .hero h2 {
//     margin: 180px 0 40px 0;
// }
=> m-[180px 0 40px 0]

// .getStart {
//     display: block;
//     text-align: center;
//     background: #444;
//     border-radius: 3px;
//     color: #fff;
//     width: 180px;
//     height: 50px;
//     font-size: 20px;
//     line-height: 50px;
//     margin: 0 auto;
// }
=>
block
text-center
bg-primary
rounded-[12px] /border-radius : 3px
text-white
w-[180px]
h-[50px]
text-[20px] / font-size: 20px;
leading-[50px] / line-height: 50px;
my-0 mx-auto

// .firstLine {
//     color: #fff;
// }

// .secondLine {
//     color: #fff;
// }

=> h2  에 다써서 굳이 안써도 됨 완전 편한걸?

3. features

// #features ul {
//     margin: 80px 0;
//     display: flex;
// }

=> my-20 mx-0 flex
// #features ul li {
//     width: 300px;
//     justify-content: center;
//     text-align: center;
//     list-style: none;

// }
=> w-[300px]
justify-center
text-center
list-none

// #fetures ul li.f1 {
//     background: #e8eced url("https://picsum.photos/100/100") no-repeat center;
// }
=>
bg-f1 bg-hero bg-no-repeat bg-center bg-cover

// #fetures ul li.f2 {
//     background: #e8eced url("https://picsum.photos/100/100") no-repeat center;
// }

// #fetures ul li.f3 {
//     background: #e8eced url("https://picsum.photos/100/100") no-repeat center;
// }

// p {
//     line-height: 20px;
//     margin-bottom: 20px;
// }
=> leading-5
mb-5
// h4 {
//     font-size: 24px;
//     color: #444;
//     font-weight: bold;
//     text-transform: uppercase;
//     margin-bottom: 20px;
// }
text-[24px]
text-primary
font-bold
uppercase
mb-5

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,ts}"],
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        current: "currentColor",
        logo: "#02b8dd",
        primary: "#444",
        hero: "#e8eced",
      },
      backgroundImage: {
        heroImage: "url('https://picsum.photos/940/580')",
        f1: "url('https://picsum.photos/100/100')",
      },
    },
  },
  plugins: [],
};

🚨🚨<Tailwind 스타일재사용>🚨🚨🚨

Reusing Styles - Tailwind CSS

Q. 계속 반복되는 테일윈드의 css 그럼 계속 복붙을 해서 다 붙여야되는건가?

profile
chan_hari
chan
이전 포스트

HOHO - 240315 Spaced / html

다음 포스트

HOHO - Augular 공식문서 1

0개의 댓글