2. 웹 레이아웃 기초

2. 웹 레이아웃 기초

2.1 매일 만나고 있는 레이아웃

2.2 박스 모델

2.2.1 박스 모델의 구성 요소

💡

웹 페이지에서 박스 모델을 어떻게 볼 수 있을까요?

 

 

먼저, 원하는 웹 페이지를 브라우저에서 엽니다. 그리고 마우스 오른쪽 버튼을 눌러서 “검사”를 선택합니다. 단축키로 열 수도 있는데, Windows나 Linux에서는 ‘Ctrl + Shift + I’를 누르고, macOS에서는 ‘Cmd + Option + I’를 누르면 됩니다. 개발자 도구가 열리면, 요소(Elements) 탭에서 확인하려는 부분을 마우스로 클릭합니다. 선택된 부분은 개발자 도구에서 강조되어 표시됩니다. 그리고 개발자 도구 창 위에서 “Styles” 또는 “Computed” 탭을 클릭하면 아래 그림과 같은 박스 모델이 표시됩니다. 이 정보를 통해 요소의 크기와 여백에 대한 정보를 확인할 수 있습니다. 웹 페이지의 디자인과 레이아웃을 이해하고 수정하는 데 도움이 됩니다.

2.2.2 박스 모델의 속성

• auto : 이 값은 기본값으로 설정되며, 브라우저가 박스 모델의 요소 내용에 맞게 너비와 높이를 자동으로 계산해 조정합니다.

• <크기> : px이나 em 등의 단위를 사용하여 너비와 높이의 값을 직접 지정합니다.

• <백분율> : 부모 요소의 너비와 높이에 대한 비율로 크기를 백분율(%)로 조정합니다.

• content-box
box-sizing 속성의 기본값으로, 여백의 크기를 제외한 콘텐츠 영역만 포함하여 박스 모델의 크기를 계산합니다. 주로 콘텐츠 영역의 width와 height만을 고려하여 크기를 지정할 때 사용됩니다.

• border-box
이 값은 콘텐츠 영역뿐만 아니라 테두리와 안쪽 여백까지 포함하여 박스 모델의 크기를 계산합니다. 따라서 박스의 크기를 미리 정해놓고 여백을 조절할 때 유용하게 사용됩니다.
 

.box1, .box2 {
    width: 200px;
    height: 200px;
    padding: 30px;
    border: 30px solid black;
}
.box1 {
    box-sizing: content-box;
}
.box2 {
    box-sizing: border-box;
}

box-shadow: inset <수평 위치> <수직 위치> <흐림 정도> <번짐 정도> <색상>

• <수평 위치> : 그림자가 수평으로 얼마나 떨어져 있는지를 나타냅니다. 양수 값은 오른쪽으로 그림자를 이동시키고, 음수 값은 왼쪽으로 그림자를 이동시킵니다.

• <수직 위치> : 그림자가 수직으로 얼마나 떨어져 있는지를 나타냅니다. 양수 값은 아래로 그림자를 이동시키고, 음수 값은 위로 그림자를 이동시킵니다.

• <흐림 정도> : 이 값을 별도로 지정하지 않으면 기본값인 0이 적용되며, 그림자가 진한 상태를 의미합니다. 이 값을 커질수록 그림자의 흐림 효과가 커져 그림자가 더 부드러워집니다. 음수 값은 적용되지 않습니다.

• <번짐 정도> : 그림자의 퍼짐 정도를 나타냅니다. 기본값은 0이며, 이 경우 그림자가 요소와 동일한 크기로 표시됩니다. 양수 값을 설정하면 그림자가 모든 방향으로 퍼져서 그림자의 영역이 더 넓게 표현됩니다. 음수 값을 설정하면 그림자가 모든 방향으로 축소되어 보입니다.

• <색상> : 그림자의 색상을 지정할 수 있습니다. 한 가지 색상만 지정할 수도 있고, 여러 색상을 공백으로 구분해 지정할 수도 있습니다.

• <inset> : 이 키워드는 선택 사항이며, 필수 요소는 아닙니다. 기본적으로 그림자는 요소의 외부에 나타나지만, 이 속성을 사용하면 요소의 테두리 안쪽에 그림자가 그려집니다. 이렇게 하면 요소 내부를 강조하거나 입체적인 느낌을 줄 수 있습니다.

