25.03.26 (수) 32일차 CSS

허배령·2025년 3월 26일

괴발개발 TIL

목록 보기

40/54

글자 관련 스타일

color : 글자 색을 지정하는 속성

색상명 (영문) | 16진수 숫자 RGB(#fff, #ffffff)
rgb (255, 255, 255) | rgba(255, 255, 255, 1)
hsl (360, 100, 100) | hsla(360, 100, 100, 1)

rgb(빨강 (Red), 초록(Green), 파랑(Blue))

hsl(색상(Hue), 채도(Saturation), 명도(Lightness))

rgba/hsla에서 a(Alpha)는 투명도 (0 : 투명 , 1 : 불투명)
0 ~ 1 까지

6개의 색상 지정 방법은 색과 관련된 모든 css 속성에서 사용 가능
  <ul id="color-ul">
    <li>색상명으로 지정</li>
    <li>16진수 rgb로 지정</li>
    <li>rgb로 지정</li>
    <li>rgba로 지정</li>
    <li>hsl로 지정</li>
    <li>hsla로 지정</li>
  </ul>
# CSS

/* color 속성 */

#color-ul > li {
  font-size: 24px;
  font-weight: bold;
}

#color-ul > li:nth-child(1) {
  color: red;
}

#color-ul > li:nth-child(2) {
  color: #872c91;
}

#color-ul > li:nth-child(3) {
  color: rgb(50, 100, 150);
}

#color-ul > li:nth-child(4) {
  color: rgba(50, 100, 150, 0.3);
}

#color-ul > li:nth-child(5) {
  color: hsl(360, 100%, 50%);
}

#color-ul > li:nth-child(6) {
  color: hsla(360, 100%, 50%, 0.5);
}

텍스트에 줄을 긋는 속성

  <ul id="deco-ul">
    <li>아랫줄 긋기</li>
    <li>중간 긋기</li>
    <li>윗줄 긋기</li>
    <li>
      <a href="#">줄 없애기</a>
    </li>
  </ul>

# CSS

/* text-decoration */
#deco-ul > li:nth-child(1) {
  text-decoration: underline;
}

#deco-ul > li:nth-child(2) {
  text-decoration: line-through;
}

#deco-ul > li:nth-child(3) {
  text-decoration: overline;
}

#deco-ul > li:nth-child(4) > a {
  text-decoration: none;
}

글자를 정렬하는 속성

text-align : 왼쪽, 가운데, 오른쪽, 양쪽
** Inline 에서만 가능 (가로 일자만)

    <div id="align-test">
      <p>안녕하세요? 오늘 점심 뭐 먹지?</p>
      <p>안녕하세요? 오늘 점심 뭐 먹지?</p>
      <p>안녕하세요? 오늘 점심 뭐 먹지?</p>

      <p>Hello world! Hello world! Hello world! 
         Hello world! Hello world! Hello world! 
         Hello world! Hello world! Hello world!
      </p>
    </div>

# CSS

/* text-align */
#align-test {
  width: 550px;
  border: 2px solid black;
}

#align-test > p:nth-child(1) {
  text-align: left; /* 기본값 */
}

#align-test > p:nth-child(2) {
  text-align: right;
}

#align-test > p:nth-child(3) {
  text-align: center;
}

#align-test > p:nth-child(4) {
  text-align: justify;
}

줄 간격(장평)을 지정하는 속성

줄 사이 간격을 벌리는게 아니라
한 줄의 높이를 지정한 만큼 저장하는 속성

<div id="line-test">
   <p>
        동해물과 백두산이 마르고 닳도록<br>
        하느님이 보우하사 우리나라 만세<br>
        무궁화 삼천히 화려 강산<br>
        대한사람 대한으로 길이 보전하세
    </p>
</div>

# CSS
/* line- height */
#line-test > p:last-child {
  line-height: 30px;
}

글자를 요소 정중앙에 배치하기

<div id="center-test">
  <span>정중앙</span>
</div>

# CSS
/* center */
#center-test {
  width: 200px;
  height: 200px;
  border: 1px solid black;

  text-align: center;
}

#center-test > span {
  line-height: 200px;
  /* 요소 높이와 동일한 line-height 설정으로
    글자 세로 중앙 정렬 */
}

글자 사이 간격(자간) 지정 속성

letter-spacing
<p id="letter-test">Hello world!!!</p>
# CSS
/* letter-spacing */
#letter-test {
  letter-spacing : 10px;
}

