CSS-6) CSS 기초 정리 4

내 마음대로 값을 바꿔가며 사이트를 클론 코딩해보는 중이다.

진행 중에 새롭게 알게 된 CSS 속성들에 대해서 조금씩 정리해 봐야겠다.

[font-family]

۰ font-family 속성은 CSS에서 사용되는 속성으로 글꼴을 지정하는 속성이다. font-family 속성은 글꼴의 이름을 지정하며 여러 개의 글꼴을 지정할 수 있다. 만약 지정한 글꼴이 pc에 없을 경우 브라우저는 기본 글꼴을 사용한다. vscode에 font-family를 입력하면 기본으로 사용할 수 있는 글꼴을 여러 개 표시해 준다. 그 이외의 글꼴을 사용하기를 원한다면, 관련 사이트에서 다른 글꼴을 다운 받아 적용시켜야 한다.

[font-weight]

۰ font-weight 속성은 글자의 굵기를 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 lighter, normal, bold, bolder 등이 있습니다. 또한 100~900과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다. 여기서 normal은 400과 같고, bold는 700과 같다. 그리고 bolder는 부모 요소보다 더 굵게, lighter는 부모 요소보다 더 얇게 표시된다.

[text-align]

۰ text-align 속성은 텍스트의 수평 방향 정렬을 설정하는 CSS 속성이다. 사용할 수 있는 속성값으로는 left, right, center, justify 등이 있다. 당연히 left는 왼쪽 정렬, right는 오른쪽 정렬, center는 중앙 정렬이고, justify는 각 줄의 너비를 동일하게 늘려서 줄을 늘린다.

[flex-wrap]

۰ flex-wrap 속성은 flex-item 요소들이 강제로 한 줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지를 결정하는 속성이다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있다.

 예를 들어, flex:wrap : wrap; 을 설정하면 flex-item 요소들이 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현된다.

[opacity]

۰ opacity는 요소의 불투명도를 설정한다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대이다. 만약 opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치하게 된다.

 예를 들어, opacity : 0.6은 불투명도를 60%로 설정한다.

[border-bottom]

۰ border-bottom 속성은 요소의 아래쪽 테두리를 설정한다. 이는 border-bottom-width, border-bottom-style, border-bottom-color 속성의 값을 설정한다. 만약 사용자가 속성을 명시하지 않는다면, 자동으로 default로 설정하고 넘어간다.

 예를 들어, border-bottom : 1px solid black은 아래쪽 테두리를 1px 두께의 검은색 실선으로 설정하는 거다.

[*]

۰ CSS에서 *는 모든 요소를 선택하는 선택자이다.

 예를 들어, * {margin: 0; padding: 0;}는 모든 요소의 margin과 padding을 0으로 설정하는 내용이다.

[box-sizing]

۰ box-sizing은 CSS 박스 모델에서 요소의 크기를 계산하는 방법을 지정한다. 기본값인 content-box는 요소의 width와 height에 content, padding, border를 더한 값이 적용된다. 반면, box-sizing : border-box;는 content와 padding, border를 포함한 값이 width와 height로 적용된다.

 예를 들어, width가 200px이고 padding이 20px, border가  5px일 때, content-box에서 요소의 실제 width는 230px(200+20+5+5)이 된다. 반면, border-box에서 요소의 width는 200px이며 padding과 border가 포함된 크기로 계산된다. 즉, padding과 border의 크기를 고려지 않아도 된다.

[padding]

۰ padding은 content와 border 사이의 공간으로, 요소의 내부 여백을 지정한다. padding은 top, right, bottom, left로 값을 지정할 수 있다.

 예를 들어, padding : 10px;은 모든 방향에 10px의 padding을 적용한다. 그리고 padding: 10vh 0 72px 72px;은 top에 10vh, right에 0, bottom에 72px, left에 72px의 padding을 적용한다. 각각 따로 지정할 경우 시계 방향으로 지정이 되는 걸로 보면 된다.

[:hover]

۰ :hover는 마우스 커서가 요소 위로 올라갔을 때의 상태를 지정하는 선택자다.

 예를 들어, a:hover {color : red;}는 a 태그 위에 마우스 커서가 올라갔을 때 해당 링크의 색상을 빨간색으로 변경한다.

 &:hover는 Sass나 Less와 같은 CSS 전처리기에서 사용하는 문법이다. 이 문법은 &뒤에 적은 값이 parent 선택자에 적용되는 것을 의미한다.

 예를 들어, .btn {&:hover {color : blue;}}는 .btn 요소에 마우스 커서가 올라갔을 때 btn 요소의 색상을 파란색으로 변경한다.

 css관련 요소들은 반복 숙달이 가장 중요한 것 같다. 위에 작성한 것 이외에도 새롭게 알게 되는 속성들이 생기면 바로바로 기록해둬야겠다.

"기록은 기억을 이길 수 없다"