Web design 연습 - layout 만들기

설명:

위와 같이 website 를 만들기 위한 layout 연습을 했습니다.

style sheet 를 어떻게 썼는지 설명하겠습니다.

style sheet

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: black;            
}
li {
    list-style: none;
}
#wrap {
    width: 1200px;
    height: 700px;
    margin: 0 auto;
    text-align: center;
    flex-wrap: wrap;
}
#header {
    background-color: #f6d6d6;
    display: flex;
}
#header h1 {
    width: 30%;
    height: 100px;
    border-right: 1px dashed #000;
}
#slider {
    background-color: #f6e4d6;
    height: 300px;
}
#container {
    height: 200px;
    display: flex;
}
.notice {
    background-color: #f6eed6;
    width: 33.3333%;
}
.banner {
    background-color: #eaf6d6;
    width: 33.3333%;
}
.gotomain {
    background-color: #d6f6db;
    width: 33.3333%;
}
#footer {
    width: 100%;
    height: 100px;
    display: flex;
}
.flogo {
    background-color: #d6f6f2;
    width: 20%;
}
.copyright {
    background-color: #d6f1f6;
    width: 60%;
}
.sns {
    background-color: #d6def6;
    width: 20%;
}
.nav {
    width: 80%;
    background-color: #f1b9a4;
    padding: 30px 40px;
}
.nav > ul {
    display: flex;
    justify-content: right;
}
.nav > ul > li {
    position: relative;
}
.nav > ul > li > a {
    background-color: #f19a7a;
    display: block;
    padding: 10px 40px;
}
.nav > ul > li > a:hover {
    background-color: #c57d63;
}
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 40px;
    background-color: #ee7245;
    width: 100%;
    display: none;
}
.nav > ul > li > ul > li > a {
    padding: 10px;
    display: block;
}
.nav > ul > li > ul > li > a:hover {
    background-color: #b85936;
}

기본적인 설정들을 위해서 body 전체를 wrap 으로 감쌌습니다.

* 과 a 태그, li 태그 그리고 #wrap 에 여백 초기화 설정, 글씨 초기화 설정, 그리고 크기 및 위치 설정을 했습니다.

 

나머지는 각자의 영역에 맞춰서 크기와 배경색을 설정했습니다.

 

우측 상단에 위치한 메뉴바는 부모와 자식 관계를 이용해서 공통의 설정을 했습니다.

 

여기에 쓰인 속성들에 대해서 설명하겠습니다.

CSS 속성 "justify-content: right"는 컨테이너의 내용물을 오른쪽에 맞추는 데 사용됩니다.
그러나 항목을 오른쪽에 맞추는 올바른 CSS 속성은 "justify-content: flex-end"입니다.
"justify-content" 속성은 컨테이너의 주축을 따라 플렉스 항목을 정렬하는 데 사용됩니다.
다음은 "justify-content"에 대한 가능한 값입니다:

- flex-start : 항목을 컨테이너의 시작 부분에 맞춥니다.

CSS 속성 "position: relative"은 요소를 상대적으로 배치하는 데 사용됩니다.
이 속성을 사용하면 요소가 기본 위치에서 이동될 수 있습니다.

"position: relative"를 사용하면 해당 요소에 대한 위치 지정을 할 수 있습니다.
상위 요소에 영향을 받지 않고 해당 요소를 이동하고 싶을 때 이 속성을 사용할 수 있습니다.

상위 요소가 "position: relative" 또는 "position: absolute"인 경우에만 작동합니다.
이 속성이 적용된 요소의 위치는 일반적으로 다른 요소에 대한 상대적인 위치입니다.

예시:

<div style="position: relative; top: 10px; left: 20px;">​
  이 요소는 원래 위치에서 위로 10px, 왼쪽으로 20px 이동합니다.
</div>

위 예시에서 "position: relative"은 해당 요소를 상대적으로 배치하고, "top"과 "left" 속성은 해당 요소의 원래 위치에서 위쪽으로 10px, 왼쪽으로 20px 이동시킵니다.

CSS 속성 "display: block"은 요소를 블록 레벨 요소로 표시합니다. 
이 속성을 사용하면 해당 요소가 새로운 줄에서 시작되며, 해당 요소의 너비는 부모 요소의 너비를 차지하고, 기본적으로 가로폭이 100%입니다.

"block" 요소는 "inline" 요소와는 달리 줄 바꿈을 하기 때문에 다른 요소와 수직으로 쌓이며, 일반적으로 레이아웃 구성 요소로 사용됩니다.

예시:

<div style="display: block; background-color: red; width: 100px; height: 100px;">
  이 요소는 블록 요소입니다.
</div>

위 예시에서 "display: block"은 해당 요소를 블록 레벨 요소로 표시하며, "width"와 "height" 속성은 해당 요소의 너비와 높이를 지정합니다. 
또한 "background-color" 속성은 해당 요소의 배경색을 지정합니다.

CSS 속성 "position: absolute"는 요소를 절대적으로 배치하는 데 사용됩니다. 
이 속성을 사용하면 해당 요소를 상위 요소 중 가장 가까운 "position: relative" 또는 "position: absolute" 속성을 가진 요소의 위치를 기준으로 배치할 수 있습니다.

"position: absolute"는 일반적으로 레이아웃을 위해 사용되며, 다른 요소와 겹치거나 부모 요소와의 상대적인 위치에 따라 배치할 때 유용합니다.

이 속성을 사용하려면 최소한 하나 이상의 위치 지정 속성(top, right, bottom, left)을 함께 사용해야 합니다. 이 속성을 지정하지 않으면 기본 위치에서 요소가 표시됩니다.

예시:

<div style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
  <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: red;">
    이 요소는 상위 요소를 기준으로 왼쪽에서 50px, 위에서 50px 떨어진 위치에 배치됩니다.
  </div>
</div>

위 예시에서 "position: absolute"는 해당 요소를 절대 위치로 배치하며, "top"과 "left" 속성은 해당 요소가 상위 요소의 왼쪽에서 50px, 위에서 50px 떨어진 위치에 배치되도록 지정합니다. 

이 경우 상위 요소는 "position: relative" 속성을 가지고 있습니다.