[css] 달력 만들기

zero_0·2021년 10월 23일
1

FE 학습

목록 보기
9/22
post-thumbnail

초기 달력 모습

  • border-collapse 표 테두리(border)를 분리(separated)할지 합칠지(collapsed)를 결정합니다.
    이거 안쓰면 HTML 기본이 분리(spearated)라서 표에 간격이 생긴다.
    이런식으로 말이다. ↓

width, height 서식주기

  • td에 높이와 넓이 120px씩 주었다.

요일을 td-> th로 변경

  • th태그는 컬럼 제목을 표시하기 위한 thread 태그로 th 태그에는
    { text-align: center; font-weight: bold } 서식이 디폴트로 적용된다. 따라서 더 적합하다.

  • 그 후에 th 스타일 속성을 더 주었다.

vertical-align 서식

  • vertical-align 태그 내부 내용이 수직 방향으로 어디에 정렬할지를 지정한다. 같은 베이스 라인(baseline)에서 가장 높은 요소에 윗선이 맞춰진다. top, middle, bottom


    출처 : deepbm.log

:nth-child(n) 셀렉터

  • td th 의 첫번째 글자 색을 빨간색으로 변경
  • nth-last-child(1)의 경우 td의 자식중 마지막 요소를 지정
  • 동일한 서식을 부여할 때, CSS 셀렉터에서 쉼표문자로 태그를 나열하면 보기 더 좋다! (쉼표빼면 부모 자식 의미가 되어버림)
td:nth-child(1), th:nth-child(1) {color:red;}
td:nth-last-child(1), th:nth-last-child(1) {color:blue;}

적용하면 이런 모습 ↓ ,에 색 지정

block 태그와 inline 태그

가로 방향으로 한 줄을 다 차지하는 태그를 block태그라고 하고,
그렇지 않은 태그를 inline 태그라고 부릅니다.

  • block 요소
    <address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
  • inline 요소
    <span>, <a>, <i>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
  • block
    block은 한 영역을 차지 하는 박스형태 을 가지는 성질입니다. 그렇기 때문에 기본적으로 block은 width값이 100%가 됩니다. 그리고 라인이 새로 추가된다는 것을 알 수 있습니다.

    block은 height와 width 값을 지정 할 수 있다.
    block은 margin과 padding을 지정 할 수 있다.

  • inline
    inline은 주로 텍스트를 주입 할 때 사용 되는 형태입니다. 그렇기 때문에 기본적으로 block처럼 width값이 100%가 아닌 컨텐츠 영역 만큼 자동으로 잡히게 되며 라인이 새로 추가 되지 않습니다. 높이 또한 폰트의 크기만큼 잡힙니다.(line-height로 설정이 가능 하긴 합니다.)

    width와 height를 명시 할 수 없다.
    margin은 위아래엔 적용 되지 않는다.
    padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다.

  • inline-block
    inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다. inline-block의 특징은 다음과 같습니다.

    줄바꿈이 이루어지지 않는다.
    block처럼 width와 height를 지정 할 수 있다.
    만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

출처 : https://seungwoohong.tistory.com/23

출처 : 이승진 교수님 수업

profile
차근차근 채워가는 it일지

0개의 댓글