css
-
<TIL> 211207 JavaScript, CSS클래스/└ TIL 2021. 12. 7. 22:43
🐣 변수와 객체 변수는 변수를 담고 있지만, 객체는 객체의 주소를 담고 있다. a 변수를 b 변수에 대입하면 값이 복사가 되고, c 객체를 d 객체에 대입하면 주소값이 복사가 된다. (함수도 객체와 마찬가지로 주소값을 할당) Boolean 값 0, "", null, undefined, NaN은 false이다. false 같은 값이라고 하여 falsy 라고 한다. 논리연산자: 피연산자 타입에 제한없음 && => 첫번째 falsy를 반환 (하나라도 false 이면 false이기 때문에 false가 나오면 끝임, 모두 true이면 마지막 값 반환) || => 첫번째 truthy를 반환 (하나라도 true 이면 true이기 때문에 true가 나오면 끝임, 모두 false이면 마지막 값 반환) ?? (null 병..
-
<CSS> TIL: 텍스트 수정(회전, 맞춤, 배경), 화면 높이 에러무기 2021. 11. 8. 13:59
CSS 텍스트 회전 1. display 속성값을 inline-block 으로 설정한다(inline 요소는 회전 불가능). 2. transform 속성값으로 rotate 값을 대입한다(rotate === rotateZ). span { display: inline-block; transform: rotate(180deg); } CSS 문제 해결 1. Error: 화면 높이 🆖 현황 - height 속성을 100%로 맞추었지만 해당 요소의 컨테이너 밖으로 넘치게 되었음 🔑 해결방안 - header의 높이만큼 padding-bottom 속성값을 부여 .window { background-color: white; width: 80%; height: 80%; border-radius: 8px; padding-bot..
-
[Act Ⅳ] 모멘텀 클론코딩 (바닐라 JS)보스 (프로젝트)/액트 Ⅳ - Momentum-Clone (바닐라 JS) 2021. 10. 30. 22:29
노마드코더 강의를 들으며 모멘텀 클론코딩을 진행하였다. 결과물은 아래 주소에서 🚀 https://reload1bronze.github.io/ ⚔️ 주요 포인트 1. JS에서 HTML 요소 불러오기 const loginInput = document.querySelector("#login-form input"); const toDoForm = document.getElementById("todo-form"); 2. localStrorage를 이용한 데이터 저장 및 불러오기 const savedUsername = localStorage.getItem(USERNAME_KEY); function foo(e) { ... localStorage.setItem(USERNAME_KEY, username); ... } 3..
-
<Web> 밀리의 서재 클론코딩무기 2021. 10. 10. 23:27
1. HTML element 배경에 이미지 넣기 css에서 background-image 관련 property를 활용하면 배경을 이미지로 대체할 수 있습니다. background-size: cover; => 이미지의 비율을 유지한 채로 제일 크게 설정합니다. 이미지의 크기가 요소를 초과하면 이미지를 잘라내어 빈 공간이 생기지 않도록 합니다. background-position: center; => 이미지를 가운데 정렬합니다. 2. position: absolute에서 화면 중앙에 배치하기 부모 요소의 좌측 또는 상단에서 50% 만큼 띄운 후에 해당 요소의 좌표값을 50% 만큼 되돌립니다. 3. pseudo selector BEM으로 클래스가 난무하는 것이 싫을 때는 pseudo selector를 잘 활용..
-
<Web> 노마드코더 코코아클론 10일차 (CSS)무기 2021. 10. 4. 21:37
CSS 기본 설정 :root - 자주 쓰는 CSS 내용 전역변수 설정 Reset CSS 2.0 - HTML 기본 특성들 없애고 시작하기 BEM (Block Element Modifier) __ : element -- : modifier https://cssguidelin.es/#bem-like-naming CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS CSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies al..