DevSSOM

CSS - 주요 속성 본문

HTML, CSS

CSS - 주요 속성

데브쏨 2021. 7. 12. 22:53
반응형

width, height

특정 영역에 공간을 설정할 때 사용. 고정적인 공간을 만들고 싶을 때 px(픽셀) 단위로 표시. 고정값(px), 가변값(%). 공간을 꽉 채우고 싶다면 px 지정하는 대신에 100%를 입력하면 돼. 부모 영역 크기의 100%.

  • width : 선택한 요소의 넓이를 설정.
  • height : 선택한 요소의 높이를 설정.
<p class = "paragraph"> 프로그래밍을 배워봐요! </p>
.paragraph { width: 500px; height: 500px; }

 

font

  • font-size : 글자 크기를 바꿀 때 사용. 마찬가지로 고정된 크기를 표현할 때는 px(픽셀) 단위 입력.
  • font-family : 서체를 지정할 때 사용. 브라우저마다 지원하는 폰트가 다름. 만약에, 특정 브라우저가 A라는 폰트를 지원하지 않는다면, B라는 폰트로 대체해주기 위해서 ,(콤마)로 여러 폰트들을 입력하는게 좋음. 입력한 순서대로 우선순위를 적용. sans-serif는 모든 브라우저에서 지원하는 폰트이기 때문에 마지막에 작성하는 디폴트 값.
  • font-style : 글자의 기울기를 바꿀 때 사용.
  • font-weight : 글자의 굵기를 적용할 때 사용. 100단위로 올라가서 100 ~ 900 사이의 숫자를 입력할 수 있음. 숫자가 클수록 폰트가 굵어짐.
<p class="paragraph"> 즐거운 웹프로그래밍 </p>

.paragraph {
  font-size: 50px;                   /* 글자 크기 */
  font-family: Arial, sans-serif;    /* 글꼴 */
  font-style: italic;                /* 글자 기울기 */
  font-weight: bold;                 /* 글자 두께 */
}

 

 

border

특정 공간의 테두리를 만들고 싶을 때 사용.

  • border-style : 만들어진 테두리를 실선으로 할지, 점선으로 할지 선에 대한 종류를 정할 때 사용. 실선 : solid, 점선 : dotted.
  • border-width : 만들어진 테두리의 굵기. 보통 px 고정값을 많이 사용.
  • border-color : 만들어진 테두리의 색상을 정할 때 사용.

border-style, border-width, border-color는 border라는 속성 하나로 한 줄로 간단하게 퉁칠 수 있음. 주석처럼 한 줄에 이어 쓸 수 있어. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함. 순서는 상관 없음.

<p class="paragraph"> 즐거운 웹프로그래밍 </p>

.paragraph {
  width: 500px;
  height: 500px;
  border-style: solid;
  border-width: 10px;
  border-color: red;
  /* border: solid 10px red; */
}

 

background

특정 영역 안에서 배경 이미지나 색상을 넣을 때 사용.

  • background-color : 배경 색상 지정할 때.
  • background-image : 이미지를 넣을 때. url 괄호 안에다가 (이미지 경로) 넣어야 함. 경로에는 이미지의 확장자명도 같이 입력해야 함.
  • background-repeat : 이미지에 대한 반복 효과를 지정할 때 사용. x축으로 반복 : repeat-x, y축으로 반복 : repeat-y, 반복하고 싶지 않을 땐 : no-repeat
  • background-position : 특정 공간 안에 들어갈 이미지의 위치를 지정할 때 사용. 할 때. top(상단 정중앙), bottom(하단 정중앙), center(정 가운데), left, right(좌우 정중앙) 등으로 공간 안에서 이미지의 좌표를 변경.

background도 background 속성 하나로 정리할 수 있어. 쉼표는 생략하고 순서 상관없이 속성값들을 이어서 써주면 됨.

<p class="paragraph"> 즐거운 웹프로그래밍 </p>

.paragraph {
  background-color: yellow;
  background-image: url(이미지 경로);
  background-repeat: no-repeat;
  background-position: left;
  /* background: yellow url(이미지 경로)
                 no-repeat left; */
}

 

 

 

연습문제

.paragraph의 넓이와 높이를 500px, 배경색은 yellow로, 폰트는 크기 50px, 굵게, 이탤릭체로 설정. 글꼴은 Times, Arial, sans-serif로 설정.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 1</title>
  
  <style>
    .paragraph {
      width: 500px;
      height: 500px;
      background-color: yellow;
      font-size: 50px;
      font-style: italic;
      font-weight: bold;
      font-family: Times, Arial, sans-serif;
    }
  </style>
  
</head>
<body>
  
  <h1 class="paragraph">Nice to meet you</h1>
  
</body>
</html>

 

 

728x90
반응형
저작자표시

'HTML, CSS' 카테고리의 다른 글

CSS - 레이아웃에 영향을 미치는 속성  (0) 2021.07.15
CSS - 마진 병합 현상  (0) 2021.07.14
CSS - 박스 모델  (0) 2021.07.13
CSS - 캐스케이딩  (0) 2021.07.11
CSS - 속성의 상속, 부모 자식 관계  (0) 2021.07.10
CSS - 선택자  (0) 2021.07.10
CSS - CSS 개념과 연동 방법  (0) 2021.07.09
'HTML, CSS' 관련 글 more
댓글