본문 바로가기
728x90
반응형

전체 글405

입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13.
[CSS] position의 사용법 #12 위치를 내맘대로! CSS Position 이해하기 - 웹 코딩 강좌 (youtube.com)고윤서 강의 참고 (콜로소) position 속성(5 가지 속성)toprightbottomleftz-index속성 같이 쓰임기본 값 - static포지션과 쓰이는 5가지 속성은static 일 때는 적용되지 않음.속성들이 적용되기 위해서는relative를 함께 써야함.fixed = 브라우저의 "뷰포트" 기준으로 절대 위치로 이동.sticky = 평소에는 static 처럼 자리.컨테이너가 스크롤 되면서 요소가 사라질 무렵에는 위치 속성이 지정한 위치에서 고정되어 멈춤.psoition: relative원래 위치에서 상대적인 값을 추가해서 가짐position을 다주고 (기본적으로 띄우는 속성)z-index (더 띄.. 2024. 5. 13.
input 다루기 2 : 블로그 글 발행 기능 만들기 보호되어 있는 글 입니다. 2024. 5. 13.
input 1 : 사용자가 입력한 글 다루기 보호되어 있는 글 입니다. 2024. 5. 13.
props를 응용한 상세 페이지 만들기 보호되어 있는 글 입니다. 2024. 5. 12.
x-key-38btc 윈도우 연결하기 Fn + F1 / F2 / F3이렇게 있는데 Fn + F1 동시에 5초 이상 누르기= 그러면 위쪽 가운데 불빛 깜빡임확인한 후 블루투스 연결로 찾은다음 연결.참고 블로그아이노트ㅣ블루투스 키보드 X-KEY 38BTC.. : 네이버블로그 (naver.com) 아이노트ㅣ블루투스 키보드 X-KEY 38BTC(+블루투스 연결 방법)노트북이 갖고 싶었지만 아쉬운 대로 갤탭에 연결해서 쓰려고 블루투스 키보드를 구매했다! 배송 온 지 일...blog.naver.com 2024. 5. 12.
CSS 변수 사용법 5가지 중 1편 - root CSS3 - 104 [ css variables ] CSS 변수 사용법 5가지 중 1편 - 기본사용법 (youtube.com)기본 사용법동일 색깔동일 radius아이콘 색상 겹침 많음변수 안쓴 상태변수 써주기최상위에 변수 생성하기루트 선택자 사용파란색 = primary color = 변수 명색 지정해당 색상 필요한 곳에 변수명 사용한꺼번에 색 바꾸기 가능radius 도 지정변수명 만드는 규칙반드시 하이픈 2개로 시작ie 에서 먹통- 어차피 지원종료 2024. 5. 9.
HTML - data- 사용자 정의 속성 모션그래픽 디자이너 seven “감각적인 모션그래픽의 비밀, Fake 3D 애니메이션”ㅣColoso_trailer (youtube.com)실습이미지 9개사용자 정의 속성 써보기커서가 길게 들어감적기사용자 정의 속성 작성data-작명단어와 단어 조합: -값 적어줌조류 선택속성 설정이런 식으로 선택 가능 2024. 5. 9.
자식이 부모의 state 가져다 쓰고 싶을 때는 props 보호되어 있는 글 입니다. 2024. 5. 9.
728x90
반응형

티스토리툴바