[TIL] Cascading Style Sheet😱

jay__ss·2021년 11월 3일

멋쟁이사자처럼 Front-End School

목록 보기

4/45

✅ [HTML] Table Tag

테이블을 만들 때 쓰는 태그이다. 기본적인 Table Row, Table Heading, Table Data를 의미한다.

    <!-- table tag -->

    <!-- table>(tr>th*3)+(tr>td*3)*3 -->
    <table>
        <thead>
            <caption>
                <!-- 이 테이블에 대한 설명-->
                책판매현황
            </caption>
            <colgroup>
                <col class="구분">
                <col class="이름">
                <col class="가격">
                <col class="판매량">
            </colgroup>
            <tr>
                <th>구분</th>
                <th>책 이름</th>
                <th>책 가격</th>
                <th>책 판매량</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hello1</td>
                <td>1000</td>
                <td>1</td>
            </tr>
		⋯중간생략⋯
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">총 판매량</td>
                <td>6</td>
            </tr>
        </tfoot>
    </table>


    <table>
        <caption>요일별 급식 만족도</caption>
        <tbody>
        <tr>
            <th></th>
            <th scope="col">월요일</th>
            <th scope="col">화요일</th>
            <th scope="col">수요일</th>
            <th scope="col">목요일</th>
            <th scope="col">금요일</th>
            <th scope="col">토요일</th>
        </tr>      
        <tr>
            <th scope="row">메뉴</th>
            <td>돈까스</td>
            <td>짜장면</td>
            <td>볶음밥</td>
            <td>해물라면</td>
            <td>잔치국수</td>
            <td>떡볶이</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <th scope="row">만족도</th>
            <td>3/5</td>
            <td>4/5</td>
            <td>1/5</td>
            <td>5/5</td>
            <td>2/5</td>
            <td>3/5</td>
        </tr>
        </tfoot>
    </table>

table>(tr>th*3)+(tr>td*3)*3
- emmet을 활용해 빠르게 코딩한다.
caption : 이 테이블이 가지는 의미를 뜻한다.(제목이나 짧은 설명)
table에서의 span이란 공간차지를 의미한다.

colspan="3" : 3개의 열을 차지하겠다.(→)
rowspan="2" : 2개의 행을 차지하겠다.(↓)
scope : th가 의미를 가지는 방향을 의미한다.

col이면 열에대한(↓), row면 행에 대한(→)
<thead>, <tbody>, <tfoot> 태그는 각각 머리글, 본문, 바닥 글을 의미한다. 테이블의 내용이 많을 때 <thead>와 <tfoot>는 머리글과 바닥 글을 고정시켜 놓는 요소로 사용합니다. 이 요소들은 테이블의 레이아웃에 영향을 미치지 않지만, CSS를 사용하여 디자인의 스타일을 지정할 수 있다.

✅ What is [CSS] ?

Cascading Style Sheet라는 떨어지는 방식의 스타일 시트라는 의미이다. 즉, 우선 순위라는 것이 존재한다. 이 때에 매겨질 수 있는 점수가 존재하는데, 가장 높은 점수를 획득한 선택자의 스타일이 적용된다.

특이하게도,
무조건 1순위를 부여하는 !important
동일 점수라면 가장 나중에 작성된 스타일이 적용되는 규칙이 있다.

HTML에서 가장 중요한 <열고> </닫기>가 있는 것처럼, CSS에서도 가장 중요한 규칙이 있다.

"selector의(꾸며줄 대상) property를(꾸미는 속성) value로 지정해줄거야"

라는 의미가 된다. 항상 잊지 말아야 할 세미콜론을 까먹지 말자!!

✅ inline > 내부 > 외부의 적용 방식

이러한 css를 적용하는 방법에는 세 가지가 있다.
아무리 css를 작성을 잘해도 적용을 시키지 않으면 스타일이 입혀지지 않는다!!!!

