본문 바로가기

HTML & CSS6

[HTML & CSS] Position => fixed ? sticky ? 오늘은 position 속성 중 비슷한 2가지에 대해서 자세히 포스팅을 해보려 한다. 지난번에 인스타그램을 클론코딩해보았는데, 최근에 인스타그램과 똑같은 기능을 구현해보고자하는 마음이 들었다. 그래서 스크롤바를 내려도 메뉴가 고정된 위치를 유지하고, 인스타그램의 사이드바인 "스토리 기능"과 "팔로우 추천 기능"이 스크롤바를 따라 함께 움직이는 기능을 구현해보고 싶어졌다. 그러면서 알게 된 지식들을 다시 상기시켜보고자 업로드해본다. fixed와 sticky를 사용한 완성물 위 영상을 보면 상단의 메뉴바가 고정되어 스크롤을 내려도 사라지지않는다. 또한, 오른쪽의 사이드바 메뉴는 스크롤을 따라 움직인다. sticky는 CSS의 Position의 속성으로 사용된다. Fixed가 브라우저 화면의 절대 위치를 사용.. 2022. 2. 26.
[CSS] 이미지 크기 비율에 맞게 줄이기 이미지 크기가 안맞아서 당황했던 적이 있다. 그래서 오늘은 이미지 비율을 맞추는 방법에 대해서 설명하려한다. 방법 1 ▶ 너비와 높이 중 하나만 지정해주기 : 너비(width) 또는 높이(height) 둘 중 하나만 지정하면 나머지 하나는 비율에 맞게 줄어듦 ( 만약 다른 CSS에 영향을 받는다면 나머지에 auto 명시 ) ​ 방법2 ▶ 너비와 높이 둘다 지정해주기 (1) : 너비·높이 둘 다 제한하면서 비율은 유지하고 싶은 경우 너비와 높이는 auto로 두고 max-width, max-height를 주어 크기 제한하기 ​ 방법3 ▶ 너비와 높이 둘다 지정해주기 (2) : 배경이미지로 주고 background-size: contain;를 적용하기 ​ contain => contain 값으로 지정하면, 배.. 2022. 2. 12.
[CSS]상속되는 요소 / 상속되지 않는 요소 ♥ 상속되는 프로퍼티 font-family, font-size, font-weight, line-height, visibility, opacity, color, line-height, text-align, white-space, list-style ♥ 상속이 되지않는 프로퍼티 margin, padding, border , box-sizing, display, background, vertical-align, text-ecoration, top/right/bottom/left, position, overflow, width/height ✋🏻 여기서 잠깐 !! 상속이 되지 않는 프로퍼티라고 해서 꼭 상속을 받을 수 없는 것은 ❌❌❌❌!!!! inherit을 쓰면 상속을 받을 수 있다. inherit을 써주면.. 2022. 2. 12.
< 개발자 도구 > 👌🏻 Elements panel * HTML 코드를 분석하고 실시간으로 수정할 수 있는 도구 패널 * DOM과 CSS를 자유롭게 조작하여 사이트의 레이아웃과 디자인 테스트 가능 * 변경된 사항들에 대해서는 실시간으로 웹 브라우저를 통해 확인 가능 * Style부분의 우선순위 - 하나의 요소에 여러개의 css 파일에서 스타일 적용 가능가장 - 상단부터 css 파일의 우선 순위(구체적 >>> 추상적) 에 따른 순서 (ex) !important > html에서 style을 직접지정 > #ID > .class > 태그이름 > user agent sheet ( !important는 id나 class에는 적용안됨!! ) ❗️ user agent stylesheet 란? - 브라우저의 기본 스타일 값을 의미함 - 브.. 2022. 1. 30.

티스토리툴바