.box1 { box-shadow: -15px -10px 5px 0px gold; }
.box2 { box-shadow: 1rem 10px 20px 5px rgba(0, 0, 0, 0.5); }
.box3 { box-shadow: inset 0 0 10px 10px green; }

• none: 테두리가 없음을 나타냅니다.

• hidden: 테두리를 숨깁니다. ‘none’과 비슷하지만 ‘hidden’은 요소 주위에 있는 테두리를 가리는 역할을 합니다. 주로 접근성에 관련된 요소에 사용됩니다.

• solid: 테두리가 실선으로 표시됩니다.

• dotted: 테두리가 점선으로 표시됩니다. 점들이 일정한 간격으로 나타납니다.

• dashed: 테두리가 파선으로 표시됩니다. 바느질 선과 같은 모양으로 선과 공백이 일정한 간격으로 번갈아 가며 나타납니다.

• double: 테두리가 평행한 이중선으로 표시됩니다.

• groove: 테두리가 오목하게 안쪽으로 파인 것처럼 표시됩니다. ridge의 반대입니다.

• ridge: 테두리가 볼록하게 바깥쪽으로 튀어나온 것처럼 표시됩니다. groove의 반대입니다.

• inset: 테두리가 요소 안쪽으로 들어가는 것처럼 표시됩니다. outset의 반대입니다.

• outset: 테두리가 요소 바깥쪽으로 튀어나온 것처럼 표시됩니다. inset의 반대입니다.

/* 모든 방향 */
.box1 { border-style: solid; }
.box2 { border-style: dotted; }

/* 위아래 방향 | 좌우 방향 */
.box3 { border-style: dotted solid; }
/* 위 | 오른쪽 | 아래 | 왼쪽 */
.box4 { border-style: hidden dashed double solid ; }

• 너비 지정: 속성값을 px과 같은 단위를 사용해서 직접 지정합니다.

• thin: 예약어로, 얇은 선의 테두리를 나타냅니다.

• medium: 예약어로, 중간 두께의 테두리를 나타냅니다.

• thick: 예약어로, 굵은 선의 테두리를 나타냅니다.

/* 모든 방향 */
.box1 { border-width: 10px; }
/* 위아래 방향 | 좌우 방향 */
.box2 { border-width: thin medium; }

/* 위 | 좌우 방향 | 아래 */
.box3 { border-width: thick thin medium; }

/* 위 | 오른쪽 | 아래 | 왼쪽 */
.box4 { border-width: 5px 1.5rem 0 10px ; }

/* 모든 방향 */
.box1 { border-color: green; }

/* 위아래 방향 | 좌우 방향 */
.box2 { border-color: red blue; }

/* 위쪽 */
.box4 { border-top-color: yellow; }

/* 오른쪽 */
.box4 { border-right-color: pink; }

border: <두께> <스타일> <색상>

h1 { border-bottom: 3px solid black; }

p { border: 1px dashed red;} /* 두께 | 스타일 | 색상 */

/* 모든 방향 */
.box1 { border-radius: 50%; }

/* 왼쪽 상단 | 오른쪽 하단 방향 */
.box2 { border-radius: 2rem 0 2rem 0; }

/* 왼쪽 상단 | 오른쪽 상단 방향 */
.box3 { border-radius: 20px 20px 0 0; }

/* 오른쪽 상단 | 오른쪽 하단 방향 */
.box4 { 
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
}

2.3 display 속성과 레이아웃

2.3.1 display 속성

2.3.2 display의 속성값들

div{
		display: block
}

div{
		display :inline
}

div{
	display: inline-block
}

div{
		display: none
}

2.3.3 요소를 숨기는 속성

visibility : hidden

A11Y

.a11y-hidden{

clip-path: inset(50%);

height: 1px;

overflow: hidden;

position: absolute;
}

2.4 Float / Position 속성

2.4.1 Float

• float: left : 요소를 왼쪽으로 배치하는 속성 값입니다.

• float: right : 요소를 오른쪽으로 배치하는 속성 값입니다.

• float: none : float 속성이 없음을 의미하는 속성 값입니다.

<body>
    <header>header</header>
    <aside class="box left">aside</aside>
    <main class="box right">main</main>
</body>