텍스트에 그림자 효과 추가하는 속성

text-shadow

<div id="shadow-test">
	<p>HTML5</p>
	<p>HTML5</p>
    <p>HTML5</p>
    <p>HTML5</p>
</div>

# CSS
/* text-shadow */
#shadow-test {
  background-color: black;
  padding: 30px;
}

#shadow-test > p {
  font-size: 75px;
  font-weight: bold;
}

#shadow-test > p:nth-child(1) {
  color: orange;
  text-shadow: 3px 3px white;
  /* 텍스트를 기준으로
     오른쪽으로 3px 아래쪽으로 3px
     흰색으로 표현 */
}

#shadow-test > p:nth-child(2) {
  color: white;
  text-shadow: 5px 5px 5px #bbb;
  /* 오른쪽으로 5px 아래쪽으로 5px
     5px 정도 흐리게 퍼져라
     #bbb가 색상 */
}

#shadow-test > p:nth-child(3) {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0px 0px 10px magenta;
}

#shadow-test > p:nth-child(4) {
  text-shadow: 0px 0px 4px #ccc,
               0px -5px 4px #ff3,
               2px -10px 6px #fd3,
               -2px -15px 11px #f80,
               2px -20px 18px #f20
}

변형 관련 스타일

<h1>2차원 변형</h1>

  <h3>좌우로 움직이기</h3>
  <img src="../../images/cats/cat1.jpg"
  class="trans-x-2d">

  <h3>상하로 움직이기</h3>
  <img src="../../images/cats/cat2.jpg"
  class="trans-y-2d">

  <h3>대각선으로 움직이기</h3>
  <img src="../../images/cats/cat1.jpg"
  class="trans-xy-2d">

  <h3>가로방향 확대/축소</h3>
  <img src="../../images/cats/cat2.jpg"
  class="trans-x-scale-2d">

  <h3>세로방향 확대/축소</h3>
  <img src="../../images/cats/cat5.jpg"
  class="trans-y-scale-2d">

  <h3>대각선 확대/축소</h3>
  <img src="../../images/cats/cat1.jpg"
  class="trans-scale-2d">

  <h3>요소 회전</h3>
  <img src="../../images/cats/cat2.jpg"
  class="trans-rotate">

  <hr>
  <h1>변형 사이에 지연 시간 추가하기(transition)</h1>
  <div class="box test1"></div>
  <hr>
  <div class="box test2">여기가 위쪽</div>
  <hr>
  <div class="box test3">여기가 위쪽</div>
  <hr>
  <div class="box test4">여기가 위쪽</div>
  <hr>

# CSS
img {
  width: 250px;
}

/* 좌우 이동 */
.trans-x-2d:hover {
  transform: translateX(100px);
}

/* 상하 이동 */
.trans-y-2d:hover {
  transform: translateY(100px);
}

/* 대각선 이동 */
.trans-xy-2d:hover {
  transform: translate(100px, -100px);
}

/* 가로방향 확대/축소 */
.trans-x-scale-2d:hover {
  transform: scaleX(2);
}

/* 세로방향 확대/축소 */
.trans-y-scale-2d:hover {
  transform: scaleY(2);
}

/* 대각선 확대/축소 */
.trans-scale-2d:hover {
  transform: scale(2, 2);
  margin: 150px 150px;
}

/* 요소 회전 */
.trans-rotate:hover {
  transform: rotate(180deg);
}

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  border: 1px solid black;
}

.test1:hover {
  background-color: yellow;
  transition-duration: 1s;
}

.test2:hover {
  transform: rotate(360deg);
  background-color: skyblue;

  /* 테두리 모서리 곡률 지정 */
  border-radius: 50%;
  transition-duration: 3s;
}

.test3 {
  transition-duration: 5s;

  transition-timing-function: ease-in-out  ;
  /*
  ease(기본값) : 처음과 끝이 부드럽게 변화
  linear : 등속
  ease-in : 천천히 시작해서 -> 빠르게 끝남
  ease-out : 빠르게 시작해서 -> 천천히 끝남
  ease-in-out : 천천히 시작 -> 빠르게 진행 -> 빠르게 끝남
  */
}

.test3:hover {
  background-color: yellowgreen;
  transform: rotate(720deg);
}

.test4 {
  transition-delay: 2s;
}

.test4:hover {
  transform: translateX(100px);
}