HTML & CSS

🌱 속성 선언 순서CSS 문서의 가독성과 팀원들과의 협업을 위해 개인 또는 팀만의 규칙을 지키며 속성과 클래스명을 선언하는 것은 중요한 습관입니다.속성을 선언할 때 반드시 지켜야 하는 순서는 없지만, 일반적인 순서는 존재합니다. 세세한 순서를 지키기보다 전체적인 틀을 생각하며 작성한다면가독성 있는 문서를 작성할 수 있으며, 유지보수 시에 필요한 속성을 금방 찾아낼 수 있습니다. 개략적인 선언 순서는 다음과 같습니다.시각적/레이아웃박스 모델배경폰트 및 텍스트사용자 인터페이스그밖의 속성들  세부적인 선언 순서는 다음과 같습니다.시각적/레이아웃overflowvisibilitydisplaypositiontop/right/bottom/leftfloatclear박스 모델widthheightmarginpadding..

🌱 블록(Block), , 등의 태그가 기본적으로 가지게 되는 속성입니다.자신의 부모 요소의 너비를 100% 꽉 채워 차지하므로나머지 요소들은 다른 줄로 밀어내고 한 줄을 온전히 혼자 차지합니다..special { width: 100%; height: 30px;}.login-btn { display: block; width: 30px; height: 20px; padding: 16px 0; text-align: center;}----------------------------------------------block1block2block3로그인width와 height, margin과 padding 속성을 모두 지정할 수 있으며아래에서 살펴볼 높이와 너비값을 지정할 수 없는 inline 속..

🌱 정의CSS에서 하나의 요소에 여러 개의 스타일이 지정되어 충돌이 발생할 때, 어떤 스타일을 우선적으로 적용할 지 결정하는 규칙CSS는 Cascading Style Sheet의 약자로, Cascade(종속, 작은 폭포, 계단식)는 여기서 가장 첫 번째로 위치한 단어인 만큼 매우 중요한 개념입니다. 개발을 진행하는 과정에서 여러 선택자를 사용하여 요소의 스타일을 지정하게 되는데, 같은 요소에 여러 스타일을 적용한 경우 내가 원하는 스타일이 적용되지 않는 상황이 발생할 수 있습니다.충돌이 발생한다고 해서 에러가 나는 것은 아니고, 충돌된 스타일 중에서 우선순위 및 가중치에 따라 무시할 스타일을 정하게 됩니다.이때 캐스케이드의 개념을 이해하고 있다면 어떤 스타일이 충돌된 것인지 찾아내어 제어할 수 있습니다..

🌱 staticposition 속성은 일반적인 글의 흐름에 따라 배치되는 요소를 흐름에서 벗어나 자유롭게 배치하고 싶을 때 사용합니다.'static'은 position 속성의 기본값으로 요소를 일반적인 흐름에 따라 배치합니다.각각의 요소들은 작성되는 순서대로 우리가 글을 읽는 방향인 왼쪽에서 오른쪽으로 / 위에서 아래로 배치됩니다.특정 요소 a에 여백을 설정하면 주변 요소들도 해당 값만큼 밀려납니다. 브라우저에서 위치를 정할 때의 기준은 다음과 같습니다. 각각의 속성값을 다르게 주고 싶을 때는 아래와 같이 쓰면 되고,example1 { top: 10px; right: 15px; bottom: 8px; left: 20px;}만약 네 가지 값이 모두 같다면 inset이라는 속성을 사용하여 ..