/*기본 스타일*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    padding: 20px;
    height: 100vh;
}
header{
    margin-bottom: 16px;
    height: 120px;
    border-radius: 15px;
    background-color: #B2C7D3;
}
.box {
    height: calc(100% - 140px);
    border-radius: 15px;
    background-color: #B2C7D3;
}
/*main과 aside에 float를 지정하여 레이아웃 배치*/
aside.left{
    width: 190px;
    float: left;
    background-color: #E0E0F9;;
}
main.right{
    width: calc(100% - 206px);
    float: right;
    background-color: #D6E3F8;;
}

<body>
    <header>header</header>
    <aside class="box left">aside</aside>
    <main class="box right">main</main>
    <!--footer 추가-->
    <footer>footer</footer>
</body>

/*기본 스타일*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    padding: 20px;
    height: 100vh;
}
header, footer{
    margin-bottom: 16px;
    height: 120px;
    border-radius: 15px;
    background-color: #B2C7D3;
}
.box {
    /*footer 영역을 위해 height값 조정*/
    height: calc(100% - 276px);
    border-radius: 15px;
    background-color: #B2C7D3;
    margin-bottom: 16px;
}
/*main과 aside에 float를 지정하여 레이아웃 배치*/
aside.left{
    width: 190px;
    float: left;
    background-color: #e0e0f9aa;
}
main.right{
    width: calc(100% - 206px);
    float: right;
    background-color: #D6E3F8aa;
}

• clear: left: float: left를 해제하는 속성 값 입니다.

• clear: right: float: right를 해제하는 속성 값 입니다.

• clear: both : float: left / float: right를 모두 해제하는 속성 값 입니다.

• clear: none : clear처리를 하지 않는 속성 값 입니다.

2.4.2 Position

position: static;

position: relative;

position: absolute

position: fixed;

position: sticky;

/*box_1이 box_2보다 위에 쌓이게 됩니다.*/
.box_1 {
    position: relative;
    z-index: 10;
}
.box_2 {
    position: relative;
    z-index: 9;
}

<body>
    <div class="box box1">
        box1_z-index: 10
    </div>
    <div class="box box2">
        box2_z-index: 9
        <div class="children_box">z-index: 100</div>
    </div>
</body>

.box {
    width: 200px;
    height: 200px;
    position: relative;
    display: inline-block;
}
.box1 {
    background-color: rgba(255, 255, 0, 0.8);
    position: relative;
    z-index: 10;
}
.box2 {
    background-color: greenyellow;
    position: relative;
    right: 100px;
    z-index: 9;
}
/*z-index를 가장 큰값으로 지정*/
.box2 .children_box{
    width: 80px;
    height: 80px;
    background-color: red;
    color: #fff;
    position: absolute;
    z-index: 100;
}

💡

z-index를 사용하지 않았다고 가정했을 때, 요소들이 쌓이는 순서는 기본적으로 나중에 작성된 요소라고 설명을 하였지만, position속성값 여부에 따라 달라지기도 하며, 이 때 말하는 속성값은 static속성값을 제외한 나머지 속성값을 의미합니다. 나중에 작성된 요소가 있더라도 앞에 position속성이 적용된 요소가 있으면 나중에 작성된 요소보다 위에 쌓이게 됩니다.

따라서, z-index가 지정된 요소가 없을 경우 쌓이는 우선순위는 높은 순서대로 아래와 같이 적용됩니다.

 

 

• position속성값을 갖는 요소들 중에 나중에 작성된 순서

• position속성값을 갖지 않는 요소들 중에 나중에 작성된 순서

• root

<body>
    <header class="relative_header">
        <h1 class="logo">로고영역</h1>
        <nav class="menu">메뉴 영역</nav>
    </header>
    <main>
        <div class="box">box1</div>
        <div class="box">box2</div>
        <button type="button" class="float_btn">float btn</button>
    </main>
</body>

/*기본 스타일*/
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    padding: 20px;
    height: 100%;
}
header{
    width: 100%;
    padding: 20px;
    border-radius: 15px;
    background-color:#B2C7D3;
    margin-bottom: 20px;
}
.box {
    width: 100%;
    height: 350px;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 15px;
    background-color:#E0E0F9;
}
button {
    width: 120px;
    height: 120px;
    background-color: #D9D9D9;
    border-radius: 100%;
    border: none;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.25);
}
/*position을 이용하여 레이아웃 배치*/
.relative_header {
    position: relative;
}
.menu {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.float_btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
}