다양한 레이아웃 속성들
웹 페이지 레이아웃을 만들 때 가장 먼저 해야 하는 것은 세분화 입니다.
하나의 페이지를 여러 구역으로 나누고, 해당 구역을 다시 박스 형태로 나누다 보면 어떤 식으로 코드를 작성해야 되는지 감이 잡힐 것이라고 생각 됩니다.
float 속성
1
2
3
4
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
height: 100px;
}
.left {
background-color: blue;
height: 100%;
width: 50%;
}
.right {
background-color: red;
height: 100%;
width: 50%;
}
위와 같은 상황에서는 어떻게 표현될까요? 왼쪽과 오른쪽 블럭이 각각 50%의 가로와 100px만큼의 크기를 가지고 1열로 정렬 될 것 같지만, 실제로는 2열로 배열되게 됩니다.
이러한 이유는 div의 특징으로 가로칸을 전부 차지하려는 특징이 있기 때문입니다.
이를 해결하기 위해, float(뜨다) 특성을 이용해 div를 띄울 수 있습니다.
1
2
3
4
5
6
.left {
float: left;
}
.right {
float: right;
}
위와 같이 float 특성을 추가로 부여하게 된다면, left는 왼쪽으로 right는 오른쪽으로 공중에 뜬 상태가 됩니다.
그러면 저희가 생각한대로, 1열에 50%씩 차자히는 레이아웃이 완성됩니다.
유의해야 할 점으로 float 특성은 떠있는 상태이므로, 이후에 배치되는 요소들은 떠있는 요소 아래로 들어가게 됩니다.
1
2
3
4
5
<div>
<div class="left-box"></div>
<div class="right-box"></div>
<div class="next-box"></div>
</div>
1
2
3
.next-box {
clear: both;
}
따라서 위와 같이 그 다음으로 오는 요소에 clear: both 속성을 부여해야 합니다.
번외
float 대신 다른 속성을 이용해 가로 정렬을 구현 할 수 있습니다.
가로 정렬이 되지 않는 이유로 div 태그가 display:block 속성이 있기 때문인데, 이를 display: inline-block으로 설정하면 해결됩니다.
다만, 이 경우에는 태그 사이에 공백 제거를 진행해야 하기에 잘 사용하지 않습니다.
background 속성
1
2
3
4
5
6
7
8
.main-background {
background-color: #000; /* 배경 색 */
background-image: url("img location"); /* 배경 이미지 */
background-size: cover; /* 배경 사이즈 */
background-repeat: no-repeat; /* 배경 이미지 반복 여부 */
background-position: center; /* 배경 이미지 상대 위치 */
background-attachment: fixed; /* 배경 이미지 고정 여부*/
}
위와 같은 방식으로 배경을 설정 할 수 있습니다.
position 속성
1
2
3
4
5
6
.container {
position: static; /* 정적 위치 -> 변경 불가 */
position: fixed; /* 고정 위치 -> 브라우저 창 (viewport) 기준 */
position: relative; /* 상대 위치 -> 자기 자신 기준 */
position: absolute; /* 절대 위치 -> 부모 위치 기준 */
}
이후 position 위치를 기준으로 top, right, left, bottom의 속성을 이용하여 요소의 상하좌우 위치를 변경 할 수 있습니다.
위치 값을 이용해 가운데 정렬
1
2
3
4
5
6
7
8
.center {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 사용자 정의(필수);
}
위의 값들을 모두 부여해 가운데 정렬이 가능합니다.
CSS 기본 설정
전체 폴더내에서 중복으로 사용되는 CSS 는 미리 설정하면 균일한 CSS를 사용함은 물론 편리하게 CSS를 코딩 할 수 있습니다.
아래는 기본설정 예시입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
color: #333;
font-size: 16px;
font-weight: 400;
font-family: "Nanum Gothic", sans-serif;
line-height: 1.4;
}
img {
display: block;
}
a {
text-decoration: none;
}
이외에도 크롬, 사파리, 엣지 등 여러 브라우저에서 전부 다른 스타일이 적용되어 보이기 때문에 CSS normalize를 통해 통일된 스타일을 적용 시킬 수 있습니다.
해당 링크의 CSS를 사용하거나 html 파일의 <head>부분에 아래 코드를 넣어 해결 할 수 있습니다.
아래 코드는 ‘reset css cdn’을 검색하면 나옵니다.
1
2
3
4
5
6
<!-- Reset Css -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
/>
```
Form 태그
<form> 태그를 이용해 만들 수 있는 form은 설문지 같은 여러 내용들을 사용자로부터 받아올 때 사용합니다.
따라서, 이러한 form태그 안에는 필연적으로 input 태그들이 포함되어야 합니다.
아래는 많이 쓰이는 input 태그들의 예시입니다.
1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" />
<input type="email" />
<input type="password" />
<input type="radio" />
<input type="file" />
<input type="checkbox" />
<input type="submit" /> // 전송버튼은, <button type="summit"></button>으로
대체가능.
<select>
<option>옵션1</option>
</select>
<textarea></textarea>
이런 input태그에는 아래와 같은 속성들이 들어갈 수 있습니다.
1
2
3
4
5
<input
placeholder="회색으로 미리 표시될 내용"
value="현재 input 태그 안에 입력되어 있는 값"
name="변수명"
/>
label 태그
radio button같은 input 태그를 설계할때는 텍스트인 label태그를 같이 사용하는 경우가 많습니다.
이런 경우 사용자 편의를 위해 label 태그를 클릭하더라도 input태그가 체크되도록 설정 할 수 있습니다.
1
<input type="radio" id="like" /> <label for="like">좋아요</label>
table 태그
html에서는 <table>속성을 이용하여 표를 만들 수 있습니다. 아래는 기본적인 table 예제입니다.
1
2
3
4
5
6
7
8
9
<table>
<thead></thead>
<tbody>
<tr>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
</table>
tr은 행(row)를 의미하고 td는 열(column)을 의미합니다. td대신 th를 이용해 강조처리를 할 수 있습니다.
thead와 tbody는 단순한 헤드 영역을 구분하기 위해 사용됩니다.
table 태그를 본격적으로 사용하기 위해서는 html 구조 작성 이후 추가적인 속성들을 부여 해야 합니다.
아래는 자주 사용되는 css 속성 예시 입니다.
1
2
3
4
5
6
7
8
table,
td,
tr {
border: 2px solid black; /* 테두리 속성 */
border-collapse: collapse; /* 테두리를 한줄로 표시 */
vertical-align: center; /* 텍스트의 수직 방향 설정 */
text-align: center; /* 텍스트의 수평 방향 설정 */
}
아래는 html에서 자주 사용되는 css 속성 입니다.
1
2
3
4
<td colspan="3"></td>
//3개 만큼의 열을 병합한 열 작성 코드입니다.
<td style="width: 50%">상품명</td>
// 이때 가로 길이는 전체 열에 영향을 미칩니다.
pseudo-class(가상 선택자)
가상 선택자를 이용해 우리는 어떤 가상의 상태에 CSS 속성을 부여해 줄 수 있습니다.
가상 선택자의 예시는 아래와 같습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.btn:hover {
background-color: red; /*마우스를 올려놓을 때*/
}
.btn:focus {
background-color: blue; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
background-color: green; /*클릭을 유지하고 있을 때*/
}
.box:before {
content: ""; /* box라는 클래스 앞에 가상으로 생성 */
}
.box:after {
content: ""; /* box라는 클래스 뒤에 가상으로 생성 */
}
해당 링크에서 다양한 가상 선택자들을 확인 할 수 있습니다.
CSS를 작성할 때 TIP
아래는 간단한 버튼을 예시로 든 CSS 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.btn {
display: block;
width: 10vh;
height: 5vh;
border-radius: 20px;
font-size: 28px;
background-color: #ddd;
cursor: pointer;
}
.btn-lg {
display: block;
width: 20vh;
height: 5vh;
border-radius: 20px;
font-size: 28px;
background-color: #ddd;
cursor: pointer;
}
해당 클래스들은 가로 넓이를 제외한 모든 값이 똑같은 클래스 입니다. 이런 경우에는 다음과 같이 중복된 속성을 하나의 속성으로 정의하고, 달라진 속성에 대해 추가적으로 정의를 하여 좀 더 간결한 CSS 작성이 가능합니다.
1
2
3
4
5
6
7
8
9
10
11
12
.btn {
display: block;
width: 10vh;
height: 5vh;
border-radius: 20px;
font-size: 28px;
background-color: #ddd;
cursor: pointer;
}
.btn-lg {
width: 20vh;
}
위와 같은 상황에서는 아래와 같이 html을 작성하게 됩니다.
1
2
<button class="btn"></button> //일반 버튼
<button class="btn btn-lg"></button> //큰 버튼
마찬가지로 색상 같은 요소를 변경하려면 색상 요소의 값만 가지고 있는 css를 만들어 추가적으로 부여해 주면 색상이 다른 버튼을 사용 할 수 있습니다.
CSS 작명법
변수명을 지을때 camelClass 같은 규칙이 있는 것 처럼 CSS 작명에서도 사용 할 수 있는 규칙이 있습니다. 바로 BEM(Block__Element–Modifer) 룰이라는 것인데, (해당 영역)__(해당 요소)–(세부 속성)와 같은 느낌으로 작성하면 됩니다.
아래는 간단한 예시입니다.
1
2
3
4
5
6
<div class="form">
<h1 class="form__title">사진보내기</h1>
<img class="form__img" />
<button class="form__button--send">전송</button>
<button class="form__button--cancel">취소</button>
</div>
해당 내용은 반드시 지켜야 된다기보다 이러한 방법도 있다고 생각하시면 될 것 같습니다.