CSS-7) CSS 기초 정리 5

 [line-height]

۰ line-height는 텍스트 줄 간격을 지정하는 속성이다. 이 속성은 텍스트의 줄 간격을 지정하는데 사용된다. 또한 font-size 속성과 함께 사용되며, font-size에 대한 배수로 지정된다. 

 예를 들어, line-height: 1.5;를 적용하면 텍스트의 줄 간격이 1.5배로 지정된다. 이때 font-size가 16px이라면 텍스트의 줄 간격은 24px이 된다.

[cursor]

۰ cursor 속성은 마우스 커서의 모양을 지정하는데 사용된다. 예를 들어, cursor: pointer는 마우스 커서를 손가락 모양으로 바꿔준다. 또한 cursor: auto는 브라우저가 기본적으로 제공하는 마우스 커서를 사용한다. 이외에도 default, crosshair, help 등의 다양한 값들이 있다.

[letter-spacing]

۰ letter-spacing은 글자 간격을 지정하는 속성이다. 이때, px을 값으로 주면 지정한 px만큼의 간격이 지정되고, em을 값으로 주면 font-size의 배수만큼 간격이 지정된다.

 예를 들어, font-size: 16px; letter-spacing: 2px; 을 적용하면 글자 간격이 2px로 지정된다. 그리고 font-size: 16px, letter-spacing: 0.1em;을 적용하면 글자 간격이 1.6px로 지정된다.

[position]

۰ position은 요소의 위치를 지정하는 속성이다. 이 속성은 요소를 상대적으로 또는 절대적으로 배치할 수가 있다. 이에는 다음과 같은 값들이 있다.

- static : default 값으로, 요소를 문서 흐름에 따라 배치한다.

- relative : 요소를 자신의 위치를 기준으로 배치한다.

- absolute : 요소를 parent 요소를 기준으로 배치한다.

- fixed : 요소를 뷰포트를 기준으로 배치한다.

- sticky : 스크롤 영역을 기준으로 요소를 배치한다.

[text-transform]

۰ text-transform은 텍스트의 대문자화, 소문자화, 단어의 첫 글자 대문자화 등을 지정할 수 있다. 이 속성은 대문자와 소문자를 구분하지 않는 문자열에서 유용하게 사용된다.

 예를 들어, text-transform: uppercase;를 사용하면 모든 문자가 대문자로 변환한다. 반면에 text-transform: lowercase;를 사용하면 모든 문자가 소문자로 변환한다. 또한 text-transform: capitalize;를 사용하면 각 단어의 첫 글자만 대문자로 변환한다.

[margin]

۰ margin은 요소의 네 방향 바깥 여백 영역을 설정한다. margin, margin-top, margin-right, margin-bottom, margin-left를 통해 값을 지정하며, padding의 사용 방법과 같다고 볼 수 있다.

 margin과 padding은 둘 다 css에서 박스 모델의 구성 요소이다. 이 둘의 차이점은 margin은 요소의 바깥 여백 영역을 설정하고, padding은 요소의 내부 여백 영역을 설정한다는 점이다. margin은 요소와 주변 요소 간의 간격을 조정하는 데 사용되며, padding은 요소 내부의 콘텐츠와 경계 사이의 간격을 조정하는 데 사용된다.

[background : linear-gradient]

۰ background 속성에 linear-gradient 함수를 사용하면 그라데이션 배경을 만들 수 있다. linear-gradient 함수는 시작점과 종점 색상 사이에 중간 색을 여러 개 추가하는 것이 가능하다. 이를 통해서 그라데이션의 층을 여럿으로 나누는 것도 할 수 있다.

 예를 들어, background : linear-gradient(to bottom, rgba(0,0,0,0.1) 3%, rgba(0,0,0,0), rgba(0,0,0,0), green);은 전체의 3%를 차지하는 투명한 검은색으로 시작해서 투명색을 두 번 거친 다음 green으로 나머지 값들이 채워지는 코드다. 이때, 투명한 색을 나타내는 rgba(0,0,0,0)은 transparent로 변경이 가능하다. transparent는 투명한 색상을 나타내는 CSS 속성이다.

 우선 이 정도로 첫 번째 클론 코딩이 마무리 되었다. 간단한 클론 코딩이었어서 복잡한 부분이 없었고, 반응형 웹을 만든 게 아니라 사이트의 크기가 줄어들면 납작한 무언가가 되어버리는 못생긴 모습이다. 이후에 반응형 웹을 공부하면 수정을 해봐야겠다.

"기록은 기억을 이길 수 없다" 힘내자!