Tabular data, CSS 요소, RESET CSS, Validator

<SeongHun />·2022년 4월 5일

CSS TIL html 멋쟁이 사자처럼

CSS

목록 보기

10/11

오늘의 키워드📌

Tabular data
블록 레벨 요소 / 인라인 요소
RESET CSS
Validator

1. Tabular data

`<table>`

<table> 태그는 테이블을 생성할 때 사용한다. 하나의 테이블을 정의한다.
컨테이너 요소로서 그 내부에는 제목(caption)과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용된다.

`<caption>`

테이블의 제목이나 설명을 의미한다.
<table> 요소의 첫 번째 자식으로 사용해야 한다.

<table>
		<caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
</table>

`<thead>, <tbody>, <tfoot>`

각각 머리글, 본문, 바닥 글을 의미한다.
테이블의 내용이 많을 때 테이블의 구역을 나누는 요소로 사용한다.
테이블 레이아웃에 영향을 미치지 않지만, CSS를 사용해서 스타일 지정이 가능하다.

colspan, rowspan 속성

<td> 또는 <th> 태그 요소에 colspan 속성을 사용하면 열간 병합을 할 수 있다. 열끼리 병합하기 때문에 가로 방향으로 셀들을 병합한다.
rowspan 속성을 사용하면 행간 병합이 가능하다. 행끼리 병합하기 때문에 세로 방향으로 셀들을 병합한다.
값으로 병합하고 싶은 셀의 개수를 지정해 준다.
colspan="3" : 옆으로 세칸
rowspan="3" : 아래로 세칸

<table>
    <caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th colspan="2">이름</th>
        <!-- <th>판매량</th> -->
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td rowspan="2">100</td>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터2</td>
        <!-- <td>100</td> -->
    </tr>
</table>

`<colgroup>, <col>`

<colgroup> 과 그 자식 요소로 쓰이는 <col> 요소를 통해 한 열에 공통적인 스타일을 주는것도 가능하다.
<col> 요소는 각 테이블의 열을 의미한다.

`scope`

<th> 요소에 scope 속성을 사용해 <td> 와의 연결 관계를 설정할 수 있다.
row : 행 방향 진행. 왼쪽에서 오른쪽
col : 열 방향 진행. 위에서 아래

scope, colgroup 참고

2. 블록 레벨 요소 / 인라인 요소

블록 레벨 요소

대표적인 블록 레벨 요소 : <article>, <header>, <nav>, <section>, <div>
블록 레벨 요소는 한 개의 독립된 덩어리로 화면의 가로 폭 전체를 차지한다.

인라인 요소

대표적인 인라인 요소 : <span>, <strong>
인라인 요소는 콘텐츠의 자신의 크기 만큼 영역을 가지는 요소다. 인라인 요소의 정렬은 텍스트 정렬의 영향을 받는다.

인라인 요소 : span

<span> 요소는 인라인 요소로서 내용 중 일부분에 속성을 부여하고 싶을 때 주로 사용한다.

<p>
    레이아웃을 나눌 때
    <span style="color:red;">
        설계가
    </span>
    가장 중요합니다.
</p>

3. RESET CSS

RESET CSS 무엇인고?

브라우저 제작사마다 기본적으로 브라우저가 제공하는 스타일이 모~두 다르다!
브라우저마다 요소의 기본 스타일이 다르다보니 개발자들은 디자이너에게 받은 웹디자인을 구현하기 위해 각각의 브라우저에 따라 다른 스타일을 부여 해야하는 문제가 발생한다.

이 문제를 어떻게 해결해야 될까?

에릭 마이어의 reset CSS

https://meyerweb.com/eric/tools/css/reset/
매우 오래전부터 널리 사용된 방법이다. 브라우저의 모든 기본적인 스타일 속성들을 완전히 초기화 시켜서 모든 스타일을 처음부터 만들도록 한다. reset.css 코드를 그대로 사용할 수도 있고, 커스텀 스타일을 추가해서 사용하기도 한다. 하지만 슬프게도 2011년 이후로 업데이트가 중단 되었다.

normalize.css

