CSS

Font

• font-family
• font-size
• font-weight
• font-style
• color

#title {
font-family: Georgia, "Times New Roman", Times, serif;
}

Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
이것도 지원되지 않으면 Times을 적용
앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.

폰트 두께
normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
숫자 400과 normal은 같은 두께입니다.
숫자 700과 bold는 같은 두께입니다.
보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.
참고링크) https://www.w3schools.com/cssref/pr_font_weight.asp

text-style

• text-align
• text-indent

텍스트 정렬은 왼쪽정렬, 가운데정렬, 오른쪽 정렬이 있습니다. property 이름은 text-align이고 값은 left, center, right입니다. style.css에 특정 클래스이름으로 각각의 정렬 스타일을 작성해두었습니다.

margin & padding

top right bottom left
auto : 웹브라우저의 간격을 계산해서 자동으로 가운데로 정렬해줌

단위개념

선택자 (적는) 문법

img

이렇게 가로/세로 중에서 하나의 값만 입력하여도

브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줍니다.

background-image: url("http~~~")

원본 이미지 그대로 적용된다. 그래서
background-size: 100%;
이렇게 하면 화면에 꽉채워진다.

Semantic Web과 Semantic Tag

table

기준 ! <헷갈림주의>
가로 : 열
세로 : 행
**** tr : 표의 세로행 (가로묶음)
td (table data) : 표 데이터
th

• 병합
  colspan : 열 병합
  rowspan : 세로 행 병합

position

relative

자체로는 움직이지 않는다.
top, right, left, bottom이 있어야 그 값으로 움직임.

absolute

부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됨.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면됨.
top, right, left, bottom은 부모기준에 따라 움직임.

** 정리하자면 absolute는 부모, relative 안에서만 움직임. 마치 엄마의 등에서만 업혀있는 아기마냥, 그 안에서 top, right, left, bottom으로 움직임!

fixed

웹 브라우저에 고정값으로 따라붙음.

1. position 속성 - relative, absolute, fixed

2. inline, inline-block, block 에 대해서

display:none;

영역 사라짐
이벤트(ex.클릭시) 작동 안함
tab focus 안됨

visibility:hidden;

영역 있음
이벤트 작동 안함
tab focus 안됨
뒤에 있는 요소 클릭 가능

opacity:0;

영역 있음
이벤트 작동 함
tab focus 됨
뒤에 있는 요소 클릭 불가능

display

z-index

앞 뒤 순서
값이 클수록 앞으로 보이게 된다. (즉, 값이 클수록 화면에 전면 출력)