[Day-33] CSS ③ , JavaScript①
6. 전환 효과 속성 적용하기
1) 전환
CSS에서 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것
<style>
.red-box{
width:100px;
height:100px;
background-color:red;
}
.red-box:hover{
background-color:blue; /*마우스가 올라갔을 떄*/
}
</style>
</head>
<body>
<div class="red-box"></div>
</body>2) transition-property 속성
전환 효과를 적용할 대상 속성을 지정
전환 효과를 여러 속성에 지정하고 싶다면 쉼표로 구분해 작성하면 됩니다.
개별 속성이 아닌 모든 속성에 전환 효과를 넣고 싶으면 all로 지정하면 됩니다.
transition-property:<속성값>;
3) .transition-duration 속성
전환 효과의 지속 시간을 설정하는 데 사용합니다. 속성값으로는 초 단위 값을 사용
여러 속성을 쉼표로 구분해 전환 효과를 지정할 때는 transition-property와 transition-duration 속성을 각각 지정할 수 있습니
전환 효과의 지속 시간을 설정하는 데 사용합니다. 속성값으로는 초 단위 값을 사용
4) transition-delay 속성
전환 효과의 발생을 지연할 수 있습니다. 속성값으로는 지연하고 싶은 시간을 적으면 됩니다
5) transition-timing-function 속성
전환 효과의 진행 속도를 지정합니다. 속성값으로는 정해진 키워드와 cubic-bezier() 함수를 사용
| 속성값 | 설명 |
| linear | 처음 속도와 마지막 속도가 일정합니다. |
| ease | 처음에는 속도가 점점 빨라지다가 중간부터 점점 느려집니다. |
| ease-in | 처음에는 속도가 느리지만 완료될 때까지 점점 빨라집니다. |
| ease-out | 처음에는 속도가 빠르지만 완료될 때까지 점점 느려집니다. |
| ease-in-out | 처음에는 속도가 느리지만 점점 빨라지다가 다시 점점 느려집니다. |
| cubic-bezier(p1, p2, p3, p4) | 사용자가 정의한 속도로 진행합니다. |
cubic-bezier() 함수로 직접 정할 수도 있습니다. 다만, 전환 속도를 직접 정하려면 복잡하므로 크롬의 개발자 도구나 별도의 외부 사이트에서 계산하는 것이 편합니다.
ㅇㅇ
6. transition 속성으로 한 번에 지정하기
앞에서 배운 모든 전환 효과 속성은 단축 속성인 transition 속성으로 한 번에 작성할 수 있습니다.
transition:<property>, <duration>, <timing-function>, <delay>;
7. 애니메이션 속성으로 전환 효과 제어하기
전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어할 수 있습니다.
애니메이션 속성의 주요 문법 구성은 애니메이션을 적용할 스타일 속성과 키 프레임(@keyframes)
1) 키 프레임 정의하기
애니메이션은 정지된 이미지를 연속적으로 보여 줘서 움직이는 것처럼 보이게 합니다. 애니메이션 속성은 이런 애니메이션 효과를 전환 효과에 부여합니다.
키 프레임은 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법입니다. 따라서 키 프레임에는 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일이 정의되어야 합니다.
@keyframes <키 프레임명>{
0%{/* CSS 코드 */}
n%{/* CSS 코드 */}
100%{/* CSS 코드 */}
}
2) animation-name 속성
특정 요소에서 적용할 키 프레임명을 지정합니다.
animation-name:<키 프레임명>;
3) animation-duration 속성
애니메이션을 지속할 시간을 설정합니다. 속성값으로는 초(s)나 밀리초(ms) 단위의 시간을 넣으면 됩니
div{
width:100px;
height:100px;
background-color:red;
animation-name:bgchange;
animation-duration:5s;
}
@keyframes bgchange{
0%{background-color:red;}
25%{background-color:orange;}
50%{background-color:yellow;}
100%{background-color:green;}
}애니메이션은 키 프레임, animation-name 속성, animation-duration 속성만 있으면 전환 효과를 적용할 수 있습니다. 그러나 3가지 중 하나라도 빠지면 전환 효과는 적용되지 않습니다
4) animation-delay 속성
사용하면 애니메이션 실행을 지연할 수 있습니다. 속성값으로는 초나 밀리초 단위의 시간을 넣으면 됩니다.
5) animation-fill-mode 속성
애니메이션이 끝나도 원래 상태로 돌아가지 않고 애니메이션이 종료된 시점의 상태를 유지
| 속성값 | 상태 | 설명 |
| none | 실행 전 | 시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다. |
| 실행 후 | 실행되기 전의 스타일 적용 상태로 돌아갑니다. | |
| forwards | 실행 전 | 시작 시점(0%, from)의 스타일을 적용하지 않고 대기합니다. |
| 실행 후 | 키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다. | |
| backwards | 실행 전 | 키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다. |
| 실행 후 | 실행되기 전의 스타일 적용 상태로 돌아갑니다. | |
| both | 실행 전 | 키 프레임에 정의된 시작 시점(0%, from)의 스타일을 적용하고 대기합니다. |
| 실행 후 | 키 프레임에 정의된 종료 시점(100%, to)의 스타일을 적용하고 대기합니다. |
6) animation-iterator-count 속성
애니메이션은 기본으로 1회 실행하고 종료됩니다. 이때 animation-iterator-count 속성을 사용하면 실행 횟수를 조절
무한으로 반복하게 하는 infinite 값도 사용할
animation-iteration-count:<횟수>;
7) animation-play-state 속성은 애니메이션의 재생 상태를 지정합니다. 속성값으로는 다음 키워드를 사용할 수
* java script 필요
8) animation-direction 속성
애니메이션의 진행 방향을 지정
9) animation 속성으로 한 번에 지정하기
animation:<name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
8. 변형 효과 적용하기
1) transform 속성
transform 속성을 사용하면 요소에 특정 변형 효과를 지정할 수 있습니다. 속성값에는 변형 효과가 정의된 다양한 함수를 사용 목적에 맞게 넣으면
| 함수 | 설명 |
| translate(x, y) | 요소를 현재 위치에서 x(x축)와 y(y축)만큼 이동합니다. |
| translateX(n) | 요소를 현재 위치에서 n만큼 x축으로 이동합니다. |
| translateY(n) | 요소를 현재 위치에서 n만큼 y축으로 이동합니다. |
| scale(x, y) | 요소를 x(x축)와 y(y축)만큼 확대 또는 축소합니다. |
| scaleX(n) | 요소를 n만큼 x축으로 확대 또는 축소합니다. |
| scaleY(n) | 요소를 n만큼 y축으로 확대 또는 축소합니다. |
| skew(xdeg, ydeg) | 요소를 x축과 y축으로 xdeg, ydeg(각도)만큼 기울입니다. |
| skewX(deg) | 요소를 deg(각도)만큼 x축 방향으로 기울입니다. |
| skewY(deg) | 요소를 주어진 deg(각도)만큼 y축 방향으로 기울입니다. |
| rotate(deg) | 요소를 deg(각도)만큼 회전합니다. |
2) ransform-origin 속성
면 요소가 회전할 때 요소의 중심을 기준으로 회전합니다. 이처럼 변형 관련 속성값들은 변형을 시작하는 기준점이 있습니다. 이 기준점은 항상 요소의 중심입니다. 그래서 기준점을 바꾸면 변형 효과가 다르게 적용됩니다. 변형 기준점은 transform-origin 속성으로 변경할 수 있습니다.
9. 웹 폰트와 아이콘 폰트 사용하기
1) 구글 폰트 적용하기
웹 폰트는 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트를 말합니다. 사용자가 웹 서버에서 폰트를 참조해서 사용하므로 시스템에 글꼴이 없어도 모든 사용자가 같은 글꼴을 사용할 수 있다는 장점이
2) 아이콘 폰트 적용하기
대표적인 아이콘 폰트로는 Font Awesome과 Material Icon
https://cdnjs.com/libraries/font-awesome입니다.\
chap 07
효과적인 레이아웃을 위한 CSS 속성 다루기
1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기
플렉서블 박스 레이아웃(flexible box layout)은 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성입니다. 여기서 1차원 방식이란 가로(row)나 세로(column) 중 한 방향으로만 레이아웃을 설계하는 방식
1) 플렉스 박스 레이아웃 살펴보기
2) 플렉스 박스 레이아웃의 기본 속성
● display 속성
모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정하는 것에서 시작합니다.
flex는 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치되게 합니다.
그리고 display 속성이 지정된 요소는 플렉스 컨테이너가 되고, 자식 요소는 플렉스 아이템이 됩니
플렉스 아이템이 원래 가지고 있던 박스 성격(인라인/인라인 블록/블록)은 무시됩니
● flex-direction 속성
flex-direction 속성은 플렉스 박스 레이아웃의 주축 방향을 결정
● flex-wrap 속성
flex-wrap 속성은 플렉스 아이템이 플렉스 컨테이너 영역을 벗어날 때 어떻게 처리할지를 결정
3) 플렉스 박스 레이아웃의 정렬 속성
플렉스 아이템을 정렬할 수 있는 속성
● justify-content 속성
justify-content는 플렉스 아이템을 주축 방향으로 정렬할 때 사용
● align-items, align-content, align-self 속성
align-items 속성은 플렉스 아이템을 교차축 방향으로 정렬할 때 사용합니다.
align-content 속성 플렉스 아이템이 flex-wrap 속성 때문에 두 줄 이상이 됐을 때만 사용
align-self 속성 플렉스 아이템을 한 번에 정렬하지 않고 각각 정렬하고 싶을 때사용
2. 그리드 레이아웃으로 2차원 레이아웃 설계하기
그리드 레이아웃(Grid Layout) 속성은 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성
1차원 레이아웃인 플렉스 박스보다 더 폭넓게 레이아웃을 설계할 수 있습니다.
1) 그리드 레이아웃 살펴보기
4) 그리드 레이아웃의 배치 속성
● grid-template-areas와 grid-area 속성
grid-template-areas 속성은 그리드 레이아웃의 행과 열을 이름으로 지정할 수 있
*div vs p vs span
span 텍스트 만큼만 영역을 가져
반면 줄바꿈 없이 사용 영역만 작성하고 다른 블록 요소 등에 포함되어야 할 경우 <span> 태그와 같은 인라인 요소를 사용하면 됩니다.
p 텍스트를 작성할 때
div 영역을 구분하기 위해 margin 등 다 영역으로 포함해
<div>, <p> 태그의 차이점은 무엇일까요? 두 태그 모두 문자 정보를 출력할 수 있으며 블록 요소로 자동 줄바꿈으로 단락이 형성됩니다.
<p> 태그는 문자 정보를 입력하는 단락을 구성합니다. 아래와 같이 <p> 태그 하위에는 다른 블록 요소가 포함되어서는 안됩니다.
<div> 태그는 <p> 태그 처럼 문자 정보를 입력할 수 있지만, 실제 용도는 HTML 문서의 영역별 구분입니다. 각 영역의 용도를 구분하는 기능이므로 다른 블록 요소가 하위에 포함될 수 있습니다.
3. 반응형 웹을 위한 미디어 쿼리 사용하기
2) 뷰포트 알아보기
뷰포트(viewport)는 웹 페이지가 접속한 기기에서 보이는 실제 영역의 크기를 의미합니다. 예를 들어, 해상도가 980px인 화면에서 보는 1px의 크기와 해상도가 360px인 화면에서 보는 1px의 크기는 다릅니다. HTML 문서는 어떤 기기에서 접속하더라도 기본으로 980px 크기를 기준으로 보여 주게 설정되어 있습니다
HTML 코드로 뷰포트를 설정해 줘야 합니다. 이를 처리하는 것이 바로 meta 태그의 viewport 값입니다. meta 태그의 name 속성값을 viewport로 지정하고 content 속성에 width=device-width 값을 추가하면 됩니다.
HTML 문서의 너비(width)를 기기의 너비(device-width)로 설정하라는 의미입니다. 그러면 이 값 때문에 어떤 기기로 접속하더라도 뷰포트는 접속한 기기의 해상도를 올바르게 인식하게 됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
chap 08
자바스크립트 시작하기
html 뼈 css 살과 옷 자바스크립트 생명력,,,
동적으로
1.HTML 파일과 자바스크립트 연결하기
1) HTML 파일과 자바스크립트 연결하기
● 내부 스크립트 방법
HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성하는 방법입니다.
● 외부 스크립트 방법
외부 스크립트(external script)는 js 확장자로 된 별도의 파일을 생성하고 생성한 파일에 자바스크립트 코드를 작성한 뒤, HTML 문서와 연결하는 방법
● script 태그 사용 위치
script 태그는 항상 body 태그의 종료 태그 바로 전에 사용합니
HTML 문서를 첫 번째 줄부터 순차적으로 해석합
자바스크립트는 화면에 표시되는 웹 구성 요소에 동적 효과를 부여하는 데 더 큰 목적이 있어서 웹 브라우저에 구성 요소를 처음 표시할 때 당장 실행할 필요가 없습니다. 그러므로 HTML과 CSS 해석이 끝나는 시점인 body 요소의 종료 태그 전에 script 태그를 사용하는 것이 적절합니다.
* 자바스크립트를 단순히 실행할 목적이라면 다음과 같은 방법을 사용합니다.
• 웹 브라우저의 개발자 도구에서 지원하는 콘솔창 활용하기
• VSCode의 Code Runner 확장 프로그램 활용하기(실행 ctrl+alt+N)
2. 프로그래밍 시작 전 알아 두기
1) 주석
① 한 줄 주석은 // 기호(슬래시 2개)로 작성합니다.
② 여러 줄 주석은 /* 기호와 */ 기호 사이에 작성합니다.
2) 오류 확인 방법
자바스크립트는 코드가 한 번에 한 줄씩 실행되는 인터프리터 기반의 언어
그래서 오류가 발생하면 그 즉시 실행을 멈추고 오류 메시지와 오류가 발생한 줄 번호를 웹 브라우저의 콘솔창에 출력합니다. 따라서 모든 오류 관련 메시지는 웹 브라우저의 콘솔창에서 확인할 수 있습니다.
chap09
자바스크립트 기초 문법 살펴보기
1. 변수와 상수
데이터를 처리하려면 데이터를 저장할 공간이 필요합니다. 자바스크립트에서는 데이터를 저장하는 공간을 변수와 상수라고 합니다.
1) 변수
● 키워드
키워드(keyword)란 자바스크립트 프로그래밍 언어에서 어떤 역할이나 기능이 정해진 특별한 단어입니다. 다른 용어로 예약어(reserved word)라고도 함
키워드는 식별자로 사용할 수 없음
● 식별자
식별자(identifier)는 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름을 의미
var, let, const
● 연산자
연산자(operator)는 이름 그대로 어떠한 연산 작업을 하는 데 사용하는 기호
● 표현식
표현식(expression)이란 평가(evaluation, 표현식을 실행해 하나의 값을 만드는 과정)되어 하나의 값을 반환하는 식 또는 코드를 의미
2) 새로운 변수 선언 키워드 let
var 키워드를 개선해 let 키워드
cd) var
var 키워드로 선언한 변수명은 중복해서 생성할 수 있습니다. 그래서 다음처럼 코드를 작성해도 문제없습니다.
var num = 10 + 20;
var num = 50;ㆍlet
- 변수명 중복이 불가능합니다.
키워드 자체에서 중복 선언을 불가능하게 함으로써 다른 사람이 선언한 변수명을 실수로 재선언하는 경우가 없어졌습니다.
- 호이스팅되지 않습니다.
호이스팅(hoisting)은 var 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려 실행하는 것을 말합
var num; // 선언이 최상위로 올라옴
console.log(num);
num = 10; // 할당은 원래 자리에 있음num이라는 변수가 선언되지 않았으므로 오류가 발생해야 맞지만, 오류가 아니라 undefined라는 값을 출력
gh이스팅에 의해 선언부가 최상위로 올라갑니다. 그래서 num이라는 변수를 출력할 때는 값이 없을 뿐, 선언은 된 상태라서 오류가 발생하지 않습니다.
let 키워드는 호이스팅이 일어나지 않습니다. 그래서 같은 코드를 작성하고 실행하면 num 변수가 정의되지 않았다는 오류가 발생합니다.
console.log(num);
let num = 10;
//실행결과 Uncaught ReferenceError: num is not defined
자료형(data type)이란 자바스크립트에서 사용할 수 있는 데이터의 종류를 의미합니다. 자
1) 문자열