240502 열네번째날 TIL

// 내생각 / 색깔글씨 : 중요표시 등

공부한 내용 - CRUD 구현중 알게 된 것 들

영상보고 따라하며 구현해보려고 했으나.. 실패 😂 구글링도 실력..

 

html에서 js연동은 </body> 맨 마지막에 넣을 것

예시 : <script src="./jsnaji.js"></script>

          </body>

 

<hr> : 줄 생성 ; 하나만 쓰면 됨 '</hr>' 없음

------

css

 

폰트사이즈 : 수치 rem

font-weight : 폰트 굵기 700정도 사용함

hover : 버튼 등에 사용 되며 마우스가 올라가면 해당 색으로 변경

.addBtn:hover {

background-color: rgb(95, 95, 95);

color: white;

}

호버 전

호버 후

pre-wrap

pre-wrap 속성값은 pre 속성값과 동일하게 연속된 띄어쓰기와 들여쓰기, 줄바꿈을 있는 그대로 보존

관련자료 https://www.daleseo.com/css-white-space/ 

CSS의 white-space 속성 사용법

 

-----

js

ariaValueMax.trim : TRIM은 문자열에서 선행 및 후행 공백을 모두 제거한 결과를 리턴합니다. 

 

참고자료

https://webdesign.tutsplus.com/build-a-crud-web-application-with-vanilla-javascript--cms-93439t

How to Build a CRUD Web Application with Vanilla JavaScript | Envato Tuts+

 

 

로컬스토리지 : 현재 도메인의 로컬 저장소에 접근할 수 있게 해줌 & 영구적 보관(브라우저 끄고 켜도 데이터 남아있음)

                       데이터 보관시 데이터의 실제값을 각각 지정, 이때 데이터 타입은 문자열 형태만 허용

                       로컬스토리지의 데이터(key) 이름은 중복될 수 없음으며 데이터 읽고 쓸때에는 메소드 이용해 접근

ex) setItem - 키와 벨류 전달받아 저장 : setItem("key", "value")

      getItem - 전달받은 키에 해당하는 벨류를 전환 : getItem("key")

      removeItem - 전달받은 키에 해당하는 데이터 삭제 : removeItem("key")

      clear - 모든 데이터 삭제 : clear

로컬스토리지 : 파이어폭스에서는 저장소-로컬저장소

                     : 크롬에서는 어플리케이션-로컬스토리지

.ㅇㅇ

모달창 : https://www.youtube.com/watch?v=V08wXKHF_Xw

 

https://8naji.tistory.com/69

240502TIL 참고글

회고 - 구글링도 실력... 😂 

본격적 팀프로젝트 시작한 느낌.. 아직까지는 css를 더 많이 알게되는듯