CSS

html의 br 태그는 텍스트 안에 줄바꿈을 생성합니다. 그런데 PC 화면에서는 줄바꿈이 필요했지만, 작은 화면에서 줄바꿈을 하면 스크롤이 길어지는 문제로 해당 기능을 없애고 싶은 경우가 있을 수 있습니다. 예를 들어, PC 화면인 경우에는 아래와 같이 br 요소가 포함된 텍스트를 그대로 배치하지만태블릿 화면인 경우, br 요소가 줄바꿈 기능을 하지 않게 만들고 싶은 상황입니다.이때 제가 잊고 있던 기본적인 내용만을 활용하여 이를 해결할 수 있습니다.  태그에도 class를 적용할 수 있습니다.너무 당연한 이야기지만 이상하게 br 태그에는 적용할 생각을 하지 못했습니다. 간단한 방법으로 br 태그의 display 속성을 none으로 설정하면 br 태그는 줄바꿈을 하지 않습니다. 하지만 더 나아가 줄바꿈 ..

기본 스타일에서 display를 어떤 속성으로 설정하고, 미디어 쿼리에서 해당 속성을 제거하려면 display 속성을 초기값으로 설정해야 합니다.display 속성의 초기값은 block입니다.따라서, 특정 미디어 쿼리에서 display: block을 설정하면 기본 스타일이 적용되지 않게 됩니다. 예를 들어, display를 flex로 설정한 뒤에 미디어 쿼리에서 flex를 적용하고 싶지 않다면,아래와 같이 display를 block으로 변경해주면 됩니다./* 기본 스타일 - 데스크탑 기준 */nav { display: flex; /* 기본을 flex 속성으로 지정 */ padding-left: 32px; padding-right: 32px;}/* Tablet: 1199px 이하 */@media s..

🌱 속성 선언 순서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 속..