CSS

by duckduck0054

HTML

<html>

  <head>
    <style type="text/css">
      /* 색 */
      .blue {
        color: blue;
      }

      .green {
        color: rgb(0, 128, 0);
      }

      .grey {
        color: #C0C0C0;
      }

      /* 배경 */
      .background {
        background-color: blue;
      }

      /* 글꼴 
      font-family
      웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다. 
      글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 
      합니다.
      
      font-size
      % : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다.
      em : 는 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기
      px : 그냥 px
      */
      .font {
        font-family: Arial, Helvetica, "Times New Roman";
        font-style: italic;
        font-weight: border;
        font-size: 1.5em;
      }

      /* 
      링크(W3SCHOOL로 대체)
      link, unvisited link 한번도 방문하지 않았을 경우
      visited, visited link 한번이라도 방문을 하였을 경우
      hober, 마우스 오버될 때
      active, 마우스 클릭하는 순간
      */
      a:link {
        color: green;
      }

      a:visited {
        color: red;
      }

      a:hover {
        color: brown;
      }

      a:active {
        color: black;
      }

      /* 크기단위(글꼴 설명 참고) */

      /* 박스모델 
      모든 요소들은 사각형의 형태를 가지고 있는데 선이나 여백에 따라서 
      그 영역이 반응하는 것이 있다. 반응하는 것은 박스모델이라 한다.
      가로세로를 준 상태에서 패딩을 주게 되면 가로세로가 커지게 된다.
      border도 마찬가지 하지만 margin은 아니다.
      근데 이게 모두 가로 세로를 모두 퍼센트가 아니라 픽셀로 설정하였을 때 
      */
      
      /* 
      margin border padding 
      margin padding : 여백
      border padding : width, height에 영향을 준다.
      
      margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
                    background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다.
      padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다.
               background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다.
      */
      .margin1 { margin: 20px; width: 50px; height: 50px; border: 1px solid green;
      1background-color: red}
      .border1 { border: 20px solid green; width: 50px; height: 50px; }
      .padding1 { padding: 20px; width: 50px; height:...