CSS - 기본 다지기

▶ HTML 띄워쓰기

기본적으로 HTML은 한번의 스페이스바만 인식하기 때문에 아무리 많은 스페이스바를 표현하려 해도 출력되지 않는다. 따라서, 2칸 이상 띄워쓰기 효과를 나타내기 위해서는 2가지의 방법이 있다.

 

1.  

2. text-indent

 

첫 번째 방법은 HTML 태그안에서 사용하는 방법이다.

<p>안녕 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;예시입니다.</p>

위의 예시는 p태그에  를 입력하였다.  는 한번의 스페이스바를 누른 것과 같은 효과이다. 따라서 예시에서 6번의  를 입력하였으니 6번의 스페이스바를 누른것과 같다.

 

두 번째 방법은 css를 통한 방법이다.

text-indent: 50px;

 

text-indent를 통하여 50px만큼 앞에 공간을 띄운 뒤 텍스트를 출력해주는 방식이다. 

 

▶ border

HTML에서 텍스트를 입력한 뒤 해당 텍스트의 경계를 보기 위한 방법으로 border를 사용할 수 있다. 텍스트의 경계를 나타나게 하는 방법은 시작적으로 css를 수정하기 용이하기 때문에 css를 배울때 border를 사용하면 보다 쉽게 이해할 수 있다.

 

border 속성 사용

border: 두께, 선스타일, 선색깔의 순서로 사용할 수 있다. 사실 border는 순서에 관계가 없지만 전세계적으로 약속된 순서인 두께, 선스타일, 선색깔 순으로 작성하면 다른 개발자들이 쉽게 알아볼 수 있는 장점이 있다.

border: 1px dotted blue;

선스타일에는 dotted 말고도 dashed, solid, double, groove, ridge, inset, outset 등이 존재한다.

border는 경계를 표현할때 뿐만 아니라 밑줄을 표현할 때 사용되기도 한다. 밑줄을 표현하는 또 다른 방법에는 text-decoration: underline이 있지만 이 방법은 밑줄을 커스텀마이징 하기 어렵기 때문에 border-bottom을 이용하여 자신이 원하는 모양으로 수정해 줄 수 있다. 

border-bottom: 2px solid black;

★밑줄 뿐만 아니라 border-left, top, right을 사용하여 여러방향에서의 표현이 가능하다.

 

▶ box-sizing

box-sizing은 박스의 크기를 화면에 표시하여 쉽게 알아볼 수 있는 속성이다. 각 태그는 width와 height를 지정하고 테두리의 크기가 각각 다르기 때문에 사용자가 원하는 크기를 맞추기 힘든점이 존재하였지만 box-sizing을 통하여 해결이 가능 하였다. box-sizing은 테두리 크기만큼 즉 테두리를 포함하여 width와 height를 준다는 개념이다. 따라서 box-sizing을 통하여 보다 쉽게 통일된 크기로 맞출 수 있게 된 것이다.

box-sizing: border-box;

 

border-box뿐만 아니라 content 크기만큼 width와 height를 할당하는 content-box도 사용이 가능하다.

 

▶ ul & ol

리스트를 표현하기 위해서 사용하는 태그에는 ul과 ol이 있다. ul은 Unordered list의 약자로써 말 그대로 순서가 정해져 있지 않은 리스트를 표현할 때 사용하는 태그이고 ol은 Ordered list의 약자로써 순서가 정해져 있는 리스트를 표현할 때 사용하는 리스트이다.

리스트의 기본 구성은 다음과 같다.

<ul> // or <ol>
<li>리스트</li>
<li>리스트</li>
<li>리스트</li>
</ul>

ul 또는 ol로 감싸고 리스트의 목록을 만들기 위해서는 li태그를 이용한다.

리스트를 사용하다 보면 하나의 요소의 디자인만 수정이 필요한 경우가 생긴다. 그럴때는 자식요소를 이용하면 되는데 예시는 다음과 같다.

li:last-child // 리스트 첫 번째 요소
li:first-child // 리스트 마지막 요소
li:nth-child(odd) // 홀수인 요소
li:nth-child(even) // 짝수인 요소

 

▶ Table

table의 기본구조는 다음과 같다.

<table>
 <tr>
  <th></th>
  <td></td>
  <td></td>
 </tr>
</table>

tr = table row

th = table head

td = table data

rowspan은 행 병합(세로로 병합)을 의미하고 colspan은 열 병합(가로로 병합)을 의미한다.

 

▶ Input & Textarea

input태그와 textarea 태그는 각각 텍스트를 입력할 수 있다는 공통점이 있는데 textarea는 긴 텍스트를 입력받을 때 사용하는 차이점이 있다.

input태그에는 number, text, password와 같은 여러 type이 존재한다. 또한 placeholder를 사용하여 사용자가 보다 쉽게 텍스트를 입력하기한 도움말을 입력할 수 있다.

<input type="number" placeholder="태어난 년도를 입력해주세요" value="1996">

 value를 통하여 미리 값을 세팅해 놓을 수 있다.

 

input태그의 placeholder attribute를 변경하고 싶을때에는 다음과 같다.

input::placeholder {
	color: red;
}

다음과 같은 예시는 placeholer에 입력된 텍스트의 색을 빨간색으로 수정한 것이다.

세미콜론으로 attribute를 수정할 수 있지만 input요소 중 type이 text인 요소만 수정하고 싶다면 [ ] 를 사용하면 된다.

input[type="text"] {
	color: red;
}

 

▶ Hover

마우스를 올리면 효과를 주는것이 hover 속성이다. 대표적으로 마우스를 올리면 사용자가 클릭하고 있는지를 표현해주고 싶을때의 예시는 다음과 같다.

input:hover {
	cursor:pointer;
}

커서의 디자인은 종류가 다양하기 때문에 필요할 때 마다 검색하여 사용하자!