본문 바로가기
CSS

생활코딩(CSS정리)

by 자연송어 2021. 3. 1.

 

7. 선택자의 기본

중복을 없애는 방법

같은 그룹으로 묶고 그 그룹에 대해 HTML 속성을 주는것

ex : class="saw"

​

class 속성 값에는 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다.

여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.

가장 마지막에 선언한 값이 우선순위가 높다. 

ex : class="saw activity"

​

아이디 선택자가 클래스 선택자보다 우선순위가 높다.

우선순위 : id>class>tag

단, id의 값은 한번만 등장해야한다고 약속 (주민등록과 같이 중복되면 안된다가 핵심, 유일무이한 값)

#id="activity"

​

구글 css selector 검색​

8. 박스 모델

구글 검색

css box model

​

오른쪽 클릭 ->검사 

​

컨텐츠의 빈공간 (박스)

화면 전체를 씀 -> block level element

자기 크기만 갖는 것 -> inline element

​

컨텐츠 크기 지정 

10. 그리드 소개

div태그 - 디자인 의미 (box)

span태그 - 디자인 의미(inline)

h1 태그 - 제목을 표시

​

최신 기술을 사용해도 되는지

웹브라우저들이 얼마나 그 기술을 채택하고 있는지 확인

caniuse.com

프레임 크기에 따라 자동으로 크기 조절​

grid-template-columns : 1fr

11. 그리드 써먹기

그리드를 사용해서

css 부분을 오른쪽으로 옮기기

​

1. css 부분을 div태그로 감싸기 (자식태그)

2. 모든 글씨부분을 div 태그로 감싸기 (부모자식 관계 설정)​

3. 부모 div태그 id="grid"

4. style(css)부분에 #grid 선언 display:grid;

5. grid-template-columns : 150px 1fr (부모 div= 150px, 자식 div= 1fr)

 <style>
    body{
 #grid{
      display: grid;
      grid-template-columns: 150px 1fr;}
    }
  </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~~
        </p>
      </div>
      </div>

 

※선언 시 #ol 만 하면 다른 ol태그와 겹쳐서 오류가 날 수 있기 때문에

#grid ol 처럼 grid 안에 있는 ol 태그로 선언하면 좋음.

​

→ #ol {} X

→ #grid ol{} O

 

12. 미디어 쿼리 소개

​

반응형 디자인 : 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것

@media = 미디어쿼리 태그

@media(max-width:800px) {
	div{display:none;}

= screen width < 800px = min-width:800px

= 스크린 폭이 800픽셀보다 적으면 = 최소-폭이 800이면

div태그가 보이지 않게 된다.

 

조건이 만족할 떄 css요소들이 변환될 수 있도록 만들 수 있는 것.

 

13. 미디어 쿼리 써먹기

<style>
    h1 {
      font-size:45px;
      text-align: center;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    @media(max-width:800px){
      #grid{
        display: block;
      }
      ol{
        border-right:none;
      }
      h1 {
        border-bottom:none;
      }
    }
  </style>

→ 폭이 800을 넘으면 grid가 블록이 되고, ol의 border-right가 없어지고, h1의 border-bottom이 없어진다.

 

※ 소스 검사를 통해 영향을 주는 부분을 확인한 후 

그 소스를 그대로 가져와서 그 부분을 원하는 대로 고치는 것이 핵심

 

14. CSS 코드의 재사용

css가 중복되지 않도록 하기

1. Style.css폴더를 만들어서 css코드를 붙여넣기함.

2. css가 있었던 곳에 ↓ 붙여넣기 (링크)

 <link rel="stylesheet" href="style.css">

 

효과

  • css에 한줄만 추가해도 코드가 1억개라도 일괄적으로 적용가능
  • 코드의 양이 줄어서 인터넷 사용료를 덜 낼 수 있음.
  • 파일을 통해 중복을 제거하면 캐쉬로 인해 훨씬 더 빠르게 웹페이지를 보여줄 수 있음.

티스토리툴바