728x90 SMALL CSS6 CSS에서도 이제 중첩이 된다니? – Nesting 처음 써본 후기 요즘은 자바스크립트 공부하느라 CSS를 건드릴 일이 줄어들었는데,오랜만에 스타일을 짜다가 'CSS Nesting'이라는 걸 처음 알게 되었어요. SCSS에서 중괄호 {}로 스타일을 중첩해서 작성하던 게 너무 익숙했는데,이게 이제는 순수 CSS에서도 가능하다는 걸 이제야 알게 되다니..!이미 알고 계신 분들도 많겠지만, 혹시 저처럼 몰랐던 분들을 위해 가볍게 정리해보려고 해요. 💡 CSS Nesting이란?간단하게 말하면, CSS 안에서 자식 셀렉터를 중괄호로 감싸서 중첩해서 쓸 수 있는 기능이에요.SCSS에서 아래처럼 많이들 써보셨을 거예요:.card { .title { font-weight: bold; } .desc { color: #666; }} 이제는 CSS에서도 거의 비슷하게.. 2025. 7. 31. css 속성 선택자 생각 보다 자주쓰는데 외워지지 않는 속성선택자를 기록하려고 합니다. 속성 선택자는 태그 안의 특정 속성들에 따라 스타일을 지정합니다. 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높은 스타일 지정 방식입니다. 선택자 예시 의미 [attr] [disabled] { ... } 속성 attr ( disabled )을 포함한 요소 선택 [attr=val] [type=“text"] { ... } 속성 attr ( type )을 포함하며 속성 값이 정확하게 val( text ) 인 요소 선택 (공백으로 분리된 값이 있으면 안됨) [attr~="val"] [ class ~=" small "] 'val' 이 포함 ( 공백으로 분리된 값이 정확히 일치 ) ex) class=" small btn.. 2024. 1. 2. css 우선순위 정리 CSS(Cascading Style Sheets)에서 스타일 규칙의 우선순위는 선택자의 구체성과 충돌 해결 규칙에 따라 결정됩니다. 스타일 규칙 간에 충돌이 발생할 때 어떤 스타일이 우선되는지를 결정하는 규칙이 있습니다. 1. 중요도 (Importance): !important 키워드가 지정된 스타일은 다른 모든 규칙보다 우선합니다. 그러나 !important는 되도록 사용을 피하고 유지보수를 어렵게 만들 수 있으므로 신중하게 사용해야 합니다. 2. 인라인 스타일 (Inline Styles): HTML 요소의 style 속성에 직접 지정된 스타일은 다른 모든 스타일 규칙보다 우선합니다. 3. ID 선택자 (ID Selectors): #을 이용하여 지정된 ID 선택자에 의해 스타일링된 규칙은 클래스 선택자.. 2023. 8. 7. table 기본 셋팅/border-spacing/border-collapse 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.. 2023. 7. 17. css 줄바꿈 지정하기 white-space/word-wrap/word-break 가장 많이 사용 가는 코드 / 사용 예제 바로 가기 🚀 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.. 2023. 7. 14. css로 말줄임 만들기 /ellipsis '...'/ 한줄, 두줄이상 공지사항, 게시판, 댓글 등의 기능 구현할 때 사용하게 되었던 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:.. 2023. 7. 14. 이전 1 다음 728x90 LIST
