본문 바로가기
2024하계모각코

모각코 6회차

jinjuhan 2024. 8. 12. 23:51

[css]

 

그리드

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    a{
      color:black;
      text-decoration: none;
    }
    h1{
      font-size: 45px;
      text-align: center;
      border-bottom: solid 1px 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: 33px;
    }
    #article{
      padding-left: 25px;
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</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. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
      </p>
    </div>
  </div>
</body>
</html>
#grid ol{...}
그리드 id 안에 있는 ol이라는 뜻

 

 

반응형 디자인_미디어쿼리

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
           border: 10px solid green;
            font-size: 60px;
        }
        @media(max-width: 800px){
            div{
                display:none;
            }
        }
    </style>
</head>
<body>
    <div>
        Responsive
    </div>
</body>
</html>

 

@media(max-width: 800px){...}

max-width: 800px 
screen width < 800px 일때 {...} 시행

min-width: 800px
screen width > 800px 일때 {...} 시행

 

 

 

 

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
  <style>
    body{
      margin:0;
    }
    a{
      color:black;
      text-decoration: none;
    }
    h1{
      font-size: 45px;
      text-align: center;
      border-bottom: solid 1px 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: 33px;
    }
    #grid #article{
      padding-left: 25px;
    }
    @media(max-width:800px){
      #grid{
        display: block;
      }
      ol{
      border-right: none;
      }
      h1{
        border-bottom: none;
      }
    }
  </style>
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</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. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
      </p>
    </div>
  </div>
</body>
</html>

 

 

너비가 800px 보다 작을 때 css 부분이 아래쪽으로

 

CSS 코드의 재사용

_모든 페이지에 적용

 

2.html

<!doctype html>
<html>
<head>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html">CSS</a></li>
      <li><a href="3.html">JavaScript</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. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
      </p>
    </div>
  </div>
</body>
</html>

 

  <link rel="stylesheet" href="style.css">
  
  link 태그를 통해 모든 페이지에 중복되는 코드를 제거할 수 있음
  가독성, 유지보수 굳~

 

 

style.css

body{
    margin:0;
  }
  a{
    color:black;
    text-decoration: none;
  }
  h1{
    font-size: 45px;
    text-align: center;
    border-bottom: solid 1px 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: 33px;
  }
  #grid #article{
    padding-left: 25px;
  }
  @media(max-width:800px){
    #grid{
      display: block;
    }
    ol{
    border-right: none;
    }
    h1{
      border-bottom: none;
    }
  }

 

 

 

[JavaScript]

기본적으로 html위에 동작하는 언어

 

 

 

 

 

스크립트 태그

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>JavaScript</h1>
    <script>
        document.write(1+1);
    </script>
    <h1>html</h1>
    1+1
</body>
</html>

 

 

js는 동적, html은 정적

 

 

이벤트

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')">
    <input type="text" onkeydown="alert('key down!')">
</body>
</html>

 

hi클릭->hi 문구 경고창 / 첫번째 텍스트 칸의 내용이 변할시 changed 경고창 / 아래 텍스트 칸에서 키가 눌렸을시 keydown 경고창

 

'2024하계모각코' 카테고리의 다른 글

2024 하계 모각코 목표에 대한 회고  (0) 2024.08.13
모각코 6회차 목표  (2) 2024.08.12
모각코 5회차  (0) 2024.08.07
모각코 5회차 목표  (1) 2024.08.07
모각코 4회차 결과  (5) 2024.07.24

'2024하계모각코' Related Articles

티스토리툴바