박스모델

1. 모든 엘리먼트(div, span, p, blockquote, table, ol ...)는 모두 Box로 이루어져 있습니다.
   모든 Box는 margin, border, madding을 갖습니다.
2. Box(객체, element)의 위치는 상대적으로 배치될 수 있고, 절대적으로도 배치 될 수도 있습니다.
element 1
element 2
element 3
element 4
3. 하위객체의 정렬기준은 상위객체에서 수행합니다.
element 1
element 2
element 3
element 4
4. 모든 엘리먼트는 고유의 속성을 갖습니다.
   고유의 속성이란 줄바꿈을 하는지, 절대위치를 할당 받는지 등을 의미합니다. 예를들어, 문단을 시작 할 때, 당연히 줄을 바꿀 것이라고 기대하기 때문에 <p>테그는 기본속성으로 줄 바꿈(display:block)속성을 받지만, 밑줄 테그 <u>의 경우 줄을 바꾸지 않고(display:inline), 밑줄 속성만(text-decoration:underline) 갖습니다.
   고유의 속성은 사용자가 언제든지 변경 할 수 있습니다.

내부정렬

아래 예시들은 부모객체의 설정에 따라 자식객체들이 어떻게 배열되는지 보여줍니다.

flex-direction

column: 기둥, 세로줄, 칼럼, 길게 늘어선 줄
row: 옆으로 늘어선 줄

justify-content

• 양쪽(반간격)의 경우 1번과 4번의 바깥쪽 간격이, 기본 간격의 반이 된다.
• 양쪽(고정간격)의 경우 1번과 4번의 바깥쪽 간격이, 기본 간격과 같다.

align-items

1(50px), 2(100px), 3(80px)는 높이가 설정되어 있고, 4는 설정되어 있지 않다.

align-content

아래 내용과 같이, 행에 각 60px의 box가 3개 채워지면 다음 행에 채우도록 코딩되어 있다.

display: grid;
direction: row;
grid-template-columns: 60px 60px 60px;
height: 200px;

flex-wrap

• 줄 바꿈: 하위객체들의 크기가 부모의 크기를 넘어갔을 때, 줄을 바꿉니다.
• 줄 바꾸지 않음: 하위객체의 크기가 명시되어 있지 않다면, 자동 계산하여 맞춥니다.
  만약, 하위객체가 너무 크면 부모 객체의 크기를 억지로 늘립니다.
• 줄바꿈(반대)란, 줄 시작의 기준점을 반대로 만듭니다.
  세로정렬 → 아래, 가로정렬 → 오른쪽

flex 나머지 구간

flex-grow특성을 이용해서 나머지 구간을 설정할 수 있습니다.

<div style="border:1px solid #ccc;flex-grow: 1;">

wrapper

사각배열을 위해 부모객체에서 display:grid를 선택합니다. grid-column과 grid-row의 문법은 다음과 같습니다. 끝 블럭을 생략하면 1칸으로 간주합니다.

grid-column : 시작 블럭 / 끝 블럭

#wrapper-inner {
  display: grid;
  width: 550px;
  height: 550px;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  grid-gap: 10px;
}
#wrapper-inner div:first-child { /* 상자 1 */
  background-color: bisque;
  grid-column: 3 / 6;
  grid-row: 3 / 6;
}

"3 /6", 시작 블럭(3)은 3칸부터, 끝 블럭(6)은 6블럭 이전까지를 의미합니다.
 이 테그가 난해한 이유는 잘 못 입력을 받아도 어쨌든 해석을 하려고 한다는데 있습니다. 예를들어, 6이 넘아가거나, 심지어는 음수가 들어가도 동작합니다. 시작블럭보다 끝 블럭이 작아도 임의대로 해석해서 출력합니다.

개별정렬

디자인을 결정할 때, 부모의 특성을 직접 수정하는 것이 가장 쉽고 빠르지만, 매번 부모객체를 변경하는 것은 꽤 부담스러운 일입니다. 경우에 따라 문제를 일으킬 수 도 있습니다. (예를 들어, 사이트 내 다른 페이지에서 사용되는 부모객체를 수정했을 경우) 따라서 본인의 크기를 임의대로 변경하여 마치 정렬이 된 것 처럼 디자인 할 수 있습니다.

