공부정리_CSS(10~15강)

WEB2 CSS - 10. 그리드 소개

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="UTF-8"> 
    <title>grid</title>
  <style> 
    #grid{ 
    border: 5px solid pink;
    display: grid; 
    grid-template-columns : 1fr 1fr;/*신기술 grid*/ 
    } 
    div{ 
    border: 5px solid gray;
    } 
  </style> 
  </head> 
  <body> 
    <div id="grid">
    <div> NAVIGATION</div> //div 디자인을 위해 사용하는 무색 무취의 태그 / block 태그
    // span 또한 동일 / inline 태그 
    <div>ARTTCLE</div>
    </div> 
</body> 
</html> //최신 기술을 사용해도 되는 지 안되는지 caniuse.com 사이트로 알 수 있음

디자인을 위해 사용하는 무색 무취의 태그
<div>	<span>
block 태그	inline 태그

최신 기술을 사용해도 되는 지 안되는지 caniuse.com 사이트로 알 수 있음

WEB2 CSS - 11. 그리드 써먹기

그리드 써먹는 소스코드

<!doctype html>
<html> 
  <head> 
    <title>web-css</title>
    <meta charset="utf-8">
  <style> 
    a{ 
    color:black; 
    text-decoration: none;
    }
    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: 33px; 
    } #grid #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> CSS stands for Cascading Style Sheets. 
        CSS describes how HTML elements are to be displayed on screen,paper,
        or in other media. CSS saves a lot of work. It can control the layout 
        ofmultiple web pages all at once. External stylesheets are stored in CSS files. </p> 
      </div>
    </div> 
  </body> 
</html>

WEB2 CSS - 12. 미디어쿼리 소개

어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능->미디어 쿼리

min 최소값( 800px 이면 800px 이상인 경우 적용) , max 최대값(800px 이면 800px 이하인 경우 적용)

<!doctype html>
<html>
  <head>
    <title>web-css</title>
    <meta charset="utf-8"> 
  <style>
    div { 
    border : 10px solid green; 
    font-size: 60px; }
    /*screen width > 800px div { display : none; } 
    어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능->미디어 쿼리 */
    //min 최소값 , max 최대값

    @media(min-width:800px){
      div{
      display: none;
      }
    }
  </style> 
  </head>
  <body> 
    <div>Responsive</div>
  </body>
</html>

WEB2 CSS - 13. 미디어쿼리 써먹기

기본형 소스코드

<!doctype html> 
<html> 
  <head> 
    <title>web-css</title> 
    <meta charset="utf-8"> 
  <style> 
    a{ 
    color:black; 
    text-decoration: none; 
    } 
    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: 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> CSS stands for Cascading Style Sheets. CSS describes how HTML 
        elements are to be displayed on screen,paper, or in other media. 
        CSS saves a lot of work. It can control the layout ofmultiple web pages
        all at once. External stylesheets are stored in CSS files. </p>
      </div>
    </div>
  </body>
</html>

WEB2 CSS - 14. CSS코드의 재사용

검사로 해서 개발자 도구를 켜시고 네트워크를 클릭

현재 우리가 보고 있는 xx.html이란 파일을 리로드했을 때

내부적으로 어떤 파일들을 웹서버에서 다운로드 받는지를

보여주는 기능

웹페이지 안에 CSS 코드<link rel="stylesheet" href="style.css">를

내장하는 것 더 효율적

더 적은 트래픽을 사용

우리가 한 번 style.css라는 파일을 다운로드 받았다면 저 파일이 바뀌기 전까지는 style.css란 파일을 이 웹브라우저는 우리의 컴퓨터에다가 저장해 놨다가 그 다음에 style.css 파일을 요청하면 저장된 결과를 가져와서 속도를 높일 수 있고(왜냐면 네트워크를 안 쓰기 때문에) 사업자들은 돈을 덜 쓸 수 있는 중요한 효과를 얻게 된다.

캐시로 인해서 이 style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠르게 웹페이지를 보여줄 수 있으면서 네트워크 트래픽, 다시 말해 사용료를 훨씬 더 적게 낼 수 있다는 굉장히 신기하면서 중요한 효과를 얻을 수 있기 때문에 우리가 가급적 CSS 파일을 만들었다면이렇게 별도의 파일로 꺼내서 중복을 제거하는 것을 추천

WEB2 CSS - 15. 수업을 마치며

선택자(속성을 더 정확하게 표현)와 속성(풍부한 표현력)이 중요

주어와 서술어같은 것

공부는 많이 했는데 그것을 써먹지 않는다면 우리 뇌는 억울

뇌가 억울해 하는 것을 방치하면 뇌는 수단과 방법을 가리지 않고

공부를 하지 않을 방법을 찾는다.

반대로 공부는 적게 했는데 그것을 최대한 써먹고 있다면,

뇌는 공부의 효용을 신통하게 볼 것

공부의 효과에 뇌가 감탄할수록 뇌는 공부를 자꾸 하려고 하게 되어 있다.

공부를 안하면 뇌가 혹사당한다는 것을 알기 때문

WEB2 CSS : LONG take

소리없이 처음부터 끝까지 코드 작성하는 과정 보여줌

'생활코딩 > css' 카테고리의 다른 글

공부정리_CSS(1~9강) (0)	2021.09.12

Sharon Kim의 프로그래밍 노트

공부정리_CSS(10~15강)

'생활코딩 > css' 카테고리의 다른 글

티스토리툴바

공부정리_CSS(10~15강)

'생활코딩 > css' 카테고리의 다른 글

관련글

티스토리툴바