[WEB] HTML & CSS 2

[ Program source ]

css는 link를 걸어 style을 설정한다.

가장 큰 타이틀을 눌렀을때 처음페이지로 돌아간다. 스타일은

  /* <a>태그 색상 모두 노란색으로 하겠다, 밑줄 삭제 */
  a { color: gray;text-decoration: none;}
  /* 변경은 없지만 커서를 갖다대면 파란색으로 보인다 */
  /* !important는 id보다 우선순위를 두겠다 */
  a:hover {color: blue !important;}

  h1 {
    font-size: 40px;
    text-align: center;
    border: 2px gray solid;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    padding-bottom: 15px;
    padding-top: 15px;
    margin-top: 0px;
    margin-bottom: 8px;
    }

순서가 있는 목록일땐 <OL> 을 사용해 목록에 번호가 매겨진다. 순서가 없는 목록일땐 <UL>을 사용해 순서없이 사용한다. 지금은 <OL>을 사용했기때문에
1. WEB
2. HTML
3. CSS
이런식으로 나온다. 한줄에 다 나오고 싶게 한다면 style의 li태그에 list-style-type: none;을 사용한다.

    /* 앞에 번호 없애고 1줄로 */
  li {list-style-type: none;
      display: inline;
      /* border: 1px red solid; */
      margin: 15px;
      }

      /* content 너비 지정  */
      /* 위아래 마진은 0, 양옆 마진은 양옆으로 균등하게 배분해 가운데정렬 */
  ol {width: 460px;
      margin: 0 auto;
      }

왼쪽에 텍스트, 오른쪽에 이미지를 나오게 하고 싶다면 텍스트와 이미지를 각각 <div> 태그를 주고 겉에 텍스트와 이미지를 포함하는 <div> 를 한번더준뒤 id를 지정한다. 그리고 그 id에 style을 설정한다.

  #grid { display: grid;
          grid-template-columns: 6fr 4fr ;
          margin: 25px
        }


  div { margin: auto;
      }

  /* ol아래에 있는 선 */
  #line { border-bottom: 1px gray solid;
          margin-top: 10px;
          margin-left: 0px;
          margin-right: 0px;
        }