소낙눈 0



CSS : 필수 키워드 모음

CSS 작업을 위한 기본적인 여러 키워드가 정리된 문서입니다.
건의 및 수정 요청은 댓글 · 질문 카테고리 · 디스코드를 통해 가능합니다.

최종 업데이트 - 231101

타입 - 기능 - 키워드

부가 설명

타입 : 해당 키워드가 어떤 CSS 성분인지 나타내며 클릭 시 키워드에 대응되는 문서로 이동합니다.

기능 : 해당 키워드가 어떤 기능(디자인)을 수행하는지 나타냅니다.

부가 설명 : 키워드 사용 시 도움이 되는 정보입니다.

해당 키워드만 사용할 줄 아셔도 일반적인 트게더 디자인 작업에 문제 없습니다.
각 타입마다 키워드에 대응되는 MDN 문서 또는 CFT 가이드를 링크해 두니 사용법을 익히시기 바랍니다.

속성 - 요소의 배경(바탕) 변경 : background

속성(border) - 요소의 테두리 변경 : border -> outline -> box-shadow
border를 기본으로 사용하세요. 세 속성의 차이점에 대한 자세한 정보는 CXFT : 테두리를 넣는 다른 방법을 참조하세요.

속성 - 요소 둥글게(테두리 깎기) : border-radius

속성 - 요소의 텍스트 색상 변경 : color

속성 - 요소의 텍스트 폰트 변경 : font-family
반드시 변경하려는 폰트를 불러와야 합니다. 자세한 내용은 CXFT : 폰트 적용의 기초를 참조하세요.

속성 - 요소의 텍스트 크기 변경 : font-size

속성 - 요소의 텍스트 두께 변경 : font-weight

속성 - 요소의 너비 변경 : width

속성 - 요소의 높이 변경 : height

속성 - 요소의 안쪽 여백 변경 : padding

속성 - 요소의 바깥쪽 여백 변경 : margin

선언 - 요소 제거(요소 자체가 사라짐) : display: none;

선언 - 요소 숨기기(요소가 보이지 않을 뿐 공간은 차지함) : visibility: hidden;
상단의 요소 제거 선언를 사용했을 때 페이지 구조가 깨진다면 대신 사용해 보세요.

보다 구체적인 디자인을 위해 다음의 키워드를 추가적으로 활용해 보세요.
특히 요소 선택자 파트는 상호작용에 반응하는 디자인으로 트게더의 퀄리티를 높이려면 빼놓을 수 없는 부분입니다.

속성 - 요소의 투명도(불투명도) 변경 : opacity
해당 값은 불투명도를 뜻하기 때문에 0이 완전한 투명을, 1이 불투명을 나타냅니다. 가능한 값의 범위는 0~1입니다. 

속성 - 박스형 그림자 추가 : box-shadow

속성 - 필터(블러/그림자/색 반전 등) : filter

속성 - 자간 조정 : letter-spacing
자간을 줄이려면 음수 값을 사용하세요. 

속성 - 요소의 텍스트 두께 변경 : font-weight

선택자 - 다크 모드 : html.darkmode / .darkmode
트게더 다크 모드 상태의 요소를 선택할 수 있는 선택자입니다.

선택자 - 호버 및 포커스 상태의 요소 선택 : :hover / :focus
각각 가상 클래스로 호버는 요소 위에 마우스 커서가 올라갔을 때를, 포커스는 요소가 선택되었을 때를 나타냅니다.

CSS에 익숙해졌다면 이제 원하는 요소를 새롭게 만들어보세요.
요소를 새롭게 추가하는 작업을 수행할 경우 다음의 키워드가 추가적으로 사용될 겁니다.

선택자 - 가상 요소 삽입 : ::before / ::after
타겟을 부모로 하여 맨 앞의 자식으로 삽입하려면 ::before를, 맨 뒤의 자식으로 삽입하려면 ::after를 사용합니다.

선언 - 컨텐츠 추가(및 수정) : content: '···';
상단의 선택자를 통해 가상 요소를 생성하더라도 해당 선언을 통해 콘텐츠를 추가하지 않으면 페이지 트리에 추가되지 않습니다.

속성 - 요소의 표시 방식 변경 : display

속성 - 요소의 위치(정렬) 방식 변경 : position

속성 - 가로 방향 텍스트 정렬 변경 : text-align

속성 - 세로 방향 (텍스트) 정렬 변경 : vertical-align
display가 inline인 경우 사용할 수 있습니다.

간간히 사용되는 키워드로 추가적인 설명 없이 대응되는 문서를 링크합니다. calc() 함수는 익혀두면 좋습니다.

속성 - 요소 좌/우측 정렬 : float

값(함수) - 선형 그레이디언트 생성 : linear-gradient()

값(함수) - 색상 혼합 : color-mix()

값(함수) - 계산하기(계산식) : calc()

at-rule 문 - 미디어 쿼리 : @media

at-rule 문 - 외부 링크에서 CSS 불러오기 : @import url(···);