티스토리 뷰

728x90
반응형

[WEBn] WEB2 - CSS


생활코딩 강의를 들었던 것을 정리를 하겠습니다.


생활코딩 미디어 쿼리 강의와 이전 정리 내용을 가지고


같은 것을 만들었습니다.


<!doctype html>

<html>

<head>

  <title>WEB2 - CSS></title>

  <meta charset="utf-8">

  <style>

    body{

      margin: 0;

      border-bottom: 1px solid gray;

    }

    a {

      color: black;

      text-decoration: none;

    }

    #active {

      color: red;

    }

    h1 {

      font-size: 45px;

      text-align: center;

      border-bottom: 1px solid gray;

      margin:0;

      padding:20px;

    }

    ol {

      border-right: 1px solid gray;

      width:100px;

      margin: 0;

      padding: 20px;

    }

    #grid{

      display: grid;

      grid-template-columns: 150px 1fr;

    }

    #grid ol{

      padding-left: 32px;

      padding-right: 1px;

    }

    #article h2, p{

      margin-left: 10px;

    }

  </style>

</head>

<body>

  <h1><a href="index.html">WEB</a></h1>

  <div id="grid">

    <ol>

      <li><a href="1.html" title="HTML이란">HTML</a></li>

      <li><a href="2.html" title="CSS이란" id="active">CSS</a></li>

      <li><a href="3.html" title="JavaScript">JavaScript</a></li>

      <li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>

    </ol>

    <div id="article">

      <h2>CSS이란 무엇인가?</h2>

      <p>

      Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>

      CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>

      CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>

      This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>

      Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>

      </p>

    </div>

  </div>

</body>

</html>

생활코딩을 보고 이 내용을 가지고 반응형 웹을 설명하겠습니다.


첫번째 사진과 다르게 


창을 줄이게 되면 

이러한 사진과 같이 줄어 들게 됩니다.


그렇기 때문에 조금더 효과적인 웹이 필요할 것 같습니다.


디자인과 코드는 살려두고 시작하겠습니다.


우선 800px 보다 작아지면 불편하기 때문에

800px 보다 작았을 경우 반응을 하는 웹을 필요할 것 같습니다.


@media(max-width : 800px){

      }

이렇게 800px 보다 크게되면 블록을 하면 될 것 같습니다.


찾아보니 grid 부분을 바꾸면 될 것 같습니다.


@media(max-width : 800px){

    #grid{

      display: block;

    }

  }

이렇게 블록을 하게 되면


조건이 맞았을 경우


사진과 같이 변경됩니다. 

다음으로

선을 지워야 될 것 같습니다.


찾아보게 되면


찾아보니

ol 태그에

border-right: 1px solid gray;

이부분인 것 같습니다.


제목 'web' 아래에 있는 선도 지워야 될 것 같습니다.


찾아보니 

h1 태그에

border-bottom: 1px solid gray;

인거 같습니다.


이 부분들을 이렇게 바꾸게 되면


@media(max-width:800px){

   #grid{

     display: block;

   }

   ol{

     border-right: none;

   }

   h1{

     border-bottom: none;

   }

}

이렇게 됩니다.



최종적으로 보시게 되면 이렇게 나오게 됩니다.


mediaquery는 무엇인가? 를 간략하게 설명했습니다.


반응형 디자인과 미디어 쿼리 소개 강의

https://opentutorials.org/course/3086/18323


728x90
반응형

'WEBn > WEB2 - CSS' 카테고리의 다른 글

[WEBn] WEB2 - CSS - 코드의 재사용  (0) 2018.05.02
[WEBn] WEB2 - CSS - 그리드  (0) 2018.05.01
[WEBn] WEB2 - CSS - 박스모델  (0) 2018.04.30
댓글
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today