TIL #4 CSS (WEB2-CSS 강의 공부)

채록·2020년 12월 6일

CSS TIL

HTML & CSS + JS

목록 보기

3/14

CSS

그리드 사용하기

그리드를 사용하기 위해선 각 tag들의 부피를 파악해야 한다!

최신기술 이기 때문에 현재 사용해도 되는지 데이터에 근거해서 판단해야 한다. -> caniuse.com 사이트에서 확인 (현재 어떤 기술을 어느정도로 사람들이 사용하는지에 대한 통계 보여줌.)

h1과 div, span

hn = 제목 태그 (다른 content와 구분됨)

div = 오로지 디자인의 목적을 위한, 의미가 존재 하지 않는 태그. block element가 기본 속성이라 기본적으로 줄바꿈이 이뤄진다
<div> ~~~ </div>
span = div와 같지만 inline element 속성
<span> ~~~ </span>

grid: fr;

grid를 사용할땐 해당 코드에

display: grid;

를 입력 후 사용하기.

1. #grid의 경우 첫번째 content인 NAVIGATION이 250px, 두번째인 ARTICLE이 2fr로 크기 지정
-> NAVIGATION의 크기는 250px로 하고 ARTICLE이 나머지 크기를 채운다

화면이 좁아지면 ARTICLE의 크기가 줄어든다.

#fr의 경우 NAVIGATION이 2/3, ARTICLE이 1/3 만큼의 크기를 차지한다.

화면이 좁아지면 두 content가 같은 비율로 줄어든다

크기가 fr로 지정된 곳의 content길이에 따라 250px로 지정된 크기의 NAVIGATION 칸의 크기가 자동으로 같이 변화한다

그리드 본격 활용하기

+) '웹페이지 -> 검사' 항목에서 padding값 임의로 조정 가능하다! 이걸로 조정 해보고 알맞은 값을 코드 수정하면 아주 편하다.

코드 살펴보기

<style>
 ...생략...
  #grid{
    display:grid;
    grid-template-columns: 150px 1fr;
  }
  ol{
    padding-left: 33px;
  }
  #article{
    padding-left: 25px;
  }
</style>
...생략...
  <div id="grid">
    <ol>
      <li><a href="1.html">HTML</a></li>
      <li><a href="2.html" class="saw" id="active">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 such as HTML. 이하 생략
     </p>
    </div>
</div>

1. id=article로 h2와 p 태그를 묶어줌
2. id=grid로 ol과 div=article (h2와 p이 포함된)태그를 묶어줌
3. grid효과로 id=grid에 아래 코드 작성

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

4. ol태그에 대해서 좌측 여백 부여 (좀더 화면 테두리와 띄어지게 하기 위해서:

ol{
   padding-left: 33px;
  }

여기서 ol은 grid속의 ol 이므로, 추후 코드 수정시 다른 ol 과 헷갈림을 방지하기 위해 명확하게 표시해 주는것이 좋다! (id명 아래의 태그를 입력할때)

#grid ol {
	padding-left: 33px;
    	}

5. ol의 padding효과로인해 사이 선과 CSS가 겹쳐졌음을 방지하기 위해 id=article에 아래 코드 작성

#article {
	padding-left:33px;
	}

이때에도 #article이 #grid 안에 있는 것이기 때문에 명확하게 입력하려면 아래와 같이 입력.(하지만 article이 id값으로 쓰였기 때문에 굳이 명시안해줘도 되긴 함.)

#grid #article

반응형 디자인

화면의 크기에 따라 웹페이지의 각 요소들이 반응하여 최적화 된 모양으로 바뀌게 하는 것.

미디어 쿼리

반응형 디자인을 순수한 웹을 통해, CSS를 통해 구현하는 핵심적인 개념.
'웹 페이지 -> 검사' 를 켠 상태에서 스크린 크기를 조절하면 현재 웹페이지의 스크린 화면이 몇 px인지 오른쪽 상단에 표시된다. (가로x세로)

실습 예제 #1

조건 : 스크린 화면이 800px 이상일때 해당되는 코드의 부분이 display:none; 효과가 나타나는 것.

765px 일때

829px 일때

코드 살펴보기 (11번째 코드)
스크린 화면이 800px 이상일때를 안보이게 하기 = 스크린 화면이 최소 800px 일때부터 스크린이 안보임
-> screen width > 800px
-> screen의 min-width: 800px
-> media query에 맞는 형식으로 제작

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

실습 예제 #2

조건 : 스크린이 500px 이하일때, 병렬형 구조가 직렬로 바뀌고, content간 구분짓는 실선이 사라지게 하기.

500px 이하일 때

500px 초과일 때 (501px 부터 적용됨)

코드 살펴보기(CSS 부분)
특정 조건에서 지우고 싶은 태그의 상태를 none으로 만들어 주기

<style>
  body{
    margin: 0;
  }
  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: 500px){
    #grid{
      display: block;
    }
    ol {
      border-right: none;
    }
    h1 {
  border-bottom: none;
    }
  }
  </style>

CSS를 이용한 @media 효과 중복의 제거

아래 상황2 처럼 html 파일 안에 css sheet를 저장하여 사용할때, 웹 페이지를 re-load 하면 페이지는 html파일을 먼저 다운받은 후, 순서에 따라 css파일을 다운받는 모습을 볼 수 있다.
(웹 페이지 -> 검사 -> Network 항목에서 새로고침 시 확인할 수 있음)
이 때문에 하나의 페이지에 여러개의 파일을 별도로 갖고있을때와, 그냥 웹 페이지 안에 css코드를 갖고 있는것 중 네트워크 적인 측면에서는 후자가 효율적이다.

BUT Cashing 이라는 측면에서 바라볼 때!! 우리 컴퓨터가 한번 style.css라는 파일을 다운받았을 때 이 파일이 바뀌기 전 까지는 style.css파일을 웹 브라우저가 우리의 컴퓨터에 저장해 두었다가, style.css파일이 요청되면 저장해 두었던 파일을 가져오기 때문에
1. 속도를 높일 수 있고(Network를 안쓰기 때문에)
2. 사업자들은 돈을 절약할 수 있다. (Network사용료 절감)

조건 : html 연습용으로 작성한 1.html ~ 3.html 페이지(총 3개 페이지) 모두 mediaquery사용하여 500px 이하의 조건에서 지정한 효과로 발현하도록 바꾸기!

#상황 1 : 3페이지 모두 수동으로 고치기

세 페이지 모두 style부분 복붙, id 선택자 지정
<style> ~ </style>
<div id="grid">
<div id="article">

이렇게 할경우... 지금은 페이지가 3개라 시간이 별로 안걸리지만 if 페이지가 1억개라면?? ~~숨쉬면서 이것만 고쳐야됨~~ 중복의 제거가 필요!!!!!!

#상황 2 : 세 페이지의 링크 밑줄 효과 살리기 (한번에 / 중복 제거)

css파일을 새로 만들고, 각 html파일에 링크 연결해서 작동하게 만들기

500px이하 일때 병렬 구조 없어짐

500px 초과일때 병렬 구조 유지

코드 살펴보기
<link rel="stylesheet" href="style.css">
위 코드로 인해서 각 html sheet에서 내가 저장한 css sheet의 효과가 적용 되는 것!(같은 파일에 저장되어 있음.