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
웹 브라우저에 고정값으로 따라붙음.
-
position 속성 - relative, absolute, fixed
-
inline, inline-block, block 에 대해서
display:none;
영역 사라짐
이벤트(ex.클릭시) 작동 안함
tab focus 안됨
visibility:hidden;
영역 있음
이벤트 작동 안함
tab focus 안됨
뒤에 있는 요소 클릭 가능
opacity:0;
영역 있음
이벤트 작동 함
tab focus 됨
뒤에 있는 요소 클릭 불가능
z-index
앞 뒤 순서
값이 클수록 앞으로 보이게 된다. (즉, 값이 클수록 화면에 전면 출력)
👍