CSS

color / background-colorcolor : 글자 색background-color : 배경 색가운데 정렬참고 링크: 링크텍스트HTML & CSS 연결

우선 내가 만들려고 했던 페이지는 이 페이지이다.내가 헷갈렸던 부분들을 정리해서 나만의 것으로 만들어보자!

하나의 아이템 박스를 flex items들이 공유한다.부모 관점에서 바로 밑의 자식들의 레이아웃을 조절하는 것이다. ⭐️ 밑에 나오는 속성들은 전부 부모 요소 (flex-container)에 적용 ⭐️💡 display: inline 대신 display: flex를 사

✔️ 내가 원하는 것!img라는 이미지를 초록색 박스의 위치로 이동 시키는 것이다.그 전에 사용했던 방법은 negative margin을 사용하였고 이 방법은 실제로 이미지가 이동하는 게 아니라 이동한 것 처럼 보이게 했었다.그렇다면 실제로 이미지를 이동시키고 싶으면

💡 스태킹 컨텍스트z-index가 작동되는 기준점 ❗️ 스태킹 컨텍스트가 지정이 안되어있으면 --> 최 상위 요소 : HTML➡️ HTML상에서 꼴찌== position:absolute 와 컨테이닝 블록과의 관계와 비슷함!❗️부모에게 스태킹 컨텍스트가 있는지 없는지

1분 코딩 블로그 참고💡 Flex vs GridFlex는 한 방향 레이아웃 시스템이고 (1차원)Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원)➡️ Flex보다 더 복합적인 레이아웃 표현이 가능➡️ grid에서 auto는 flex에서 grow와 비슷하다.컨텐

부모 기준에서 자식 기준에서 (grid-item)\--> ❗️ grid-item은 무조건 정해진 위치(grid-container) 안에서만 움직인다. (flexbox와 다름)❗️ 독립적으로 원룸 내에서의 일➡️ parent와 children은 독립적이고 children

transform >💡transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성 transform은 transition이나 animation과 함께 사용하여 더 다채로운 애니메이션 효과를 만들 수 있다. ❗️ 변형 가능한 요소만 tr

원래는 시멘틱 마크업, 시각적인 덩어리 (레이아웃)을 위해 마크업이 있었지만 form 요소들은 서버에 데이터를 보내기 위해 작성된 마크업이다. (기능!)➡️ 사용자가 입력한 데이터를 서버로 전송하기 위한 컨테이너 역할을 한다.💡 주요 속성actionmethodacti

https://tailwindcss.com/docs/installation/using-postcss Tailwind 공식 문서를 차근차근 따라가면 된다.만약 에러가 뜬다면 npm init -y로 세팅 초기화 하고 다시 실행해보기!이 코드를 진행하면 packag

테일윈드는 Bootstrap 같은 프리 빌트인 (Pre Built-in) 컴포넌트 방식과 달리 유틸리티 기반(Utility-first) 개발 방식을 제공한다. ➡️ 즉, 완제품 형태가 아니라 필요한 부품을 조립하는 방식으로 사용자 입맛에 맞게 커스터마이징 할 수 있음(

margin이란 요소의 바깥 여백 영역을 설정하는 css 속성이다.특정 요소에 margin 값을 지정했을 때 의도치 않게 여백이 줄어들었거나, 늘어났거나 내가 원하는 방향으로 여백이 생기지 않아 곤란한 적이 많았다.이에 대한 이유를 못찾고 한참 헤맸는데 이를 마진 상쇄