[230329] Tailwind CSS | JavaScript | CSS 특강

윤지수·2023년 3월 29일
0
post-thumbnail

오늘의 꿀팁

💡 이력서 색상을 브랜드 컬러에 맞춰주면 좋다

💡 풀페이지 캡처 방법
크롬 개발자 도구 -> 메뉴 -> Run Command -> Capture full size screenshot

💨 Tailwind CSS

https://github.com/yoonmallang22/Tailwind-CSS

Rapidly build modern websites without ever leaving your HTML

장점

  • HTML 문서만 보면 된다
  • 클래스명을 고민하지 않아도 된다
  • 유지보수가 용이하다
    (회사 컨벤션이 아니니까 Tailwind를 사용해본 사람이라면 누구나)

Arbitrary values
Tailwind가 제공하는 값 외에 다른 값을 사용하고 싶을 경우 대괄호표기법으로 사용할 수 있다

<div class="text-[17px]">
  hello world
</div>
<div class="mt-[17px]">
  hello world
</div>
<div class="bg-[#4267B2] text-white">
  facebook
</div>

💡 컴포넌트가 만들어져 있지 않기 때문에 한땀한땀 직접 만들어야한다

💡 mobile first로 작업한다


Bootstrap, Sass, Tailwind 모두 신세계였다.. 뚝딱뚝딱 금방 만들어지는게 좋다ㅎㅎ 얼른 프로젝트 몇 개 해봐야겠다!

🪄 JavaScript

단기간(10일) 개발되었다
설계적 오류가 있다
그러나 고치기 힘들다(기존에 사용되고 있는 것들이 문제될 수 있기 때문에)

동적인 웹을 위해 자바스크립트가 할 수 있는 것들

  • 데이터 저장
    저장 공간: var , let ,const
    저장할 값의 형태: 숫자, 문자열, 빈 값(null, undefined), boolean(true, false), 배열, 객체
    (컴퓨터는 숫자 0과 1만 취급하기 때문에 값의 형태가 필요하다)
    코드의 뭉치: 함수

  • 값 계산
    사칙연산, 논리연산, 조건문, 반복문, 자료형의 내장함수

  • 결과 반영
    DOM & BOM API

    DOM과 BOM은 자바스크립트의 스펙이 아니다
    DOM(Document Object Model)
    document.write()
    BOM(Browser Object Model)
    alert()

  • 다른 컴퓨터와 통신
    Ajax

🎨 CSS 특강_5

by. 빔 캠프 이종찬 님

💡 시각적인 디자인은 하지 않고 레이아웃만 담당하는 클래스를 만들어주는 것이 좋다

다양한 요소가 같은 레이아웃을 가지고 있을 수 있다
ex. margin-left: auto;

부트스트랩처럼 컴포넌트를 만들어주어 필요할 때마다 사용할 수 있다
ex. 클래스 기반으로 grid의 크기를 좀 더 자유도 높게 컨트롤 할 수 있다는 장점이 있다

.l_row {
  display: grid;
  grid-template-columns: repeat( 12, 1fr );
  gap: 20px;
}

.l_row_thin { gap: 4px; }
.l_row_wide { gap: 20px; }

.l_col_1  { grid-column: auto / span 1; }
.l_col_2  { grid-column: auto / span 2; }
.l_col_3  { grid-column: auto / span 3; }
.l_col_4  { grid-column: auto / span 4; }
.l_col_5  { grid-column: auto / span 5; }
.l_col_6  { grid-column: auto / span 6; }
.l_col_7  { grid-column: auto / span 7; }
.l_col_8  { grid-column: auto / span 8; }
.l_col_9  { grid-column: auto / span 9; }
.l_col_10 { grid-column: auto / span 10; }
.l_col_11 { grid-column: auto / span 11; }
.l_col_12 { grid-column: auto / span 12; }

@media ( max-width: 720px ) {
  .l_col_tablet_1  { grid-column: auto / span 1; }
  .l_col_tablet_2  { grid-column: auto / span 2; }
  .l_col_tablet_3  { grid-column: auto / span 3; }
  .l_col_tablet_4  { grid-column: auto / span 4; }
  .l_col_tablet_5  { grid-column: auto / span 5; }
  .l_col_tablet_6  { grid-column: auto / span 6; }
  .l_col_tablet_7  { grid-column: auto / span 7; }
  .l_col_tablet_8  { grid-column: auto / span 8; }
  .l_col_tablet_9  { grid-column: auto / span 9; }
  .l_col_tablet_10 { grid-column: auto / span 10; }
  .l_col_tablet_11 { grid-column: auto / span 11; }
  .l_col_tablet_12 { grid-column: auto / span 12; }
}

ex. flex

.l_row {
  display: flex;
  row-gap: 20px;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.l_col {
  flex-basis: 50%;
  padding: 0 10px;
  box-sizing: border-box;
}

.l_col_thirds {
  flex-basis: 33.3333333%;
}

.l_col_half {
  flex-basis: 50%;
}
  • all: unset; 속성 초기화

마지막 CSS 특강이었다ㅜㅜ 아숩,, 진짜 짧은 시간에 많은 것들을 배웠다 바로 잡은 것들도 많고..! 나는 CSS를 제일 좋아하는 것 같다ㅋㅋ 너무 유익하고 재미있었다!!
추천해주신 책들 어제 구입했는데ㅎㅎ 읽으면서 CSS를 더 단단히 다져야겠다👊🏻

0개의 댓글