🏃♂️What I learned
1. 글자 관련 스타일
- color : 글자색 지정
- 색상명
- rgb()
- rgba() *a는 투명도(0~1, 0으로 갈수록 투명)
- hsl() -> 색상, 채도, 명도
- hsla()
- text-decoration : 텍스트에 줄 긋기
- underline : 밑줄
- line-through : 중간줄
- overline : 윗줄
- none : 줄 없애기
- text-align : 장평 지정
- lettet-spacing : 자간 지정
- text-shadow : 그림자 효과 추가
2. 폰트 관련 스타일
- font-size : 글꼴 크기 지정
- px : 픽셀(해상도)
- pt : 포인트(1pt = 0.72인치)
- % : 상위 요소 크기에 대한 백분율
- em : 1em == 100%
- font-weight : 글꼴 두께 조정
- 숫자 : 100~900(100단위)
- noraml : 기본 두께(400)
- bold : 굵게(700)
- bolder : 상속 받은 두께보다 더 굵게
- lighter : 상속 받은 두께보다 얇게
- font-family : 글꼴을 지정하는 속성
- 웹폰트 : 사이트 이용
3. 변형
- transform: translate(X,Y) -> 좌우(X), 상하(Y), 대각선(X, Y) 움직이기
- transform: scale(X,Y) -> 가로(X), 세로(Y), 대각선(X,Y) 확대
- transform: rotate(n..deg) -> n도 회전
- transform: perspective(Z) translate3d() || rotate(X,Y,Z).. -> 3차원 변형
- transition-duration: -> 변형 시간
- transition-timing-function: ease-in-out -> 변형 종류
/* ease 기본값 */
/* ease-in, ease-out, linear */ - transition-delay : 변형 시작시간 지연
-ms- : 마이크로소프트(익스플로어, 엣지)
-webkit- : 크롬, 사파리
-o- : 오페라
-moz- : 모질라(파이어폭스)
4. 시맨틱태그
- 기존 영역 분할에 사용된 div, span등의 태그는 이름만 봤을 때 의미 파악이 어려움. - 웹 접근성(SEO)를 향상과 태그 이름만으로 어떤 역할을 하는지 파악하기 위해 시맨틱 태그가 추가됨- header 태그 : 문서의 제목, 머리말 영역
- footer 태그 : 문서의 하단, 꼬리말, 정보 작성 영역
- nav 태그 : 나침반 역할(다른 페이지, 사이트 이동)의 링크 작성 영역
- main 태그 : 현재 문서의 주된 콘텐츠 작성 영역
- section 태그 : 구역 구문을 위한 영역
- article 태그 : 본문과 독립된 콘텐츠를 작성하는 영역
- aside 태그 : 사이드 바(보통 양쪽), 광고 영역(각각의 article을 둘러싼 영역)
5. Javascript 개요
스크립트 언어란?
- 기본 프로그램의 동작을 사용자의 요구대로 수행되도록 해주는 언어
- 별도로 소스코드를 컴파일 하지 않고, 인터프리터(interpreter)를 이용해 소스코드를 한 줄씩 읽어 실행 -> 컴파일에 소용되는 시간이 없음
- 번역속도가 빠른 대신 실행 시간이 느림
컴파일 과정이 없기 때문에 프로그램을 실행시켜야만 오류를 알 수 있음.
-> 코드가 문법적으로 틀리거나 수정할 필요가 있는 경우를 알려주지 못함.
자바스크립트란?
- 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체 지향 프로그래밍 언어
- ECMA Script 표준을 따르는 대표적인 웹 기술(ECMA : 기관 이름)
-> ECMA-262 기술 규격에 따라 정의된 스크립트 프로그래밍 언어
- 브라우저 콘솔에서 직접 작성(F12 -> console)
- html 내부에 script 태그 이용(internal 방식)
- >html 외부에 (.js)파일 이용(external 방식)
- 태그에 직접 js코드를 작성(inline)
