생활코딩 WEB2 - CSS ② 기초 정리

2021-12-18 21:04:17

 

그리드 GRID

ex) grid 파일 만들고 NAVIGATIO ARTICLE 입력

<div>는 무색 무취의 태그, division의 약자(분할,분배)

<div>NAVIGATION</div>
<div>ARTICLE</div> 
용도가 없고 디자인의 용도로만 쓰는 태그
Block level element기에 화면 전체 사용 >>>줄바꿈 되어버림

같은 목적의 태그로는 <span>이 있음, 인라인 엘리먼트

 

 

그리드를 위해서는 부피를 먼저 알아보기

<style>
      div{
          border: 5px solid gray;
          }

 

 

두개의 태그 감싸는 부모 태그 필요

<div>
     <div>NAVIGATION</div>
     <div>ARTICLE</div>
</div>

 

부모 태그에 아이디 주기

<div id= "grid">   id값은 아무거나 해도 됨 
     <div>NAVIGATION</div>
     <div>ARTICLE</div>
</div>

 

 

아이디로 CSS 속성 주기

#grid{
       border: 5px solid pink;
       display: grid;   태그가 표시되는 방법을 바꾸는 속성-grid로
       grid-template-columns: 150px 1fr;   fr 자동조절됨 
       }

 

 

그리드 할 것을 <div></div>로 묶고

위에 <ol>태그들을 하나의 그룹으로 묶어서 요소로 사용

▶부모 태그 필요, <div></div>로 공통 묶기

▶div id= "grid"

▶#grid{
          display: grid;
          grid-template-columns: 150px 1fr;
          }

검사로 가서 이 부분 간격 움직여보고 괜찮아 보이는 정도의 부분의 크기 확인

 

 

ol{
   padding-left: 33px;
   }

바꾸면 옆이 밀림, 또 옆쪽도 바꿔주기

 

<div id= "article"> div id 부여하고

#article{
          padding-left: 25px;
          }

 

<ol>이 네비게이션 역할로 쓰이고 있는데 

<ol>이 네비게이션이 아니라 본문에도 목록있는 리스트가 포함될 수 있기에

grid라는 id값의 태그 밑에 있는 <ol>이라 해줘야 함

★ #grid id 라고 표기

 

article은 id값을 썼기에 묶을 필요는 없지만 

분명한 의미를 전달하기 위해 써줘도 됨.

 

saw와 active 다음 예제 시 필요 없으므로 삭제

 

 

★ www.coniuse.com

현재 웹 브라우저 얼마나 그 기술을 채택하고 있는가

통계를 보여주는 서비스 사이트

초록색이면 가능, 빨강 동작x. 연한 초록 부분지원

global 96.47%면 전세계의 96.47%가 사용가능. 아주 유용한 사이트!!

 

---

 

미디어 쿼리 소개

화면의 크기에 따라서 웹 페이지 각 요소들이 반응해서 

최적화된 모양으로 바뀌게 하는 것

=반응형 웹, Responsive Web

 

화면 크기 8000픽셀보다 크냐, 작으냐에 따라

<div>태그를 보이게, 안 보이게 하고 싶다고 한다면

일단 화면의 크기를 먼저 알아야 한다.

 

▶구글 개발자도구 검사 누르면

   오른쪽 상단 주소창 아래에 화면크기 표시됨

 

 

 

화면의 크기가 800픽셀보다 크면 보이지 않게 하기

screen width > 800px
 div{
     display:none;  
     }   
 800px보다 크면 <div>디스플레이 none

 = 

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

화면의 크기가 800픽셀보다 크다는 것은
화면의 크기가 최소한 800픽셀이다는 것을 의미

 

 

@media(max-width: 800px)

최대값 max 800px로 하면 스크린 폭이 800픽셀보다 작다라는 것

 

 

 

 

★미디어 쿼리를 이용하면 화면의 크기, 스마트폰 사용할 때

가로모드, 세로모드와 같은 여러가지 화면의 특성에 따라

어떤 조건을 만족할때만 css 내용이 동작하도록 할 수 있음 

 

 

 

 

ex) 800픽셀 기준으로 <style>태그에

    screen width<800px  (스크린폭 800픽셀보다 작을 때)

@media(max-width: 800px) 

 

 

#grid 카피해서 display 부분을 block으로 변경

display: block;

 

 

선없애기: #ol 카피해서

border-right: none; 

 

 

h1태그 밑 선도 없앰: h1 카피

border-bottom: none;

 

---

 

★중복의 제거

<style>을 복사해서 다른 페이지에 만든 페이지를 전파

만약 오류가 나고 모양이 다른 거 같다 할 때

파일에 오른쪽 마우스 클릭 - Split Right (화면 옆에 화면 두고 비교할 수 있음)

 

이렇게 일일이 하면 파일이 어마어마하게 많을 때

유지보수가 너무 어려움.

 

▶CSS코드 별도 파일 만들어서 활용하기

1. CSS코드만 복사해서 style.css 파일을 생성하고 거기에 붙여넣기

   <style></style>태그를 지워낸 <style>안의 코드만 복사해서 붙여넣기

2. 원래 사용하고 있던 각 페이지에 <style>태그 지우기

3. <Link>를 이용해서 웹브라우저한테 명령 

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

 

저 링크를 넣으면 웹페이지는 style.css 파일과 link(연결)되어있고,

웹브라우저는 style.css 파일 다운받아서 웹페이지에 적용하게 됨.

각 페이지에 있는 긴 <style>코드를 저 한 줄로 모두 변경.

 

장점: 재사용성이 높아지고 내부적 코딩 원리 몰라도 사용 가능,

1억,100억개든 이걸로 동시에 바꿀 수 있기에 유지보수 하기 좋음

다운로드 인터넷 사용료 줄어든다.

 

---

 

* 검사-개발자도구-네트워크 클릭

  보고 있는 파일 리로드시 내부적으로 어떤 파일들을

  웹서버에서 다운로드 받는지 보여주는 기능

 

* 웹 페이지 안 CSS코드 내장하는 것이 네트워크 측면에서 더 효율적임

  적은 트래픽 사용

  하지만 캐싱 떄문에 그렇지 않음

 

*캐싱(저장하다)

 한번 파일을 다운로드 받았다면 파일이 바뀌기 전까지 

 웹브라우저는 파일을 우리 컴퓨터에 저장해놨다가

 다음에 요청하면 저장된 결과를 가져와 보여준다.

 네트워크를 쓰지 않아 속도를 높일 수 있고 사업자들은 돈을 덜 쓸 수 있다.