[TIL]부트캠프 11/04

👨‍💻TIL

테이블 태그

1. table, tr, th, td

• 테이블을 생성할 때 사용하는 태그들이다.
• tr 태그는 테이블의 행을 나눌 때 사용함!! (가로줄)
• th 태그는 열의 머리말을 나타낼 때 사용함!!
• td 태그는 table data로 tr로 나눈 각 셀의 값을 나타낼 때 사용함!!

2. colspan, rowspan

• colspan 태그는 테이블의 셀을 가로로 합병할 때 사용!
• rowspan 태그는 테이블의 셀을 세로로 합병할 때 사용!

3. thead, tbody, tfoot

• 이 태그들은 테이블의 레이아웃에 영향을 주지 않는다.
  하지만 지정해주면 테이블을 css나 javascript로 제어할 때 편하게 제어가 가능하다.

4. caption, colgroup, col

• caption 태그는 표의 제목을 설정할 때 사용한다. 이 때 테이블 내에서 가장 먼저 작성되어야 하고 한 테이블당 하나의 catpion만 사용 가능하다.
• colgroup, col태그는 주로 th와 td의 넓이 지정을 위해 사용한다.

<colgroup> 
	<col width="200px"> 
	<col width="50px"> 
</colgroup>

HTML5에 빠진 속성이기 때문에 지양하자.

---

Reset CSS & Normalize CSS

WHAT?

크롬, 사파리, IE 등 각 브라우저마다 HTML 요소의 기본 스타일을 가지고 있다. 따라서, CSS로 스타일링을 적용할 때 이러한 특징이 동일한 스타일 적용을 방해하기 때문에 이를 해결하기 위해서 나온 스타일 초기화 기법들이다.

Reset CSS

모든 브라우저 내장 스타일을 없애는 기법 으로, 그 어떤 스타일도 없는 상태에서 스타일링을 시작한다. h1 ~ h6 , p , em 등 각 태그에 적용되는 스타일을 모두 없앤다.

https://meyerweb.com/eric/tools/css/reset/

Normalize CSS

모든 브라우저의 스타일을 동일하게 하는 기법 으로, 스타일을 없애는 Reset.css와는 다르게 기존 스타일을 유지하되 브라우저들의 다른 스타일을 고치는 방식이다. 가장 유명한 스타일은 necolas의 normalize.css이며 이를 깃헙 에서 유지하고 있다. 실제 코드의 주석을 보면 각 요소를 스타일링 하는 이유에 대해 설명하고 있다.

https://necolas.github.io/normalize.css/8.0.1/normalize.css
다운로드 후 css 적용!!

차이점과 선택

Reset.css의 경우, 모든 것을 초기화하기 때문에 스타일을 처음부터 적용해 나가는 것이 힘들 수 있고 브라우저의 버그를 고치는 것이 아니기 때문에 각 브라우저마다 다른 버그를 발생시킬 수 있다. 하지만, 아예 초기화를 하는 것이기 때문에 업데이트가 필요없다.

Normalize.css의 경우, 브라우저가 업데이트 되어서 새로운 내장 스타일이 적용될 때마다 각 브라우저의 다른 점을 파악하여 스타일을 업데이트해야 하기 때문에 끊임없는 버전 업데이트가 있어야 최신 스타일을 유지할 수 있다. 하지만, 브라우저의 버그를 고치기 때문에 버그가 발생할 걱정을 덜고 기본 스타일을 어느정도 유지하기 때문에 스타일링에 힘을 덜 들일 수 있다.
나는 Normalize.css 사용에 익숙해지도록 해야겠다ㅎ.ㅎ

출처 : https://github.com/baeharam

CSS 적용방식에 대해..

import 방식을 사용할 경우에 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있고, 엣지에서는 import된 css가 적용이 되지 않는 문제도 있기 때문에 link 태그로 외부에서 불러오는 방식이 더 유용하다!

By 멋사 Binky 멘토님 🙇‍♂️

---

CSS Selector

전체 선택자

전체 선택자를 통해서 모든 HTML 요소에 접근을 할 수 있다. 전체 선택자는 * 을 사용한다.

*{	
   margin: 0 auto;
}  

태그 선택자

태그 이름을 사용하여 나타낸다.

p, h1 {
   font-size: 2em;
} 

Class & Id

class 속성은 한페이지에 여러개가 존재할 수 있다. 따라서 동일한 class 속성이 들어간 요소들을 동시에 식별 가능하다.
앞에 .(점)을 붙여서 사용한다.

.element {
	color: red;
} 

id 속성은 페이지에 있는 요소를 유일하게 식별할 때 사용한다. 따라서 단 한개만 존재해야한다. 앞에 # 을 붙여서 사용한다.

#element {
	color: red;
} 

👨‍🏫적용되는 우선순위는 id > class 순이다!!

하위 선택자 & 자식 선택자 & 형제 선택자

1. 하위선택자는 선택자 사이를 공백으로 표시한다. 자손 요소를 전부 선택한다.

section ul {
    color: blue;
} // section 아래 있는 모든 ul태그를 가르킨다.

2. 자식선택자는 선택자 사이를 > 으로 표시한다. 바로 아래의 하위 요소만 적용하게된다.

section > ul {
    color: blue;
} // section 바로 아래 있는 ul태그 하나를 가르킨다.

3. 인접 형제 선택자는 선택자 사이를 + 으로 표시한다. 앞 요소 직후에 나오는 뒤의 요소를 적용한다.

h1 + p {
    color: blue;
} 

4. 일반 형제 선택자는 선택자 사이를 ~ 으로 표시한다. 앞 요소 뒤에 나오는 모든 요소를 적용한다.

h1 ~ p {
    color: blue;

가상 클래스 선택자

:first-child
첫번째 자식의 요소를 선택

:last-child
마지막 자식의 요소를 선택

:nth-child(n)
n번째 자식의 요소를 선택

:hover
마우스가 해당 요소 위에 있을 때 적용

:focus
마우스가 해당 요소를 클릭하면 적용

:active
마우스가 해당 요소를 클릭하고 떼는 순간까지 적용

가상 요소 선택자

::after
선택 요소 뒤에 적용

::before
선택 요소 앞에 적용

!important 지양하기! 나쁜습관이다..
style 적용 우선 순위는 id > class > tag !

---

🤷‍♂️ TMI

오늘 6시 땡치자마자 용산 아이파크몰에 가서 쉑쉑버거먹구 이터널스 보고왔다.. 새벽 3시..이제야 복습하고 올린다...
이터널스 짱 재밌어요! 꼭보세요 꼭!