TIL 1. html/css 기초

1. span

• span태그는 display 속성이 inline이므로 차지하는 영역이 content가 있는 만큼만.
• 따라서 정렬을 해도 content가 있는 곳까지만 정렬되므로 변화가 없다.
  

2. indent

• html코드 내에서 스페이스를 넣어도 화면에서는 바뀌지 않는다.
• indent를 적용하기 위해서는 css에 text-indent: px; 를 통해 적용한다.

3. border

• 순서는 정해진 규칙은 없지만 관습적으로 border: 두께 선스타일 선색깔로 작성한다.
• 텍스트에 밑줄을 그을 때 text-decoration: underline;으로도 할 수 있지만, 커스터마이징이 어려우므로 대부분은 border-bottom을 사용해 밑줄을 구현한다.

4. box-sizing

• box-sizing은 기본적으로 content-box인데, 이는 width를 설정했을 때 너비가 content의 너비만을 의미하고 padding은 별도로 계산하기 때문이다.
• 이를 해결하기 위해 box-sizing을 border-box;로 설정하면 width가 padding을 포함한 너비가 되어 그 안에서 padding을 조절해 주면 된다. 이는 각 박스마다 설정해 주어야 하는데, 이러한 불편함을 해결하기 위해 "*" 선택자를 쓰면 모든 태그에 대해 border-box가 설정된다.

* {
  box-sizing: border-box;
}

5. img

• img의 크기를 조절할 때는 width/height 중 하나의 값만 입력해도 같은 비율로 알아서 조절된다.

6. selector 표기법

• 같은 태그가 여러개 있을 때 해당 태그의 순서를 간단하게 표기할 수 있는 selector 표기법이 존재한다.
  
• 이를 사용하면 처음/마지막 태그나 홀수/짝수번째 태그에만 css적용이 가능하다.

7. table

• th: table heading을 1행과 1열에 사용할 때는 1행에 빈 th를 생성해야 내용에 맞게 정렬된다.
• 병합: colspan="병합할 열 개수" / rowspan="병합할 행 개수" 병합하므로 다음 열/행의 요소는 입력하지 않는다.
• placeholder에 css를 적용하고 싶을 때는 input::placeholder {}와 같이 표현해준다. (띄어쓰기 없음)
• input의 타입(text, password 등)에 css를 적용할 때는 input[type="text]{}와 같이 표현해준다.

8. input

• input/textarea를 분리할 때는 각각을 div태그로 감싸서 영역을 분리해 준다. 그리고 양식을 통일할 때는 각 div태그 위에 부모 div태그로 감싸서 부모 태그에 css를 적용한다.
• 마우스 포인터의 모양을 변경해주는 cursor 속성은 다양한 종류가 있으므로 필요할 때마다 https://www.w3schools.com/cssref/pr_class_cursor.asp 에서 확인하여 사용한다.