오늘의 꿀팁
💡 이력서 색상을 브랜드 컬러에 맞춰주면 좋다
💡 풀페이지 캡처 방법
크롬 개발자 도구 -> 메뉴 -> Run Command -> Capture full size screenshot
https://github.com/yoonmallang22/Tailwind-CSS
Rapidly build modern websites without ever leaving your HTML
장점
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 모두 신세계였다.. 뚝딱뚝딱 금방 만들어지는게 좋다ㅎㅎ 얼른 프로젝트 몇 개 해봐야겠다!
단기간(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
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를 더 단단히 다져야겠다👊🏻