https://necolas.github.io/normalize.css/
노멀라이즈는 브라우저의 기본적인 스타일 속성들을 모두 제거하지 않는다. 대신 정상으로(normal) 만든다는 (~ize) 이름처럼, 브라우저 스타일을 기반으로 하고 거기에 추가적인 스타일을 덧붙여 어떤 브라우저에서든 비슷하게 보이도록 통일한다. 단! 완전히 똑같이 만드는 것은 아니다!

즉, reset.css가 기존 스타일을 모두 제거하는 적극적인 방법이라면, normalize는 브라우저 기본 스타일을 존중하면서 추가적인 스타일을 덧붙이는 좀 더 부드러운 방법이다.

단순히 스타일을 수정하는 것을 넘어서 브라우저마다 가지고 있는 단점을 보완함으로써 오늘날 가장 많이 사용되는 reset css가 되었다!

normalize.css와 비슷한 철학으로 탄생한 sanitize.css도 있다. 사촌쯤으로 생각하자!

CSS Remedy

https://github.com/jensimmons/cssremedy
만약 CSSWG에서 CSS를 제작하는 사람들의 입장이라면, 어떤식으로 브라우저에게 기본 스타일을 주게 될까 라는 생각에서 출발한 차세대 CSS reset 프로젝트다.
때문에 단순히 스타일만 생각하는 것이 아닌, 하위 브라우저 호환 걱정없이 CSS가 브라우저에서 효율적으로 작동하도록 하는 것이 목표이다.

이 프로젝트는 아직도 진행중이며, 완전한 메이저 버전은 언제 나올지 알 수 없기 때문에 유의하자! 공부를 목표로 깃허브에서 코드를 살펴보는 것은 아주 좋을 거 같다!

4. validator

Markup Validation Service

W3C 마크업 검증 서비스(위키피디아)
Markup Validation Service는 W3C의 유효성 검사기로 인터넷 사용자가 문서에서 문서 유형 정의에 대해 잘 구성된 마크업인지 확인할 수 있도록 해준다. 마크업 유효성 검사는 웹 페이지의 기술적 품질을 보장하기 위한 중요한 단계다. 단, 웹 표준 준수의 완전한 척도는 아니다!

🔼 Markup Validation Service 사이트 주소

🔼 이상이 없으면 Document checking completed. No errors or warnings to show. 메시지를 출력해 준다. 단, 위에서 언급했듯이 웹 표준 준수의 완전한 척도는 아니다!

🔼 이상이 있는 부분은 짚어준다.

몰랐던 점 ✏️

<input type="time"> 에서 min 과 max 속성을 사용할 때는 9:00 이 아닌 앞에 0 을 붙인 09:00 형식으로 작성한다!
section, article 에 heading 이 없으면 validator에서 Warning 이 뜬다 !!!!
table 에는 scope 속성은 스타일에 영향을 주지는 않지만 웹 접근성에 도움을 준다!
font에 Baseline 과 X-Height 정도는 알아두자! CSS에 대한 깊은 이해: 폰트 매트릭스, line-height와 vertical-align | WIT블로그
CSS 명칭 : selector { property : value;}

오늘 하루를 정리하며.. 🌃

매일 교육을 받으면서 느끼는 건데, 강사 분들과 운영진 분들이 정~말 많이 준비를 하신게 느껴진다. 그리고 그동안 쌓아오신 경험에서 느껴지는 세심한 디테일 한 부분들도 너무 좋다.
(온갖 예외 사항들을 산전수전 다 겪어오신 분들이라 그런건가..)

어떤 부분에서 느꼈는지 간단하게 몇 가지를 써보자면..

준비된 자료들(질과 양 모두 완벽!)
축적된 데이터와 많은 피드백을 바탕으로 짜여진 교육계획과 교육 환경
감성적인 응원이 아닌 실질적인 응원
- 이 부분에서 많이 느꼈다. 단순히 멘탈관리를 위해 "할 수 있습니다!" 응원을 해주시는게 아닌 팩트와 데이터 기반으로 응원(Feat. 영웅님)을 해주신다.
- 오늘도 느낀 계기가..
  인프런에 출시하신 강의 100% 할인 쿠폰를 주셨는데, 진짜 너무 멋있었다!