티스토리 뷰

JAVA

CSS 주요 속성

코린이도이 2023. 10. 7. 14:52

width, height

  • width 속성: 선택한 요소의 넓이를 설정 고정값(px), 가변값(%)
  • height 속성: 선택한 요소의 높이를 설정

font

  • font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 마지막에 작성하는 디폴트 값
  • font-weight: 100~900 사이의 숫자를 입력할 수도 있음.

border

  • border-style
    실선: solid
    점선: dotted
  • 주석과 같이 한 줄에 이어 쓸 수도 있음
  • 이때, 쉼표는 작성하지 않고 띄어쓰기만 함

background

  • background-repeat
    x축으로 반복: repeat-x
    y축으로 반복: repeat-y
    반복하지 않음: no-repeat
  • background-position
    공간 안에서 이미지의 좌표를 변경할 때
    top, bottom, center, left, right 등

지시사항 1

  1. .paragraph의 넓이와 높이를 500px로 설정합니다.
  2. 배경색은 green으로 설정합니다.
  3. 폰트는 크기 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: green;

        font-size:50px;
        font-family:Times, Arial, sans-serif;
        font-style: italic;
        font-weight: bold;

    }
  </style>
  
</head>
<body>
  
  <h1 class="paragraph">Nice to meet you</h1>
  
</body>
</html>

 

지시사항 2

  1. 테두리는 실선(solid) 형태로, 두께는 2px, 색상은 빨간색으로 설정합니다.
  2. 배경색은 노란색으로, 배경 이미지는 엘리스 로고 그림으로, 이미지 반복없이(no-repeat), 가운데(center) 정렬로 설정합니다.
  3. 이미지 파일명은 elice_logo.png 입니다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 2</title>
  
  <style>
    
    .paragraph {
      width: 500px;
      height: 500px;
      background-color: yellow;
      
      font-size; 50px;
      font-weight: bold;
      font-style: italic;
      font-family: Arial, times, sans-serif;
      
      border: solid 2px red;
      background-image: url(elice_logo.png);
      background-repeat: no-repeat;
      background-position: center;
      
    }
    
  </style>
  
</head>
<body>
  
  <h1 class="paragraph">Nice to meet you</h1>
  
</body>
</html>
저작자표시

'JAVA' 카테고리의 다른 글

움직이는 웹사이트 제작(Transition, Animation)  (0) 2023.10.17
웹사이트 레이아웃  (0) 2023.10.08
캐스케이딩  (0) 2023.10.07
CSS 속성의 상속  (0) 2023.10.07
CSS 선택자  (0) 2023.10.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함