멋쟁이사자처럼 프론트엔드스쿨 TIL (0405)📖

table

• <caption> 테이블의 제목이나 설명
• <thead> : 머리글, <tbody> : 본문, <tfoot> : 바닥글
• <tr>: 행을 나눌 때 사용, <th>: 행, 열의 머리말, <td>:<tr>로 나눈 행에서 셀을 분리할 때 사용
• colspan, rowspan은 병합을 위해 사용. col 가로로 병합, row 세로로 병합.
• colgroup, col 한 열에 공통적인 스타일을 주기 위해 사용
  (써보지 않아서 잘 모르겠음.)
• scope : th와 td와의 연결관계 설정
  (SEO와 Screenreader를 위해)

input

왜 input type="hidden"을 사용할까?
이런 식으로 js로 입력창을 불러왔을 때 데이터를 전송해주는 역할을 해주기 위해서 사용! (자주 사용됨)

💻강사님이 editer 가져온 곳

• form안에 button은 Enter로 접근이 가능

CSS

CSS3는 없다고 생각하는 것이 맞다. 그러니 CSS로 통칭해서 부르도록 하자!

block, inline-block, inline

• block?
  • 사용 가능한 공간을 양 옆으로 100% 사용
  • 사용하지 못하는 부분은 margin으로 채움
  • width 와 height, padding 과 margin 을 사용해 스타일 컨트롤 가능
  • ex. <div>, <p>, <h1>
• inline
  • 컨텐츠 박스의 크기만큼 공간 차지. 새 줄로 행을 바꾸지 않음
  • width, heigth 사용 불가
  • padding, margin 속성 사용 가능 (좌우만 가능, 상하는 불가)
  • ex. <span>, <a>, <em>
• inline-block
  • inline과 같이 한 줄에 나란히 배치.
  • width와 height 속성 사용 가능.
  • ex. <button>, <input>, <select>

inline-block

• 인라인 요소의 여백은 폰트 여백이다. (img의 여백도 폰트 여백.)
  • 해결방법 5가지 정리하기 (아직 정리가 덜 됨 ㅠㅠ)

내부 CSS, 외부 CSS

각각 장단점이 있음.
ex. 네이버는 외부 CSS 다음은 내부 CSS

• 내부 CSS
  • 빠르게 고칠 수 있음. 변경에 대한 미리보기 등의 장점 👍
  • HTML을 복잡하게 만든다. 유지보수가 어려움👎
• 외부 CSS
  • 보다 쉽게 그룹화 가능 👍
  • 스타일 클래스를 만들 수 있음 👍
  • 페이지의 로딩 시간을 증가시킬 수 있음👎

CSS charset?

• 스타일 시트에 쓰이는 문자 인코딩을 지정하는 것.
• 첫번째 요소여야 함.

HTML 추가

• h1 ~ h6 는 <article>이나 <section>에 넣는 것을 권고
  익명 영역을 생성해 문단을 나눠주기 때문

어제 실습 수정

datalist 드디어 고쳤다...!
옵션을 잘못 설정했던 것 같음
그리고 date time 도 border 없애주었다...^^

마치며

드디어 CSS 입성...!
분명 열심히 들었는데 제대로 메모하지 못한 부분이 많네...
다음에 시간 내서 더 찾아보고 추가하도록 하자.
table... 어려워...

📚과제

• table로 달력 만들기 (html 50 % 진행 그런데 스타일 어떻게 줘야하는지 하나도 모르겠다....!)

만약 틀린 부분이 있다면 댓글 주세요!