디자인과 개발 그 사이

요즘은 자바스크립트 공부하느라 CSS를 건드릴 일이 줄어들었는데,오랜만에 스타일을 짜다가 'CSS Nesting'이라는 걸 처음 알게 되었어요. SCSS에서 중괄호 {}로 스타일을 중첩해서 작성하던 게 너무 익숙했는데,이게 이제는 순수 CSS에서도 가능하다는 걸 이제야 알게 되다니..!이미 알고 계신 분들도 많겠지만, 혹시 저처럼 몰랐던 분들을 위해 가볍게 정리해보려고 해요. 💡 CSS Nesting이란?간단하게 말하면, CSS 안에서 자식 셀렉터를 중괄호로 감싸서 중첩해서 쓸 수 있는 기능이에요.SCSS에서 아래처럼 많이들 써보셨을 거예요:.card { .title { font-weight: bold; } .desc { color: #666; }} 이제는 CSS에서도 거의 비슷하게..

생각 보다 자주쓰는데 외워지지 않는 속성선택자를 기록하려고 합니다. 속성 선택자는 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다. 선택자 예시 의미 [attr] [disabled] { ... } 속성 attr ( disabled )을 포함한 요소 선택 [attr=val] [type=“text"] { ... } 속성 attr ( type )을 포함하며 속성 값이 정확하게 val( text ) 인 요소 선택 (공백으로 분리된 값이 있으면 안됨) [attr~="val"] [ class ~=" small "] 'val' 이 포함 ( 공백으로 분리된 값이 정확히 일치 ) ex) class=" small btn..

CSS(Cascading Style Sheets)에서 스타일 규칙의 우선순위는 선택자의 구체성과 충돌 해결 규칙에 따라 결정됩니다. 스타일 규칙 간에 충돌이 발생할 때 어떤 스타일이 우선되는지를 결정하는 규칙이 있습니다. 1. 중요도 (Importance): !important 키워드가 지정된 스타일은 다른 모든 규칙보다 우선합니다. 그러나 !important는 되도록 사용을 피하고 유지보수를 어렵게 만들 수 있으므로 신중하게 사용해야 합니다. 2. 인라인 스타일 (Inline Styles): HTML 요소의 style 속성에 직접 지정된 스타일은 다른 모든 스타일 규칙보다 우선합니다. 3. ID 선택자 (ID Selectors): #을 이용하여 지정된 ID 선택자에 의해 스타일링된 규칙은 클래스 선택자..

table를 그냥 만들면 칸마다 공간이 생긴다. 이를 없애기 위해 기본으로 넣어두는 값이 있다. 바로 아래 두가지 이다. border-spacing: 0; border-collapse: collapse; html 제목 제목 제목 가로 합친 제목 세로 합친 내용 내용 내용 가로 합친 내용 내용 내용 내용 내용 css .table { border-spacing: 0; border-collapse: collapse; } .th, .td { padding: 5px; border: solid 1px #000; text-align: center; font-weight: 400; } 결과 border-collapse는 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 어떻게 처리할 지 결정 border-s..

가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀 white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 지정 normal : 글자 줄이 자동으로 바뀜, 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀜 (기본 값) nowrap : 줄 바꿈이 실행되지 않음 즉, 콘텐츠가 다음 줄로 바뀌지 않고 한줄로 표현 pre : HTML원본 텍스트 그대로 표시, !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원 pre-wrap : HTML원본 텍스트 그대로 표시하지만, 영역내 줄 바꿈을 인식 pre-line : 문자를 기준으로 줄을 나눔 css .box {width: 200px; padding: 10px; border: solid 1px #000;} .normal {white-spac..

공지사항, 게시판, 댓글 등의 기능 구현할 때 사용하게 되었던 CSS 속성 중 하나인, 넘치는 글 숨기기 한줄 말줄임 html 신사숙녀 여러분 안녕하세요! css .boxStyle{ display: inline-block; width: 200px; padding: 10px; border: solid 1px #000; } .ellipsis{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } overflow: hidden; : 박스에서 넘쳐난 텍스트 숨기기 white-space: nowrap; : 줄바꿈이 없어짐 text-overflow: ellipsis; : ... 말줄임 효과 word-break:..