1번 예제는 아무런 설정이 없기 때문에, 부모가 결정한 규칙 "왼쪽부터 순서대로 차곡차곡"의 룰을 따르고 있습니다.

2번 예제는 좌우에 여백을 auto로 설정하여 가로 크기를 부모만큼 size를 키운 상태입니다. 물론 다른 자식객체가 생긴다면, 다른 객체를 고려해서 가로 크기가 커지므로(auto) 중앙에 정렬되지 않을 것입니다.

3번 예제는 좌측 여백을 auto로 설정하여 마치 우측 정렬된 것 처럼 작성하였습니다. 부모 객체에 "우츨부터 차곡차곡"이라는 규칙을 부여할 수 있습니다. 사이트 내에 다른 페이지에서 해당 객체가 또 사용되고 있다면, 부작용을 유발할 것입니다.

4번 5번 예제는 객체가 가진 내부의 문자 정렬을 시행하고 있습니다. 객체 개념을 이해한 후라서 이와 같은 정렬이 얼마나 바보같은지 이해할 수 있습니다. 하지만 지금은 이해를 위해서 테두리를 그렸기 때문에 쉽게 이해가 가능합니다. 만약, 부모와 자식의 배경색이 같고 테두리가 없다면, 정렬이 왜 적용되지 않는지에 대해 깨닫는데 꽤 오랜 시간이 걸릴 수 도 있습니다.

함수로 위치 선정하기

만약 아래와 같은 상황이 있다면, 함수를 통해서 위치를 선정할 수 있습니다.

calc()함수를 이용해서 다음과 같이 설정 할 수 있습니다.

margin-left:calc((100% - 300px)/2)

절대 위치

버튼을 눌렀을 때, 아래 실습파일의 position특성이 변경됩니다. 아래 버튼으로 position버튼을 누르고 스크롤을 하면서 각 특성의 차이점을 살펴봅니다.

<style>
div.test {
  position: posType;
  top: 10px;
  left: 20px;
}
</style>
<div>Original</div>
<div class="test">test2</div>
<div class="test">test3</div>

절대 위치의 정렬은 top:, bottom:, left:, right:를 기준으로 합니다. 문서(:absolute)나 창(:fixed), 상위객체(상위객체의 position:relative인 경우)을 기준으로 해당 기준점에서 어디에 위치하는지에 따라 다릅니다.

문단

순서

z-index는 ppt등의 '앞으로 가져오기', '뒤로 보내기'의 기능을 수행합니다. 숫자가 클수록 앞으로, 작을수록 뒤로 갑니다. 0보다 작으면, 기준보다 뒤에 있게 됩니다. 아래 예시에서 박스 안의 숫자는 우선순위를 나타냅니다. 그림배치 버튼은 빨간 상자의 z-index를 조정합니다.

같은 z-index에서는 먼저 선언 된 것을 먼저 그립니다. 빨간 박스는 index:5(버튼)에서는 4보다 우선순위가 높기 때문에 위에 있고, index:4(버튼)에서는 나중에 그려졌기 때문에 위에 있습니다.

테두리 응용

테두리의 두께와 색을 지정할 수 있으며, 투명(transparent)를 이용해서, 간단하게 삼각형을 그릴 수 있습니다.

1단계: 테두리 면적 키우기

border-width: 40px;

2단계: 테두리 면적 구분

border-color: blue red yellow;

3단계: 필요한 부분만 사용

border-color: blue transparent transparent;

4단계: 곡선 반영

border-radius: 70px;

5단계: 굵기 조절

border-width: 40px 20px 0 0;

6단계: before, after

도형을 합칩니다. 구체적인 설정은 보면서 맞춰야 합니다.

div :before,
div :after
{
  position: absolute;
  content: "";
  border-style: solid;
  transform: translate(86px, 25px) rotate(30deg);
}

적응형

사용자의 디바이스 환경과 상황에 따라 다르게 표현 할 수 있습니다.

@media print {
    body {
        font-size: 12pt;
    }
}

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}