TIL # 4

block & inline css에서 설정하기
block과 inline인 태그도 css를 사용하여 다른 스타일로 바꿀 수 있다.

.inline-p {
  display: inline-block;
  }
 .block-span {
  display: block;
}

None으로 설정하기
화면에서 보이지는 않지만 interactive한 웹 구현 가능

.hide {
  display: none;
}

클래스와 ID
클래스와 ID들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다.

margin
magin(left, right)을 auto로 설정하면 가로 중앙에 오게 할 수 있음

.center {
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

테이블 만들기
table, thead, tbody, tr, th, td 등의 태그가 필요함.
테이블은 항상 table 태그로 감싸져있다.
tr : 테이블 행
th : 테이블 헤딩 (가운데 정렬, 글씨 두께 두꺼움)
td : 각각의 셀
rowspan : 행 병합
colspan : 열 병합

<table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>

테이블 선 추가하기

.border-table th, .border-table td {
  border: 1px solid black; 
}

테이블 색 추가하기
bgcolor = "색상"

<td bgcolor="gray" colspan="2">Yoga marathon</td>

폰트 굵기

폰트 정렬 text-align
left : 왼쪽 정렬
right : 오른쪽 정렬
center : 가운데 정렬
justify : 양쪽 정렬
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속

리스트 만들기
ul, ol로 감싸기 > li
list-style: none;

input 만들기
textarea는 input보다는 더 긴 텍스트를 입력받고 싶을 때 사용
미리 값을 세팅해놓고 싶을 수가 있죠. 그때는 value라는 attribute를 사용
input은 시작태그, 끝태그로 구성되지 않음

float 만들기

float: left;
float: right;
clear: both;

반응형 웹 Responsive Web
하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미

media query
Responsive Web 을 구현하는 CSS technique. @media 라는 문법으로 작성.

@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

mediaQuery.scss

$phone: "only screen and (max-width: 768px)";

$desktop: "screen and (min-width: 769px)";

box.scss

@import './mediaQuery.scss';

@media #{$phone} {
	.big-box {
		display: none;
	}
}

@media #{$desktop} {
	.big-box {
		display: block;
	}
}