씨에스에스 조판

이 시점에서 우리는 이미 씨에스에스 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 씨에스에스 조판에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, 씨에스에스 격자, 포지셔닝과 같은 현대적인 조판 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.

선결사항

이번 단위를 시작하기 전에 여러분은 이미 아래 내용을 익혔어야 합니다:

  1. 에이치티엠엘 소개 단위에서 논의했듯이 에이치티엠엘에 대해 기본적인 친숙도가 있어야 합니다.
  2. 씨에스에스 소개 단위에서 논의한 만큼 씨에스에스 기본 사항에 대해 부담이 없어야 합니다.
  3. 상자 스타일링 방법에 대한 이해가 있어야 합니다.

참고: 여러분은 본인만의 파일을 생성할 능력이 없는 컴퓨터/태블릿/다른 장치에서 작업하고 있는 경우, JSBinThimble과 같은 온라인 코딩 프로그램 상에서 코드 예제를 시험해볼 수 있다.

안내서

이 글은 씨에스에스에서 이용할 수 있는 기본 조판 도구 및 기술에 대한 지침을 제공합니다. 단원 말미에 웹페이지 하나를 예시하는 방식으로 조판 매서드에 대한 이해도를 자가 점검하는데 도움이 되는 학습 평가가 있습니다.

씨에스에스 조판 입문서
이 문서에서는 이전 모듈에서 이미 다뤘던 CSS=씨에스에스 조판 기능, 예를 들어 서로 다른 display 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 씨에스에스 개념을 소개합니다.
일반 대열
웹페이지의 요소 무리는 여러분이 무언가 변화를 주기전까지는 normal flow(일반 대열)에 따라 또래 요소들을 배치합니다. 이 글은 일반 대열을 설명하는데, 그 걸 토대로 일반 대열 자체를 변경하는 방법을 배우겠습니다.
가변상자
가변상자는 행과 열의 형태로 항목 무리를 배치하는 일차원 조판 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 글은 근간이 되는 내용 전체를 설명한다.
격자
씨에스에스 격자 조판은 웹페이지를 위한 이차원 조판 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 조판을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 조판을 시작하기 위해 필요한 모든 것을 알려드립니다.
부동체
원래 텍스트 블록 내에서 부동 이미지를 위한 float 속성은 웹 페이지에서 다단 조판을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. 가변상자와 격자의 출현과 함께 부동 속성은 이 글에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.
위치잡기
당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 글은 서로 다른 position 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.
다단 조판
씨에스에스 다단 조판 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 글은 그 기능을 어떻게 사용하는지 설명합니다.
반응형 디자인
웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 글에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.
미디어 쿼리 초보자 안내서
CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.
레거시 조판 메서드
격자 시스템은 씨에스에스 조판에서 사용되는 매우 일반적인 기능이며, 씨에스에스 격자 조판 이전에는 부동체 또는 기타 조판 기능을 이용하여 격자 조판이 구현되는 경향이 있었습니다. 자신의 조판을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워맞춥니다. 이 글에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.
이전 브라우저 지원

이 단위에서는 가변상자 및 격자를 여러분의 웹디자인을 위한 주 조판 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 글은 구식 기술의 사용자들을 차단하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.

학습 평가: 조판 이해의 핵심 사항
웹페이지를 하나 예시하는 방식으로 서로 다른 조판 메서드 지식을 테스트하는 학습 평가

참조 항목

위치잡기 실례
이 글은 위치잡기로 당신이 할 수 있는 일의 종류를 설명하기 위해 실제 사례를 구축하는 방법을 제시합니다.