담비의 개발블로그

국비지원교육 19일차(4주차) 본문

국비교육

국비지원교육 19일차(4주차)

담비12 2023. 12. 7. 17:27

우선 전체적인 내용은 CSS에 관련한 내용이다.


▶opacity
opacity 프로퍼티는 요소의 투명도를 정의한다.
0.0~1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미한다.


<style>
        div {
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
<img src="https://cdn.discordapp.com/attachments/820650570028154900/1171794149285048320/image.png?ex=6582e358&is=65706e58&hm=b1104d5eb1703682ad9c8b602e1153553e9ffe8a369dedc4b7c98e419b3df932&">
    </div>
</body>

Background

 


▶background-image
이미지를 계속 반복되게 설정할 수 있다.

▶background-repeat
 <style>
    body {
      background-image: url("http://poiemaweb.com/img/bg/dot.png");
      background-repeat: repeat-x;
    }
  </style>

이렇게 쓰면 x축만 반복한다.
repeat-x: x축을 계속 반복함
repeat-y: y축을 계속 반복함
no-repeat: 반복출력을 멈춤


▶background-size
-px
원본크기에 구애받지 않고 px값 그대로 설정된다. 
첫번째는 width, 두번째는 hetght값을 의미한다.
#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-size: 150px 50px;
        }

-%
지정된 %값에 비례하여 설정된다. 
첫번째 값은 width, 두번째 값은 height를 의미한다.

#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-size: 50% 50%;
        }

 


▶cover
배경이미지의 크기 비율을 유지한 상태에서 부모요소의 width,height중 큰 값에 배경이미지를 맞춘다.
이로인해 이미지의 일부가 보이지 않을 수 있다. (잘려서 보일 수 있음)

#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-size:cover;
}

▶contain
배경이미지의 크기 비율을 유지한 상태에서 부모요소의 영역에 배경이미지가 보이지 않는 부분 없이 전체가 들어갈 수 잇도록 이미지 스케일을 조정한다.

#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-size:contain;
}


▶attachment 
스크롤 할때 이미지가 고정되어 움직이지 않게 만든다.

#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-attachment :fixed;
}

▶position
이미지의 좌표를 설정할 수 있다.
기본값은 background-position: 0% 0%; 이렇게 되어있다.

background-position: top
이런식으로 쓸수 있다. 
top, center, left, right, bottom들로 쓸 수 있다.


▶color
배경 색상을 설정한다.
#size{
            height:200px;
            background-image:url("https://poiemaweb.com/img/bg/stock-photo-125979219.jpg");
            background-color: red;
}


▶모아서 쓸 때
background: color  image  repeat  attachment  position
이 순서대로 써주면 된다.

 

 

[Font]


▶font-size
기본값: 16px

#size{
            height:200px;
            font-size: 20px;
}

▶font-style/font-weight

p{
      font-style :normal; /* italic oblique 이렇게 넣을 수 있음*/
}

p{
      font-weight: 200; /*100 ~ 900 or normal / bold / lighter / bolder 넣을 수 있음 */
}

▶ line-height
div {
      line-height: 60%; /* 16px * 60% / % 말고 1.2 같이 숫자로 표현도 가능*/
    }

▶ text-align
텍스트를 정렬한다.
#center { text-align: center; }
#right { text-align: right; }
#left { text-align: left; }
#justify { text-align: justify; }


▶text-decoration 
텍스트에 밑줄, 가운데줄 등을 설정한다.
.p1 { text-decoration: overline; }
.p2 { text-decoration: line-through; }
.p3 { text-decoration: underline; }

▶ white-space
nowrap은 한줄표시가 된다.
.nowrap {
            border: 1px solid red;
            white-space:nowrap;
        }

▶ text-overflow
- clip: 영역을 벗어난 텍스트를 표시하지않는다.(기본값)
- eclipsis: 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하는 것이 아니라 말줄임표(...)를 표시한다.
.nowrap {
            border: 1px solid red;
            white-space:nowrap;
            text-overflow: eclipsis;
            overflow: hidden; /*overflow가 없으면 동작하지 않음*/
        }


▶ word-wrap
한 단어의 길이가 길어서 영역을 벗어난 텍스트의 처리 방법이다. 
.word{
word-wrap: break-word;
}

'국비교육' 카테고리의 다른 글

국비지원교육 21일차(5주차&자바스크립트)  (1) 2023.12.11
국비지원교육 20일차(4주차)  (1) 2023.12.08
국비지원교육 18일차(4주차)  (2) 2023.12.06
국비지원교육 17일차(4주차)  (2) 2023.12.05
국비지원교육 16일차(4주차)  (1) 2023.12.04
'국비교육' Related Articles more