CSS(6)
-
[TIL] 220410 - css position 속성
2022/04/10 SUN 🙏 ☑️ 코코아클론 커밋 ▹ status-bar 포지션 고정, nav-bar 화면 비율에 따라 위치 깨짐 문제 해결 필요 ☑️ 국제개발협력 에세이 완성 ☑️ 프로그래머스 스택/큐 1문제 🔛 OSSP 개선할 프로젝트 선택, w/ 간략한 계획, 이유 OSSP 공부 시작 - 빠르게 훑어보기 🔛 자료구조및알고리즘 java 스택 구현 시작 css ✔️ position - position: absolute; 해당 요소를 일반적인 요소 흐름에서 제거. 레이아웃에서 공간 배치하지 않고 새로운 레이어 위에 있게 됨. 부모 요소 중에 relative가 있어야 적용 가능, 만약 없다면 body를 relative로 본다. - position: relative; 해당 요소를 일반적이 요소 흐름에 따라..
2022.04.11 -
[TIL] 220325 - css pseudo selectors, css input 박스 클릭할 때 기본 테두리 없애는 법
🚶🏻♀️오늘 한 일 🚶🏻♀️ ☑️ kokoa cloning 3시간... 아니 왜 세 시간이나 걸렸지..??? 아놔 검색은 컴팩트하게,, 🔛 JDK - 내일 환경변수까지 마저 설정하기.. 이클립스랑 ☑️ 이코테 이진탐색 이론 + 실전문제 2문제, 떡볶이 떡 내일 다시 해결하기 BOJ Pseudo Selectors Pseudo classes: 요소의 상태, 다른 요소들과의 관계, 마우스의 위치 등으로 요소를 더 특정시킨 것. pseudo selector라 하면 이렇게 더 세부적으로 특정해서 요소를 가리키는 것 (css 에서) css selectors 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#pseudo CSS selectors..
2022.03.26 -
[til] 220322
🎶 오늘 할 일 🎶 ☑️ KokoaTalk clone ☑️ (수업) 자알 java 실습 과제 -- 실습실 🖥 코코아톡 클론 CSS - Today I learned: ✔️ input types, attributes - type="submit" value="Log In" type이 submit이면 value에 적는 값이 submit버튼 안에 쓰임. ✔️ placeholder selector: ex) #login-form input::placeholder {} login-form 안에 있는 input의 속성인 placeholder 에 적용할 css ✔️ 모든 input에 적용하되, 특정 attribute를 가진 input 만 제외 -> input:not() ex) #login-form input:not([t..
2022.03.23 -
[til] 220318 - css animations, 이코테 정렬 알고리즘
💻 오늘 한 일 💻 ☑️ 코코아톡 클론코딩 - more animations ~ no mobile media query (클론 끝) ☑️ BOJ - #7576 토마토 ☑️ 이코테 - 정렬 강의 + 예제 코코아톡 클론코딩 - animations: 더보기 @keyframes heartBeat { 0%{ color: white; } 50%{ color: tomato; transform: scale(1.3); } 100%{ color: white; } } .open-post__heart-count:hover i { will-change: transform; animation: heartBeat 1s linear infinite; } * will-change: transform ➡️ 전에는 transform ani..
2022.03.19 -
[til] 220316 -css transformations, animations, media queries
⌨️ 오늘 한 일 ⌨️ ☑️ 코코아톡 챌린지 3일차 과제 ☑️ CSS - Transformations, Animations, Media Queries 강의 ☑️ 코코아톡 클론코딩 ~splash screen animation 이코테 구현 강의+예제 OSSP 리눅스 깃 사용법 복습 CSS - Transformations, Animations, Media Queries : ✔️ semantic tag: 의미론적 태그 -> 목적/의미를 담고 있는 태그.. 예를 들어, , 등. 반대로 non semantic tag는 div 등 태그의 목적/의미보다는 시각적으로 어떻게 보여지는지를 나타내는 태그. ✔️ transform https://developer.mozilla.org/ko/docs/Web/CSS/transfo..
2022.03.17 -
[til] 220304 - position: absolute(css)
- 와 이 들어있는 가 있을 때 div의 css 에서 position: absolute; 해주면 이렇게 됨... . . . 왜??? > 해당 div의 형제인 를 사이즈 조정했는데 딱 그만큼 해당 div도 함께 자동으로 사이즈가 조절된 것 같다. position: absolute; 는 독립된 엘리먼트로서의 속성을 가지게 되므로 딱 해당 div의 child 인 ,이 차지할 크기만큼으로 바뀌게 되는 듯..
2022.03.04