[1주차 메모 정리(2)] CSS 코드의 의미와 사용

 

메모를 정리한 것이기에 순서가 뒤죽박죽으로 느껴지실 수 있습니다.

 

Cascading Style Sheets

 

CSS는 현재까지 버전 1부터 3까지 출시되었는데, 현재의 CSS3에서 숫자 3은 버전 3을 뜻한다. 가끔 왜 다음 버전이 안나올까 궁금해하기도 했는데, 수업을 들으면서 CSS는 여러 사람이 모여 하나의 표준으로 정해서 하나의 다음 버전을 만들기까지 오래걸리고 비효율적인 부분이 있기에 CSS4는 출시되지 않으며, 대신 비슷한 기능들끼리 모은 '모듈'이 나오게 되면서 현재의 CSS를 사용할 수 있게 되었고, 현재의 선택자들은 Selector라는 모듈에 있는 문법이라는 것도 알게 되었다.

 

Cascading의 의미는 아래 글에 정리해두었다.

2024.07.02 - [코드잇 프론트엔드 스프린트] - [1주차 위클리 페이퍼] CSS의 Cascading

 

이 CSS를 사용할 때는 인라인 CSS 입력, <style> 태그 내에 입력, css 파일에 입력하는 방식 중 하나를 택해서 사용하는데, 보통 HTML과 CSS만 다룰 때는 파일을 만들어서 사용한다. 

 

파일을 만들 때 css 확장자의 파일에 입력만 하는 게 아니라 HTML의 head 태그 내에 해당 파일을 링크해줘야 한다. 

<link rel="stylesheet" href="style.css"></link>

 

위 예시처럼 링크해주는데, 여기서 rel 속성은 relationship의 약자로, HTML 파일과의 관계를 나타낸다.

 

em과 rem

 

글자 크기나 박스의 크기 등을 지정할 때 px도 값을 고정할 때 자주 쓰지만, em과 rem도 자주 쓴다. 개인작업을 할 때는 반응형으로 만들다보니 필수적인 곳을 제외하고는 rem만 썼던 것 같다.

 

em은 인쇄 및 타이포그래피에서 사용되는 단위로, 대문자 M의 높이와 같은 크기를 의미한다. 왜 M을 기준으로 하냐면 활자 인쇄가 시작된 초기에 대문자 M의 높이가 가장 넓은 문자 중 하나였고 활자 크기를 정하는 데 적합했기 때문이다. 

 

또, em은 Emquadrat의 약자로 활자 주조 시 대문자 M의 정사각형 면적을 나타내는 단위였다. 그래서 em과 M은 직접적인 관계가 있게 되었다. CSS에서 em은 부모 요소의 글꼴 크기를 기준으로 하는 상대적 단위이다.

 

rem은 root em이라는 의미의 단위이며, 1rem은 최상위 태그인 HTML 태그의 글자크기와 같다. 참고로 1rem은 16px이다.

 

rgba, box-shadow, 배경과 관련된 속성

 

색상을 지정할 때 해당 색상 명칭을 그대로 사용하는 경우도 있지만, #으로 시작하는 헥스코드를 자주 쓰게 된다. 헥스코드는 빨강, 초록, 파랑으로 이루어져 있고, 각각 두 자리씩 차지하고 있다. (ex. #ff0000 -> 빨강만 최대이고, 초록과 파랑은 0)

 

rgba도 그라데이션 효과를 줄 때 자주 사용하는데, rgba에서 a는 alpha의 의미로, 0~1 사이의 소수점 숫자로 표기한다.

box-shadow: 1px 2px 9px -1px rgba(0, 0, 0, 0.2);

 

위 코드는 css의 box-shadow 속성에 rgba를 넣어 약간의 그림자를 준 코드이며, 아래처럼 적용되었다.

네비게이션 바에 그림자가 적용된 모습

 

위의 box-shadow 속성은 예시처럼 4개의 값과 rgba까지 넣을 수 있는데, 맨 앞 값부터 '1px(가로) 2px(세로) 9px(블러) -1px(그림자가 퍼지는 크기)'로 구성된다.

 

