211227 css + js 찍먹

Do it! html5 css3 웹 표준의 정석 구름edu 후반부 필기

 

css 선택자 순서 
link visited hover active
:enabled, :disabled
:checked

구조 가상 클래스
:nth-child(n) :nth-last-child(n)
nth-of-type(n)
:first-of-type(n( last
:only-child :only-of-type

-가상요소
::first-line
::first-letter
::before
::after

-변형 transform :2차원 변형, 3차원 변형
translate 함수 이동
scale 크기 확대 축소
rotate 회전하기 2차원/3차원
skew 지정한 각도만큼 비틀어 왜곡

-변형과 관련된 속성들
transform-origin 특정 지점을 변형의 기준으로 설정
perspective 원근감을 갖게함
perspective-origin 입체적으로 표현할 요소의 아랫부분 위치 지정
transform-style 부모 요소에 적용한 3d 변형을 하위 요소에도 적용
backface-visibility 뒷면, 반대면을 표시할 것인지

-트랜지션
웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것
transition-property 트랜지션을 적용할 속성 선택 
transition-duration 트랜지션 진행시간 지정
transition-timing-function
transition-delay

-애니메이션
@keyframes 애니메이션의 시작과 끝을 비롯해 상태가 바뀌는 지점을 설정
animation-name
animation-duration
animation-direction
animation-iteration-count 반복횟수 지정
animation-timing-function 
=>    animation:으로 묶을 수 있음

-반응형 웹
viewport
가변 그리드 레이아웃
grid system
가변글꼴 _ em, rem
가변이미지 _ css 이용: max-width 속성 100%, <img>태그의 srcset속성, <picture>태그와 <source>태그
가변비디오 max-width 속성 100%

-반응형 웹: 미디어 쿼리 mediaqueri.es
@media [only | not] 미디어 유형 [and 조건]*[and 조건]

미디어 쿼리 조건 단말기: 가로 세로 넓이, 화면회전
중단점 만들기 : 서로 다른 css를 적용할 화면 크기 >지원할 기기에 따라 다르게
외부 css 파일 연결
<link> head태그 안에
@import 구문 사용하기 style 태그 안에
.웹문서에서 직접 정의
 <style> 태그 안의 media 속성 사용, <style>태그 안에 @media 구문 사용하기

-플렉서블 박스 레이아웃
기본속성
display 브라우저마다 브라우저 접두사 붙여야함
flex-direction 플렉스 항목 배치 방향 지정
flex-wrap 플렉스 항목을 한 줄 또는 여러 줄로 배치
flex-flow 배치방향 여러줄 배치를 한꺼번에 지정 
order 플렉스 항목의 배치 순서 바꾸기
flex


플렉스 항목 배치를 위한 속성
justify-content
align-items, align-self

 

 

 

-------------------

코딩입문 하다보니 알게되는 자바스크립트_goorm edu


-사칙연산 계산기 만들기 + - * /
javascript 함수 정의 출력
console.log 출력하기

function 더하기(a, b) {
     console.log(a + b)
}

더하기(10, 5)

-체온계 만들기 (조건문)
function 체온계(a) {
    if(a < 34.0) {
        console.log("저온")
    }
    if(34.0 < a && a < 37.0) {
        console.log("정상") 
    }
    if(37.0 < a) {
        console.log("고온")
    }
}

체온계(40)
> 고온


-구구단 만들기
반복문
for (let i = 1; i <= 10; i ++) {
    console.log(i)
}

function 구구단 (a) {
    for (let i = 1; i <= 10; i ++) {
    console.log(a * i)
    }
}


-명함 만들기(변수)

function 명함() {
    let 이름 = "홍길동"
    let 나이 = 50
    
    console.log("이름: " + 이름)
    console.log("직업: 개발자")
    console.log("나이: " + 나이)
    console.log(이름 + "은 제 별명입니다")
}
undefined
명함()
> 이름: 홍길동
직업: 개발자
나이: 50
홍길동은 제 별명입니다


객체로 코드를 간단하게 바꾸기
객체{}는 속성과 행위를 담고있다.