섹션 9: 멋있는 웹사이트 만들기 [24일차]

Z-인덱스 - 무엇일까 & 왜일까?

문서 흐름과 poisition 속성을 사용해서 HTML 요소의 기본 위치를 변경하는 방법에 대해 배웠습니다.

기본 요소 위치를 변경하면 한 요소가 다른 요소와 겹치고 제어하려는 위치에서 어떤 요소가 다른 요소 위에 배치되는지 알 수 있습니다.

이러한 경우 z-index가 필요하죠.

어떻게 작동하나요

CSS 속성인 z-index는 위치 지정 요소(즉, position 속성이 static 값과 다른 값으로 적용된 요소)의 z-order를 정의합니다. z-order는 z-축을 참조하므로 해당되는 경우 요소가 서로 위에 쌓이는 방식을 제어합니다.

HTML 요소의 기본값은 auto로 설정되며 이는 0에 해당하죠. z-index가 높은 위치에 있는 요소는 z-index 값이 낮은 요소 위에 배치됩니다.

코드 예제

HTML

1.  
2. Element 1
3. Element 2
4.  

CSS

1. div {
2. width: 200px;
3. height: 200px;
4. text-align: center;
5. color: white;
6. }
7. #first {
8. background-color: rgb(55, 117, 209);
9. }
10. #second {
11. background-color: rgb(233, 137, 59);
12. }

기본적으로 두 요소 모두 문서 흐름을 따르며 요소 1이 먼저 표시되고 요소 2가 두 번째로 차례로 표시됩니다.

이제 #second에 다음 코드를 추가합니다.

1. position: absolute;
2. top: 0;
3. left: 0;

요소 2는 문서 흐름에서 가져와서 요소 1 위에 표시됩니다.

z-index: 1을 #first에 추가해도 z-index는 기본 값인 position: static을 제외하고 배치된 요소에만 영향을 미치므로 z-축을 따라 요소의 순서가 변경되지 않습니다.

position: relative를 추가하면 #first를 기준으로 요소 1이 요소 2 위에 다시 표시됩니다.

 

좋은 웹사이트를 만들기 위해서 명심해야 할 것

• 여려 기능을 차근 차근 추가하는 것
• 웹 사이트를 통해 전달하고 싶은 핵심 정보 생각하기
• 웹 사이트 과장 금지

 

웹 사이트 제작에 있어서 중요한 점

1. 크기와 간격

웹사이트의 사용자 경험을 향상시키는 데 있어서 크기와 간격은 매우 중요합니다. 적절한 크기와 간격은 정보를 명확하게 전달하고 사용자가 웹사이트를 쉽게 탐색할 수 있게 합니다.

• 크기: 요소의 크기는 중요도를 시각적으로 전달합니다. 예를 들어, 큰 제목은 사용자의 주목을 끌고 중요한 정보를 강조합니다.
• 간격: 여백(마진과 패딩)은 요소 간의 관계를 설정하고 시각적 편안함을 제공합니다. 너무 많거나 적은 간격은 정보의 흐름을 방해할 수 있습니다.

2. 올바른 글꼴 선택하기

글꼴은 웹사이트의 톤과 성격을 설정하는 데 중요한 역할을 합니다. 올바른 글꼴을 선택하는 것은 읽기 쉽고, 브랜드의 이미지에 맞는 웹사이트를 만드는 데 필수적입니다.

• 가독성: 가독성이 높은 글꼴을 선택하세요. 너무 화려하거나 복잡한 글꼴은 읽기 어려울 수 있습니다.
• 일관성: 전체 웹사이트에 걸쳐 일관된 글꼴을 사용하여 프로페셔널한 느낌을 줍니다.
• 적합성: 브랜드의 성격과 맞는 글꼴을 선택하세요. 예를 들어, 현대적인 브랜드는 깔끔하고 현대적인 글꼴을 사용하는 것이 좋습니다.

3. 회색, 기본 & 강조 색상의 중요성

색상은 사용자의 감정과 반응에 큰 영향을 미칩니다. 특히 회색조, 기본색, 그리고 강조색은 웹사이트의 전반적인 느낌과 사용자 경험을 결정하는 데 중요한 역할을 합니다.

• 회색조: 배경, 텍스트, 선 등의 요소에 사용되며, 다른 색상과 대비되어 디자인을 균형있게 만듭니다.
• 기본색: 브랜드의 주요 색상으로, 일관성과 인식을 위해 사용됩니다.
• 강조색: 중요한 버튼이나 링크에 사용되어 사용자의 주의를 끌고 행동을 유도합니다.

웹사이트 디자인에 있어서 이러한 요소들은 서로 상호작용하며, 잘 조화될 때 강력한 사용자 경험을 만들어냅니다. 사용자 중심의 디자인을 목표로 하며, 각 요소의 중요성을 이해하고 적절히 적용하는 것이 성공적인 웹사이트 제작의 열쇠입니다.