배경을 지정할 때 background-size 속성을 사용하게 되는데, 값으로 contain을 주게 되면 '이미지가 잘리지 않는 범위'에서 최대 크기로 설정을 할 수 있다.

 

또, background-image 속성을 통해 배경이미지를 지정하면서 그라데이션과 혼합하여 사용할 수 있는 방법도 있다. 

background-image: 
	linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)),
    url("pizza.png");

 

위 코드처럼 그라데이션 효과를 입히고, 배경으로 사용할 이미지를 넣으면 서로 혼합되어 좀 더 뚜렷한 효과를 얻을수도 있다.

 

박스모델 및 margin과 padding, 마진 상쇄

 

HTML 요소가 화면에 표시되는 방식을 정의하는 CSS 핵심개념 중 하나가 박스 모델인데, 총 4가지로 구성되어 있다.

• Content: 실제 콘텐츠가 포함되는 부분이며, 요소의 너비와 높이가 결정된다.
• Padding: 내용과 테두리 사이의 여백 공간이다.
• Border: 요소의 테두리이며, 별도 속성으로 두께, 스타일, 색상을 지정할 수 있다.
• Margin: 요소와 다른 요소 사이의 여백 공간이다.

margin과 padding의 값이 16px 8px이라면 세로 - 가로를 뜻하며, 10px 20px 10px 20px이라면 시계방향으로 0시-3시-6시-9시에 적용된다.

 

또, margin에서는 상쇄가 일어나는데, 두 개의 박스가 있을 때 세로 방향에서 서로의 마진이 겹치는 것을 뜻한다. 마진이 겹치는 것을 방지하려면 중간에 border를 넣거나 padding을 추가하면 된다.

 

만약 특정 부모 태그에 자식이 있고, 부모 태그에 border가 1px이라면 자식에도 똑같이 border가 있다고 보고 상쇄가 일어나지 않는 것이다. padding도 마찬가지 원리에 의한다.

 

float, inline-block, 선택자의 적용

 

float 속성은 백과사전처럼 글 옆에 이미지가 들어가 있는 방식으로 배치할 때 사용할 수 있는 속성이다. 아이템을 블록의 왼쪽이나 오른쪽에 배치할 수 있는데, 현재는 잘 사용하지 않는 속성이 되었다.

 

inline-block은 display 속성의 값 중 하나로, span 태그같은 inline 요소는 콘텐츠가 차지하는 공간만큼만 차지하기 때문에 원하는 크기를 가질 수가 없는데, inline-block 값을 적용함으로써 배치는 inline처럼 가능하지만, block처럼 크기를 가지고 싶을 때 사용한다.

 

CSS에는 여러 선택자들이 있는데, 한 개의 선택자 대신 여러 조건을 동시에 만족하는 요소를 선택하고 싶을 때 선택자들을 붙여쓸 수 있다. 이렇게 하면 구체도가 높아진다.

p.title#name

 

위 선택자는 p 태그이면서 title이라는 클래스를 가졌고 name이라는 id를 가진 요소를 가리키는 선택자이다.

 

자식 결합자도 선택할 수 있는데, 오른쪽 꺾쇠(>)를 사용하여 아래처럼 표기할 수 있다.

.article > img

 

article이라는 클래스를 가진 부모에 있는 img 태그를 가리키게 된다.

 

또, 같은 이름의 선택자인데 각각의 선택자의 자식 요소를 가리킬 수 있는 방법이 있다. nth-child() 함수를 사용하며, 괄호 안에는 숫자, 짝수(even), 홀수(odd), 2n 같은 값들이 들어갈 수 있다.

/* .footerContents의 첫 번째 자식요소 */
.footerContents:nth-child(1) {
  color: var(--color-gray-2);
}

/* .footerContents의 두 번째 자식요소의 a 태그 */
.footerContents:nth-child(2) a {
  color: var(--color-white-2);
  text-decoration: none;
}

 

위 예시처럼 자식의 자식요소까지 선택할 수 있기에 여러모로 유용한 함수이다.