개발 감자🥔

💡display 속성 1. none: 요소를 렌더링하지 않도록 설정 -> visibility 속성을 hidden으로 설정한 것과 달리 영역도 차지하지 않는다 2 inline: block과 달리 줄 바꿈이 되지 않고, width와 height, 여백을 지정할 수 없다. 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다. 3. block: 가로 영역을 모두 차지하며 항상 줄 바꿈이 되어 새로운 라인에서 시작한다. 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다. width와 height 속성을 지정할 수 있다. 4.inline-block: 요소 자체는 inline요소처럼 동작하지만 (줄바꿈이..

💡 Position CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다. static 요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다. position: static; relative 요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다...

💡기본 선택자 전체 선택자 모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다. * { color: green; } 유형 선택자 노드 이름을 사용해 요소를 선택합니다. 즉 문서 내에서 주어진 유형의 모든 요소를 선택합니다. a { color: red; } 클래스 선택자 요소의 class 특성에 기반해 요소를 선택합니다. .red { color: #f33; } .yellow-bg { background: #ffa; } 빨간 글자색의 문단입니다. 빨간 글자색과 노란 배경의 문단입니다. ID 선택자 요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택합니다. #identified { background-color: skyblue; } 특별한 ID를 가진 요소에요! 이건 그냥..