자주 쓰이는 CSS 속성들

 

 

 

 

 

프로젝트를 만들면서 자주 쓰였던 CSS 속성들을 정리해 보았습니다. 😊

 

 

 

 

 

 

 

1. 커서가 요소 위에 있을 때 속성값 변경

 

웹페이지를 이용할 때 사용자가 현재 어떤 요소를 바라보고 있는지 알 수 있도록 하는 것은 UX(사용자 인터렉션)에서 중요한 부분입니다. 사용자의 커서가 텍스트, 버튼, 링크 등을 가리킬 때 색상을 다르게 지정해 준다든지, 크기가 커지도록 한다든지 등 변화를 주면 사용자의 웹페이지 이용에 대한 만족감을 높일 수 있습니다.

 

:hover

:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.

 

 

📝 예제

button {
  color: black;
  transition: color .5s;
}

/* "호버링" 중인 <button> 요소 선택 */
button:hover {
  color: grey;
}

버튼에 커서를 올리면 black이었던 버튼의 색상이 grey로 변환됩니다.

 

 

:hover 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스(:link, :visited, :active)가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link - :visited - :hover - :active)를 따라 :hover 규칙을 :link와 :visited 뒤, :active 앞에 배치하세요. 

 

 

 

 

 

2. 요소의 테두리 설정

 

border

CSS border 단축 속성은 요소의 테두리를 설정합니다. border는 단축 속성으로서 border-width, border-style, border-color 속성을 포함합니다.

 

 

📗 구문

/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

/* 전역 값 */
border: inherit;
border: initial;
border: unset;

 

📝 예제

.container {
  border: 2px solid black;
}

class 이름이 container인 요소의 테두리가 위와 같이 설정됩니다.

 

 

 

 

 

3. 요소 중앙 정렬

 

CSS를 작성하다 보면 요소를 중앙 정렬하고 싶은 경우가 많습니다. 요소의 종류에 따라 사용할 수 있는 다양한 방법들을 알아봅시다.

 

position, transform

 

📝 예제

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

요소에 position: absolute;를 주어 요소의 위치 지정 조상 요소로부터 위에서 50%, 왼쪽에서 50% 떨어지게 하면 정렬하려는 요소의 좌측 모서리가 중앙에 오게 됩니다. 이 때에는 translate(-50%, -50%);을 적용하여 요소를 중앙 정렬할 수 있습니다.

 

 

line-height

아이콘을 중앙 정렬할 때 간단히 사용할 수 있는 방법입니다. 아이콘을 <span>으로 감싼 후 해당 요소의 부모 요소 height 값과 동일한 값을 해당 요소의 line-height 값에 적용시켜 줍니다. 

 

 

text-align

주로 텍스트 요소(inline, inline-block)일 때 사용합니다. 중앙 정렬하려는 요소의 부모 요소에 text-align: center;를 적용해주면 됩니다.

 

 

flex 사용

중앙 정렬하려는 아이템의 상위 요소를 flexbox로 설정하고, justify-content와 align-items 속성값을 center로 지정해주면 아이템을 중앙 정렬할 수 있습니다.

 

 

 

** 정렬 시 주의하기 **

요소를 원하는 위치에 정렬하기 위해서는 해당 요소의 상위 요소 너비와 높이를 알맞게 지정해 주어야 합니다. 예를 들어 상위 요소의 너비와 높이가 100%가 아닌 상황에서 justify-content: center를 적용한다면 하위 요소는 화면의 중앙에 위치하지 않을 것입니다. 이러한 경우에는 중앙 정렬하려는 요소의 모든 상위 요소의 width, height 값을 100%로 지정해 주어야 합니다. 그래야만 어느 요소를 기준으로 정렬할 것인지를 브라우저가 알 수 있습니다. 퍼센트(%)를 사용하는 방법도 있지만 조금 더 간편한 방법이 있습니다. 바로 vw, vh 입니다. 전자는 viewport width이고 후자는 viewport height입니다. 이 둘은 상위 요소의 width, height와 상관없이 해당 요소의  width, height을 보이는 뷰에서 100% 사용하겠다는 뜻입니다.

 

 

 

 

 

4. 텍스트 정렬

 

text-align 속성을 사용하여 텍스트를 왼쪽 / 오른쪽 / 가운데 / 양옆으로 정렬할 수 있습니다. (테두리 기준)

 

 

📝 예제

div {
  text-align: left;  // 왼쪽 정렬
  text-align: right;  // 오른쪽 정렬
  text-align: center;  // 가운데 정렬
  text-align: justify;  // 양옆 정렬
}

 

 

 

 

 

5. a 태그의 밑줄 제거

 

a 태그는 주로 하이퍼링크와 함께 쓰이는데 하이퍼링크를 생성하면 기본적으로 텍스트에 밑줄이 나타납니다. 이 밑줄을 text-decoration 속성을 이용하여 없애줄 수 있습니다.

 

 

📝 예제

a {
     text-decoration: none;
}

text-decoration 값을 none으로 지정해주면 하이퍼링크의 밑줄이 사라집니다.

 

 

 

 

 

6. ul 요소의 • 기호 제거

 

ul (순서가 없는 리스트) 요소는 기본적으로 • 기호와 함께 나타납니다. • 기호는 리스트임을 분명히 명시하지만 원치 않는 경우에는 • 기호를 없애고 싶을 때가 있습니다. list-style 속성을 이용하면 됩니다.

 

 

📝 예제

ul {
    list-style: none;
}

list-style 값을 none 으로 지정해주면 • 기호가 사라집니다.

 

 

 

 

 

7. 텍스트 흐리게 하기

 

텍스트를 흐리게 하고 싶을 때 텍스트의 색상을 회색과 같은 색상으로 지정해줄 수도 있지만 텍스트 자체를 흐리게 할 수도 있습니다. opacity 속성을 이용해주면 됩니다.

 

 

📝 예제 

span {
    opacity: 0.7; 
}

 

opacity 속성값은 0 - 1 사이의 값으로, 0은 투명한 값이고 1은 텍스트의 기본값입니다. 

 

 

 

 

 

8. 영문을 소문자 / 대문자로 변경

 

CSS를 통해 영문을 소문자 또는 대문자로 변경할 수 있습니다. text-transform 속성을 이용하면 됩니다.

 

 

📝 예제

h1 {
    text-transform: lowercase; // 소문자
    text-transform: uppercase; // 대문자
}

 

 

 

 

 

9. 버튼의 경계선 제거

 

border 속성과 outline 속성으로 원치 않는 버튼의 경계선을 없앨 수 있습니다.

 

 

📝 예제

button {
    border: none;
    outline: none;
}

 

위와 같이 지정해주면 버튼의 경계선이 제거됩니다.

 

 

 

 

 

10. 특정 화면 크기에서 요소 재배치 (Media Query)

 

반응형 웹 페이지를 만들 때에는 화면 크기에 따라 요소를 재배치하는 것이 중요합니다. 예를 들어 화면의 너비가 300px보다 작을 때에는 margin-top을 5px로 지정해주는 코드를 봅시다. 

 

 

📝 예제

@media screen and (max-width: 300px) { 
   .box {
     margin-top: 5px;
   }
}

media query에 제한을 두고 싶은 스크린 크기를 지정해 주고 내부에 선택자의 속성값을 지정해주면 됩니다.

 

 

 

 

 

 

 

 

다음 포스트에서는 CSS의 꽃이라고 불리는 Flex Box에 대해 알아 보겠습니다. 🌻