5/7~8 생활코딩 < CSS 完 >

오늘의 진도:

 WEB2 - CSS

  그리드 +5/8 ~수업을 마치며

 

1. 그리드의 기본 사용법

목록과 본문이 나란히 위치하는 디자인하기

그 여러가지 방법 중 최신의 방법 - 그리드

 

디자인만을 위해 사용하는 태그 div

block level element다.

 

같은 목적으로 만들어진 또 하나의 태그 span

이것은 inline element다.

 

→ 목적에 따라서 둘 중 하나를 사용한다.

 

오늘은 div를 사용할 것이다.

 

부피감을 알기 위해 선을 그려준다.

sytle 태그 안에 다음을 추가한다.

div{
border:5px solid gray;
}

이 두개의 태그를 나란히 놓기 위해서

이 두개의 태그를 감싸는 부모가 필요하다.

그리고 부모 태그에 id를 준다.

(id 값은 아무거나 해도 된다.)

grid 태그는 핑크색 선을 그어준다.

즉, 여러 개의 태그를 나란히 배치하고 싶거나

어떤 배치를 하고 싶으면

그것을 감싸는 부모 태그가 필요하다.

 

id가 grid인 태그에 display:grid 속성을 추가한다.

그리고 왼쪽은 150픽셀 고정, 나머지는 오른쪽이 다 차지하게 설정해준다.

※ 1fr 1fr로 하면 두 태그가 화면 가로를 1:1로 차지한다.

1fr 2fr로 하면 두 태그가 화면 가로를 1:2로 차지한다.

 

오른쪽 텍스트가 많아지면 그에 따라 세로가 자동으로 커지고

왼쪽 태그 역시 자동으로 커진다.

 

※ grid는 아주 최신 기술이다.

최신 CSS의 기능을 사용하기 위해서는

그것을 현재 사용해도 되는지, 안 되는지를

데이터에 근거해서 판단할 필요가 있다. 

 

caniuse.com에 들어가면

여러 CSS나 HTML 또는 JavaScript의 기술들 중에서

현재 웹브라우저들이 얼마나 그 기술을 채택하고 있는가에 대한 통계를 보여주는 서비스이다.

초록색은 쓸 수 있다. (크롬 62 등)

빨간색은 지원하지 않기 때문에 동작하지 않을 것이다. (오페라 미니 등)

연두색은 부분적으로 지원하고 있다. (IE11 등)

전 세계적으로 75%의 인구가 grid를 이용할 수 있다.

 

2. 그리드 써먹기

박스 모델을 써먹기 소스코드를 사용해서 grid2.html을 만들었다.

ol태그와, h2+p 태그를 나란히 놓을 것이다.

 

먼저 div 태그로 h2와 p를 묶어준다.

그리고 그것과 ol태그를 함께 div 태그로 묶어준다.

바깥쪽 div 태그에 grid라는 id를 준다.

 

head의 style 태그 안에

id가 grid인 태그의 display를 grid로 지정해준다.

#grid{
display: grid;

 

그리고 grid의 템플릿은 column(열)으로 하고,

cf) row는 행

그리고 열의 넓이를 정해준다.

grid-template-columns: 150px 1fr;

 

검사 - 개발자 도구로 들어가서 ol태그의 박스모델을 본다.

연두색 padding 부분 왼쪽의 20을 더블클릭하고

키보드 위/아래를 누르면 크기를 조정해볼 수 있다.

→ 32px로 바꿨다.

ol{ padding-left:33px; }

 

그런데 이렇게 ol이라고 쓰는 것이 좋은 방법이 아니다.

∵ ol이 여기서는 내비게이션의 역할로 쓰이고 있는데,

 나중에 본문에 다른 ol 리스트가 포함될 수도 있다.

∴ id가 grid인 태그 아래의 ol이라는 뜻으로

#grid ol{ padding-left:33px; }로 해준다.

 

이렇게 하니까 오른쪽 부분이 왼쪽으로 밀렸다.

그래서 body의 hi와 p를 묶은 div 태그에 article이라는 id를 주고

head의 style에 다음을 추가한다.

#article{ padding-left:25px; }

 

이것은 id값을 썼으니까 굳이 #grid를 추가할 필요는 없지만

좀 더 의미를 분명히 하기 위해서

#grid #article{ padding-left:25px; }로 하는 것도 좋다.

 

 

 

5/8

오늘의 진도:

 WEB2 - CSS

  반응형 디자인~수업을 마치며

 

 WEB2 - JavaScript

  커버 페이지~프로그램, 프로그래밍, 프로그래머

  ※ CSS 기초는 수강하지 않았음

 

1. 반응형 디자인

1) 반응형 디자인과 미디어 쿼리 소개

 오늘은 아래 그림과 같은 웹페이지가

 가로 크기를 줄였을 때 그 아래 페이지처럼 변하도록 만들어볼 것이다.

 

 

 반응형 웹 또는 반응형 디자인

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

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

 

 웹은 수많은 형태의 화면에서 동작해야 하기 때문에 만들어졌다.

 (컴퓨터, 스마트폰, 가상현실 등)

 

 반응형 디자인을 우리가 순수한 웹을 통해서, CSS를 통해서 구현하는 핵심적인 개념인

 미디어 쿼리에 대해서 살펴보겠다.

 

 Responsive라는 단어를 div 태그로 감쌌고,

 CSS로 다음과 같이 설정했다.

     div{ 
       border: 10px solid green; 
       font-size: 60px; 
     }

 

검사-개발자 도구를 켜고 창의 크기를 변화시키면

아래 그림과 같이 오른쪽 상단에 화면의 크기가 표시된다.

(1) 화면의 가로 크기가 800px보다 크다면 안 보이게 해라.

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

 

(2) 화면의 가로 크기가 800px보다 작다면 안 보이게 해라.

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

 

2) 미디어 쿼리를 이용해서 반응형 디자인 구현하기

맨 위의 웹페이지처럼, 가로가 좁아지게 되면

선이 없어지고

본문을 아래쪽에 배치되게 만들어 보자.

 

@media(max-width:800px)로 조건을 주고

 ① 그 밑에  #grid{ display: block; }로 하면

 본문이 block level element가 되어

 화면 오른쪽에 위치할 수 없게 되므로 아래로 내려온다.

 

 ② ol{ border-right:none; }을 추가하면 세로 선이 사라진다.

 

 ③ h1 { border-bottom:none; }을 추가하면 가로 선이 사라진다.

 

 

 

 

2. CSS코드의 재사용

모든 웹페이지에서 중복되고 있는 CSS코드를

style 태그를 제외한 순수한 CSS코드만 복사해서

style.css라는 파일에 붙여넣기한다.

 

그리고 원래 웹페이지에 있던 style 태그 전체를 삭제하고

그 자리에 다음과 같은 태그를 입력한다.

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

 

* 검사 - 개발자 도구에서 Network 탭에 들어가서

 페이지 새로고침을 하면

 이 페이지를 띄우기 위해서 무슨 무슨 파일을 다운받았는지 나온다.