웹 개발/HTML & CSS

웹사이트의 디자인

2^7 2022. 10. 12. 14:21

웹사이트의 디자인

캐스케이딩 

CSS의 우선순위를 결정하는 3가지 요소 : 순서, 디테일, 선택자

  • 순서에 의한 캐스케이딩 : 나중에 적용한 속성 값의 우선순위가 높음
  • 디테일에 의한 캐스케이딩 : 더 구체적으로 작성된 선택자의 우선순위가 높음
  • 선택자에 의한 캐스케이딩 : stlye > id > class > type 순으로 우선순위가 높음
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 우선 순위</title>
  <style>
    p {
        color: blue;
    }

    header h3 {
        background-color: green;
    }
  </style>
  
</head>
<body>
  <p>순서 캐스케이딩</p>

  <header>
        <h3>디테일 캐스케이딩</h3>
  </header>

  <h4 style = "color: red;" id="color" class="color">선택자 캐스케이딩</h4>
  
</body>
</html>
CSS 우선 순위

순서 캐스케이딩

디테일 캐스케이딩

선택자 캐스케이딩

CSS 주요 속성

  • width 속성 : 선택한 요소의 너비를 설정(픽셀(px), 퍼센트(%))
  • height 속성 : 선택한 요소의 높이를 설정
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 </title>
  
  <style>
    .paragraph {
    width: 500px; 
    height: 500px;
    
    background-color: yellow;
    }
  </style>
  
</head>
<body>
  
  <h1 class="paragraph">넓이와 높이</h1>
  
</body>
</html>
CSS 주요 속성 1

넓이와 높이

  • font 속성 
    • font-family : 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 마지막에 작성하는 디폴트 값
    • font-style : 글자의 스타일 지정
    • font-weight  : 글자의 두께(100~900 사이의 숫자를 입력할 수도 있음)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 </title>
  
  <style>
    .paragraph {
    font-size: 50px;
    font-family: Times, Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    background-color: yellow;
    }
  </style>
  
</head>
<body>
  
  <h1 class="paragraph">글자의 크기와 스타일</h1>
  
</body>
</html>
CSS 주요 속성 1

글자의 크기와 스타일

  • border 속성 : 어떤 구역 및 경계를 설정
    • 주석과 같이 한 줄에 이어 쓸 수도 있음
    • 이때, 쉼표는 작성하지 않고 띄어쓰기만 함
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 </title>
  
  <style>
    .border{
    width: 500px; 
    height: 500px;
    background-color: yellow;
    border-style: solid;
    border-width: 10px;
    border-color: red;
    }
  </style>
  
</head>
<body>
  
  <h1 class="border">경계 설정</h1>
  
</body>
</html>
CSS 주요 속성 1

경계 설정

  • background 속성 : 배경
    • background-repeat
      • x축으로 반복 : repeat-x
      • y축으로 반복 : repeat-y
      • 반복하지 않음 : no-repeat
    • background-position : 공간 안에서 이미지의 좌표를 변경(top, bottom, center, left, right 등)
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 주요 속성 </title>
  
  <style>
    
    .background {
      width: 500px;
      height: 500px;
      
      font-size; 50px;
      font-weight: bold;
      font-style: italic;
      font-family: Arial, times, sans-serif;
          
      background-color: green;
      background-image: url("https://cdn.pixabay.com/photo/2022/10/08/09/19/winter-7506621_960_720.jpg");
      background-repeat: no-repeat;
      background-position: center;
      
    }
    
  </style>
  
</head>
<body>
  
  <h1 class="background">배경 설정</h1>
  
</body>
</html>
CSS 주요 속성 2

배경 설정

728x90
저작자표시 비영리 변경금지 (새창열림)