[CSS] position (static, relative, absolute, fixed, sticky)

position요소를 배치할 기준점을 정하는 속성이다! staticHTML 요소의 기본 위치이다. position: static인 요소는 top, bottom, right, left를 지정해줘도 이동하지 않고 원래 위치에 배치된다. relative요소의 기본 위치를 기준으로 설정된 값만큼 top, bottom, right, left 방향 이동한다.position: relative;top: 50px;left: -100px; 왼쪽이 위치를 설정하지 않은 기본 상태, 오른쪽이 위 코드를 적용한 상태이다.top 에서부터 +50px만큼 좌표가 이동하고 left에서부터 -100px만큼 이동한 것을 볼 수 있다.  absolute부모 요소 중 가장 가까운 relative 요소를 기준으로 이동한다.이미지 위의 특정 위..

• format_list_bulleted HTML + CSS
• · 2024. 7. 13.
• textsms

[CSS] 선택자(Selector) 문법

자주 쓰다보면 익숙해지겠지만.. 아직은 조금 헷갈려서 CSS 선택자 문법을 정리해보았다.작성한 것들 외에도 더 활용할 수 있는 것들이 있다! 기본 선택자자식 선택자선택자의 직계 자식들을 선택하여 스타일을 적용한다..container > * { } // .container의 직계 자식 전체를 선택.container > div { } // .container의 직계 자식인 div만 선택한다. 자식 요소의 자식 중에 div가 있는 경우 해당하지 않음  자손 선택자선택자의 직계 자식을 포함하여 모든 하위 요소들을 선택한다.즉, 자식의 자식의 자식까지도 포함된다..container div { } // .container 하위의 모든 div를 선택  인접 형제 선택자선택자의 바로 다음 형제 요소를 선택한다.같..

• format_list_bulleted HTML + CSS
• · 2024. 7. 11.
• textsms

[CSS] 가상요소로 체크박스 커스텀하기 (::after, ::before)

todo list를 만들면서 기본 체크박스 디자인이 아닌 실제로 체크한듯한 느낌을 주고싶어서 체크박스 스타일에대해 찾아보았다.체크박스의 스타일을 변경하는 것으론 한계가 있어서 대부분 체크박스와 연결된 label에 요소를 추가한다고 한다.  간단 요약1) 체크박스를 보이지 않게 숨긴다.2) label 혹은 태그 내 다른 요소를 체크되지 않은 상태의 체크박스로 꾸며준다.3) 체크된 상태도 꾸며준다. 이 때 예시처럼 다른 기호, 이미지 등을 띄우고싶다면 가상요소를 활용한다.  만들어보자HTML 구조 /* 이 span을 체크박스로 만들 것이다! */${newTask}  체크박스 숨기기input[type="checkbox"] { display: none;}  체크박스 기본 상태 만들기.checkboxIcon ..

• format_list_bulleted HTML + CSS
• · 2024. 7. 5.
• textsms

[CSS] 버튼/배경에 그라데이션 색상 넣기 (linear-gradient)

todo list를 만들면서 버튼과 배경에 그라데이션을 넣고싶어 찾아보았다!linear-gradient()를 활용해 생각보다 간단하게 적용할 수 있었다.  linear-gradient()CSS에서 두개 이상의 색상이 점진적으로 변화하는 이미지를 만드는 함수다.image 의 한 종류인 gradient 타입의 객체를 반환한다. 따라서 image를 사용하는 background-image 등에 사용할 수 있다.처음엔 별생각없이 background-color에 사용했다가 적용이 안됐는데 이 이유때문이었다!  사용법linear-gradient(각도 || 방향, 색상1, 색상2, ...); 1) 각도 || 방향 (기본값: to bottom)첫 색상에서 마지막 색상까지 변화하며 이어질 방향을 지정한다. 지정하지 않을 ..

• format_list_bulleted HTML + CSS
• · 2024. 7. 4.
• textsms

[css] 자식 요소들이 일정 비율을 유지하도록 하기 (flex, flex-grow, flex-shrink)

todo list를 만들며 1) 타이틀 영역 2) 유저 입력 영역 3) 할일 목록 영역이 일정 비율을 유지하고, 목록이 영역을 넘어가도 전체 영역이 커지지 않고 스크롤하도록 하는 구조를 구성해보고 싶었다.  첫 시도처음엔 웹브라우저 크기가 달라지는 것만 생각하여 flex-grow를 활용했다..mainContainer { display: flex; justify-content: center; flex-direction: column; align-items: center;}.title { flex-grow: 1;}.userInput { flex-grow: 1;}.listBody { flex-grow: 7;}하지만 내 예상과 다른 결과가 나왔다.. 목록에 할일을 추가할수록..

• format_list_bulleted HTML + CSS
• · 2024. 7. 3.
• textsms

[CSS] 카드 Flip 효과 만들기 (transition, transform, grid)

반복을 활용하여 위와같이 메뉴와 설명을 출력하는 과제를 진행하고 있다.화면을 구성한 후에 마우스를 올렸을 때 카드가 돌아가면 재밌을 것 같아 방법을 찾아보았다!  간단 요약1) 카드의 앞면, 뒷면을 담당할 요소를 각각 만들어준다.2) rotateY로 Y축 기준 회전시켜주고, 요소가 화면에 뒷면을 보일 때는 보이지 않도록 설정한다. (hidden)3) (상황에따라 선택) 레이아웃이나 포지션을 활용해 앞면/뒷면 요소들이 같은 위치에 위치하도록 한다. 회전시키는 메서드 등은 있을 것 같았는데 앞뒷면을 별도의 요소로 제작 -> 둘을 같은 위치에 놓고 -> 회전시키면서 요소가 뒷면일 때는 보이지 않게한다는 건 떠올리지 못했다!너무 직관적으로 돌리는 것만 생각하지 말고 간접적으로 적절히 연출하는 것도 필요하다는 생..

• format_list_bulleted HTML + CSS
• · 2024. 6. 21.
• textsms