요소에 직접 스타일을 작성하는 인라인 방식

   <p style="color:red">레드</p>

html의 head부분에 <style>로 작성하는 내부 작성 방식

  <head>
    <style>
    	  p {
          color:red;
          }
    </style>
  </head>

.css라는 파일을 따로 만들어 <link>로 연결해주는 외부 작성 방식

<head>
  <link rel="stylesheet" href="./main.css">
</head>

.css파일에서 @import url("hello.css");라는 at-rule방식으로 불러올 수 있다

제목에서 처럼 만약, 동일한 선택자에 각기 다른 배경색상을 지정해준다면, 인라인 > 내부 > 외부의 우선 순위로 적용된다.

✅ Reset?!

기본적으로 브라우저 자체에 적용이 되어있는 스타일들이 있다. 하지만 개발자는 전적으로 html로는 구조만 잡아주고, css로 우리가 원하는 스타일들만을 적용 시켜주어야 한다. 이 때, 브라우저가 기본적으로 제공하는 스타일들을 초기화 시켜주는 작업이 필요하다.

참고사이트 : 에릭 마이어의 reset CSS https://meyerweb.com/eric/tools/css/reset/

✅ Selector (선택자)

스타일을 입혀줄 대상을 우선 지정해야 한다. 이것을 selector 선택자라고 하고, CSS에서 헷갈리기 쉬우니 처음에 잘 알아두어야 한다.

1. Type : 1 point!

1) * : 모든 태그를 선택한다. 문서 전체에 공통적으로 기본값을 지정해준다.
2) <tag> : 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용해준다.

2. Class : 10 point!

html 태그에 class라는 일종의 별명을 붙여줄 수 있다. 우리는 이것을 css에서 .class형태로 선택하여 스타일을 지정 할 수 있다.

3. Id : 100 point!

html 태그에 id라는 일종의 고유이름을 붙여줄 수 있다.(one & only!) 우리는 이것을 css에서 #id형태로 선택하여 스타일을 지정 할 수 있다.

<!-- html -->
<p>블랙베리</p>
<p class="galaxy">갤럭시</p>
<p id="iphone">아이폰</p>

/* css */
p {
  color: red;
}
.galaxy {
  color: blue;
}
.iphone {
  color: green;
}

라고 한다면,
블랙베리에는 빨간색이, 갤럭시에는 파란색이, 아이폰에는 초록색이 입혀진다. 각각 옆에 점수를 적어 놓았는데, 이게 바로 우선순위의 기본이다.
맨처음 p태그에 레드값을 주었음에도 전체가 레드가 안나오는 이유는, 그보다 더 높은 점수를 가진 스타일들이 입혀졌기 때문이다.
(주의) !important 는 1,000point를 가진다.

✅ 끝으로

HTML을 전반적으로 이해하고 CSS로 넘어오는 첫 날이다😎(물론, html구조 짜기나 태그에서 계속 찾아보며 공부하겠지만) 항상 HTML은 semantic한 구조를 짜는 과정을 잊어서는 안된다. 우리가 현재에 보는 모든 페이지는 전부다 처음에는 흰 바탕에 검은 글씨들로만 이루어 져있었음을 잊지말자. 선택자의 내용에는 아직 기록해야 할 부분이 많이 남아있다. 그만큼 중요하고, 처음에 잘 짚고 넘어가야한다.

✅ 오늘의 팁들

table>(tr>th*3)+(tr>td*3)*3 : 테이블 작성emmet
Shift + Del : 한 줄 삭제
Alt + w : tagwrap_VSC extension
<img src="주소" width="원하는 값"> : 마크다운 이미지 사이즈 조정

jay__ss

😂그냥 직진하는 (예비)개발자

이전 포스트

[TIL] Working Backwards

다음 포스트

[TIL] CSS Selector👿

2개의 댓글

쟈몽

2021년 11월 3일

최고최고 🤗

1개의 답글