{**Tip**}
놓치기 쉬운 부분
=> 보통 요소 간격을 gap으로 처리하지만 텍스트 요소로만 되어 있는 것은 line-height로 처리할 때가 있다.
피그마를 꼼꼼히 살펴보자
css 라이브러리 첨부하는 사이트.
보통 반응형과 같이 일정한 패턴을 보이는 형식에 잘 사용할 수 있다.
span태그: 중간 디테일 설정하기
중간에 몇 글자만 강조하는 경우 span을 활용할 수 있다.
라이브러리 css
폰트는 js만큼이나 무겁다. 랜딩이 느려진다.
원하는 일부 코드 변경하기
일부 css를 틀렸다면 검색 후 왼쪽의 버튼을 누르면 원하는 일부의 코드를 변경하는 기능을 사용할 수 있다.
변경하기 위해 엔터를 누르기 전에 우선 원하는 코드만 드래그를 해놓는다.
피그마에 있는 텍스트 복사하기
[ctrl + 클릭 드래그] 후 복사&붙여넣기
타이포그래피
자간, 행간 조절 => 여백이 줄어들어 덩어리처럼 구분 되어 가독성이 개선된다.
타이틀과 부속 요소는 어느 하나만 눈에 띄면 안 되기 때문에 폰트는 동일하게, 색상과 자간으로 차이를 두기
[Java Script]
JS: 동작 담당 -> 밀기, 움직이기, 변하기
1. 출력 함수 : console.log("Hello World"); => 자바 스크립트의 출력은 모두 콘솔에 표출된다.
console.log("Hello World")
// 출력: Hello World
+ 코드펜에서 js를 사용할 때
=> 바로바로 렌더링 후 스스로 정리하는 능력이 없기 때문에 console.clear();를 사용해 콘솔창 내용을 삭제 후 사용
2. 자바스크립트에서 숫자는 ""없이 작성한다.
숫자와 문자를 더하면 숫자가 문자화되어서 최종적인 데이터는 문자데이터로 출력된다.
console.log(1+1)
// 출력: 2
console.log(1+"1")
// 출력: 11
++
개발자는 구글, 토스 벤치마킹 깔금한 디자인, 색상만 변경해서 해보기
깔끔한 디자인 => 통일감, 두께, 간격, 색상 단조롭게
js 더 공부하고 싶으면 유튜브 기초 3시간, 6시간 영상 공부하고
리액트, 타입스트립트, 바닐라 공부하기
스프링부트로 게시판만들기