실무에서 유용한 CSS 패턴 알아보기 - CSS 속성 알아보기

2024/03/03

안녕하세요 lika-7 입니다.

이번시간에는 실무에서 자주 쓰는 CSS 패턴을 정리하겠습니다.

 

display 속성

• display 속성은 HTML 요소인 인라인과 블록 요소로 나뉩니다.
  • 인라인
    • 줄바꿈이 되지 않고 크기가 내용만큼 적용 됩니다
    • <span>,<string>,<a> 등
  • 블록요소
    • width를 부모에게 상송받은 width의 100%를 사용
    • width와 상관없이 무조건 줄 바꿈이 됩니다.
    • 부모가 없는 블록 요소는 웹 브라우저 너비만큼 width가 지정 됩니다
    • <div>,<section> 등
• display 속성을 지정하여 요소를 화면에 표시하는 방법을 결정할수 있습니다.

속성값 의미

none	화면에서 사라집니다
block	부모 요소의 너비만큼 차지하며 줄 바꿈이 됩니다
inline	콘텐츠만큼 너비를 차지하며 줄바꿈 되지 않습니다. 위아래 margin 값을 사용할수 없습니다.
inline-block	콘텐츠만큼 너비를 차지하며 줄바꿈이 되지 않고, margin을 포함해 박스 모델과 관련한 모든 속성을 사용할수 있습니다.
flex	이 요소를 기준으로 플렉스 아이템으로 지정된 자식 요소를 정렬할 수 있습니다.
grid	이 요소를 기준으로 각각의 영역으로 나누어 자식 요소를 정렬할 수 있습니다.

위치 지정 position

• 요소는 작성한 순서대로 표시되지만 postion 속성을 이용해 특정 위치에 표시되게 할 수 있습니다.

static

• position 속성을 별도로 지정하지 않으면 static이 적용됩니다
• 요소의 원래 위치에 표시됩니다
• stacit으로 포지션을 지정하면 top, left, bottom, right 속성은 사용하지 않습니다.

relative

• relative 포지션은 요소의 현재 위치를 기준으로 상대 위치를 지정할 수 있습니다
• 다른 요소에 영향을 주지 않고 자신의 위치만 지정할 수 있습니다.
• 이 요소를 기준으로 자식 요소의 위치를 지정 할 수 있습니다.

absolute

• 부모 요소에 지정된 속성값 기준으로 배치합니다
  • position 속성값이 relative나 absolute, fixed, sticky인 상위 요소를 찾아서 기준으로 삼습니다.
• 부모 요소가 없다면 DOM 최상위의 body요소가 기준이 됩니다

fixed

• position 속성값을 sticky로 지정하면 특정 요소를 기준으로 배치합니다
• sticky는 부모 요소를 기준으로 고정됩니다
  • 특정 요소의 영역에서만 위치를 고정해 따라다니는 효과를 구현할 때 사용합니다

여백 지정하기

• 요소의 여백을 지정할 때는 margin, padding 속성을 사용합니다
• padding 속성은 오직 양수만 사용해야 합니다
• margin 속성에는 양수와 음수, auto 값을 지정할 수 있습니다.
  • auto 값을 지정하면 웹 브라우저가 요소의 크기(width)를 제외한 나머지 공간을 자동으로 계산하여 속성값을 지정합니다
    • margin의 좌우 값을 auto로 지정하면 (margin: 0 auto)웹 브라우저의 전체 크기에서 요소의 너비를 뺀 나머지 공간을 균등하게 나누어 배치 합니다.
      • margin: auto를 사용하려면 해당 요소의 width 값이 지정되어 있어야 합니다

    

    • 대부분 웹 사이트에서 콘텐츠를 가운데 정렬할 때 이처럼 margin의 좌우 값을 auto로 지정하는 방법을 사용합니다

마진 병합 현상

• 둘 이상의 요소를 세로로 배치 할 때 margin 속성값을 지정하면 둘 중 더 큰 값으로 합쳐지는 형상을 마진 병합이라고 합니다.
• 위에 있는 요소의 하단 margin 값과 아래쪽 요소의 상단 margin 값이 합쳐지는 현상을 의미합니다.

애니메이션 효과 지정하기

• 웹사이트의 다양한 애니메이션 효과는 모두 CSS 속성을 변경하는 방식으로 만듭니다.
• transition 속성을 사용하여 변화가 일정 기간에 걸쳐 일어나면서 다양한 애니메이션 효과를 구현할 수 있습니다.

transition-property

• transition을 적용할 css 속성명을 작성합니다

<button class="btn">버튼</button>
<style>
  .btn{
    width: 100%;
    height: 20px;
    background: #fff;
    color: #333;
    transition-property: background;
    transition-duration: 0.5s;
  }
  .btn:hover{
    width: 50%;
    background: #ddd;
  }
</style>

transition-duration

• transition-duration 속성은 트랜지션의 지속 시간을 지정합니다.

<button class="btn">버튼</button>
<style>
  .btn{
    width: 100%;
    height: 20px;
    background: #fff;
    color: #333;
    transition-property: background,width;
    transition-duration: 0.5s, 1s;
  }
  .btn:hover{
    width: 50%;
    background: #ddd;
  }
</style>

transition-timing-function

• 트랜지션 타이밍 함수를 지정합니다

수치가 변화하는 속도를 만들 수 있습니다

• 예를 들어 공을 바닥에 떨어뜨릴 때 점점 빠르게 내려가고, 지면에 닿았다가 튀어 오를 때 점점점느리게 올라옵니다. 이와 같이 움직임의 수치가 시간에 따라 변화 하는 값을 지정할수 있습니다.

<button class="btn">버튼</button>
<style>
  .btn{
    width: 100%;
    height: 20px;
    background: #fff;
    color: #333;
    transition-property: background,;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
  }
  .btn:hover{
    width: 50%;
    background: #ddd;
  }
</style>

transition-delay

• 트랜지션의 지연 시간을 지정합니다
• 예로 버튼에 마우스 포인터를 올린 후 0.2초 후에 배경색이 변경되기 시작합니다.

<button class="btn">버튼</button>
<style>
  .btn{
    width: 100%;
    height: 20px;
    background: #fff;
    color: #333;
    transition-property: background,;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.2s;
  }
  .btn:hover{
    width: 50%;
    background: #ddd;
  }
</style>  

transition 축약형

• transition: <property> <duration> <timing-function> <delay>

<button class="btn">버튼</button>
<style>
  .btn{
    width: 100%;
    height: 20px;
    background: #fff;
    color: #333;
    transition-property: background 0.2s ease-in-out 0.2s;
   
  }
  .btn:hover{
    width: 50%;
    background: #ddd;
  }
</style>