2019. 6. 21. 12:42ㆍ카테고리 없음
HTML을 사용하면서 CSS를 같이 쓰는 것은
당연할 일입니다.
왜냐하면 HTML은 기본적인 문자와 배열에 관련된
업무를 진행할 수 있지만
디자인적인 요소를 자유자재로 해 낼 수
없기 때문입니다.
지난 포스트에는 CSS의
박스 모델에 대해서 살펴 봤습니다.
박스 모델은 웹페이지에 박스나 표를
만들 때 본문과의 배치나
여백을 주는 방법이었습니다.
이번에는 CSS에서의 그리드(Grid)에
대해서 알아 보겠습니다.
그리드는 문장을 최적으로 배치할 수 있는 방법입니다.
모든 문서는 레이아웃이 중요합니다.
우리가 워드나 파워포인트를 사용할 때도
문서의 여백을 잘 조정하면
보기 좋은 문서가 되듯이 웹 환경에서도
이러한 배치는 중요합니다.
배치를 가장 효율적으로 할 수 있는
방법이 그리드 인 것입니다.
기본적으로 div /div라는
태그를 사용하여 문자를 감싸거나
span /span이라는 태그를 사용하면
문자를 웹에 표시 할 수 있습니다.
그리고 나서
html상단에
div와 중괄호를 입력하여
중괄호 안에 border, solid를 넣어
글자에 박스로 감싸고 박스의
색깔을 넣을 수 있습니다.
또한 div라는 태그는 부모태그를 입력을 합니다.
예를 들어 div id=”grid”라는 것을
꺽쇠를 사용하면
기존의 문자를 표기하라고 하는 각 div태그를
감싸는 부모태그가 됩니다.
그리고 나서 상단 style태그에 #grid라고
입력하여 중괄호안에 원하는 디자인을
삽입합니다.
Display:grid;를 입력 후
Grid-template-columns: 1fr이라고 하면
Div의 첫번째 문자의 박스의 크기가
140px 1fr을 입력하여 실행을 하면
140픽셀의 1fr만큼의 크기로 HTML에서 인식하게 됩니다.
이렇게 실행하고 화면을 움직이면 내가
설정한 사이즈의 비율을 유지하면서
박스의 크기가 조절이 됩니다.
Can I use라는 유용한 사이트가 있습니다.
사이트에 접속하여 Can I use 뒤의 박스에
내가 원하는 태그문자를 넣으면
어떠한 추세로 사용되고 어떻게 사용을
할 수 있는 것인지 알려주는
매우 유용한 사이트이니 내가 어떤 태그를
어떻게 사용해야 할 지 모를 때
즐겨찾기 해놓고 사용하시면 도움을 받으실 수 있습니다.
HTML화면에서 우클릭하여
제일 하단부의 검사를 누르면
입력된 프로그램들이 하단에 표기가 됩니다.
편집을 원하는 부분을 프로그램에서
직접 찾아서 할 수 있는 편리한
방식을 알려드립니다.
하단에 표기된 프로그램을 보고 원하는 부분에
더블클릭을 하고 조절하면 실제
HTML화면이 움직이는 것을
볼 수 있습니다.
박스의 위치나 글자의 배열 등을
실제화면을 보면서 수정할 때
빠르고 정확하게 편집할 수 있는
기본적인 팁이라고 보시면 됩니다.
다음은 반응형 디자인 미디어 쿼리에
대해 알아보겠습니다.
반응형 디자인은 Responsive Web이라고 불리는데
우리는 데스크탑만 보지 않습니다.
스마트폰을 보기도 하고
아이패드, 애플패드를 통해서 봅니다.
화면의 크기가 다양한 것이죠.
데스크탑에서 프로그램 하고
저장을 하면 다른 화면의 크기에서
HTML화면을 보면 깨지게 될 것입니다.
이러한 점을 보완하기 위해서 만들어진 것이
반응형 디자인입니다.
각 디바이스별 화면에 크기에 따라
자동적으로 화면이 조절되는 것이니
사용 안할 수 없다는 걸 아실겁니다.
반응형 디자인의 핵심은
미디어 쿼리(Media Query)입니다.
미디어 쿼리를 이해해야 반응형
디자인을 할 수 있다는 뜻입니다.
우선 div나 span을
사용하여 문자를 입력하고
style태그에서 font-size, solid, border 등을 통해
원하는 글자의 크기, 박스만들기,
색깔을 지정합니다.
이제 미디어쿼리를 넣어야 할 단계입니다.
@media의 태그에 소괄호로 묶어
Min-width:700px를 입력합니다.
Min은 최소한이라는 뜻으로
화면의 넓이가 최소 700픽셀이라는 뜻입니다.
중괄호 div나 span 안에 display:none;을 입력합니다.
이 뜻은 보이지 않게 한다는 뜻입니다.
위의 두 가지를 실행을 하여 화면을 실행하면
입력된 문자와 박스 등이 700픽셀이
넘어가면 입력된 문자가
보이지 않습니다.
실행을 하고 나서 화면을 움직이면
폭이 700이 넘어갈 때
문자가 사라지는 것을 확인 할 수 있습니다.
Min은 최소였는데 max는 최대의 뜻입니다.
Max-width:600이라고 입력하고 리로드를 하면
화면의 폭이 600보다 작아지면
입력된 문자가 사라지는 것을
볼 수 있습니다.
즉, 이러한 미디어 쿼리(반응형 디자인)을 사용하면
스마트폰이나 패드의 가로 세로변형에
적용할 수 있다고 보시면 됩니다.
실제로 이것을 해보시는 것이 중요합니다.
그냥 교육영상이나 글을 읽고
이런 기능이 있구나라고
생각만 하면 실력이 늘지 않습니다.
프로그래밍을 접한다는 것은 목적이 있는 것입니다.
자사몰을 운영하기 위해 웹페이지를 만들거나
스마트폰 웹앱을 만들거나
게임을 만드는 등
수많은 창작물을 만들어 낼 수 있습니다.
경제도 좋지 않고 취업도 좋지 못한 상태에서
우리는 프로그래밍을 기초부터 잘 닦아
쉬운 창작물부터 하나씩 만들어 나간다면
내 개성을 살린 나만의 재미있는
플랫폼을 만들 수 있습니다.
이렇게 실력을 차곡차곡 쌓아가는 것이
중요하지 않겠습니까?
다른 곳에 기대거나 다른 사람이
만든 플랫폼만 사용하다보면
돈을 지불해야 하는 순간이 옵니다.
우리는 모두 개성있는 창작을 해야 합니다.
이를 위해서는 기초를 잘 닦아야 합니다.