➡️ 브라우저는 <a> 태그에 download 속성이 설정되어 있으면 링크가 가리키는 파일을 다운로드한다.
즉, 마치 링크 위에서 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 링크 저장"을 실행하는 것과 같다.
<a href="원하는_주소" download>download 속성 예제</a>➡️ HTML의 특수 코드 정리
<: 오른쪽으로 열린 부등호. HTML 코드에서 모든 태그의 시작 기호.
>: 왼쪽으로 열린 부등호. HTML 코드에서 모든 태그의 끝 기호.
 : 공백 문자 한칸을 의미하며, 연속하여 쓸 시 여러 공백 문자 삽입 가능.
&: 앰퍼샌드. &문자를 뜻하며 JS/Java 등에서 AND 연산기호로 사용되기도 함.
": 쌍따옴표. HTML 코드 내에서 특정 속성 값들을 묶기 위한 용도로 사용.
«: 왼쪽 꺽인 괄호.
더 자세한 내용은 https://www.w3schools.com/html/html_entities.asp 참고!
➡️ iframe tag
inline frame의 줄임말로,
html 웹 문서 안에 또 다른 웹 문서나 뮤비, 지도 등도 넣을 수 있도록 해 주는 tag.
➡️ 예제 3-04 응용1
<script>
var progress; //JS 변수 선언
var max;
var span;
function start() { //JS 함수 정의
span = document.getElementById("span");
//getElementById()는 ()안의 ID가 서술된 element를 반환
progress = document.getElementById("prog");
max = progress.max;
setInterval("fill()", 400); //0.4초마다 fill()함수 호출
}
function fill() { //JS 함수 정의
var value = progress.value;
value += 1;
value %= (max+1);
progress.value = value;
span.innerHTML = value*10;
}
</script>➡️ 체크박스와 라디오버튼 차이
체크박스는 동시에 여러 개 선택이 가능하지만,
라디오버튼은 여러 개 중 무조건 하나만 선택이 가능하다!
➡️ 예제 3-14
<input onchange="document.body.style.color=this.value">사용자가 컬러 다이얼로그에서 선택한 색으로 브라우저의 글자 색을 변경시키는 자바스크립트 코드.
➡️ datalist & option tag
datalist tag는 미리 정의 된 옵션으로 구성된 드롭 다운 목록을 사용자에게 표시하는 tag.
option목록을 지닌 input tag 안에서 사용.
➡️ fieldset & legend tag
fieldset tag는 웹 폼 내에서 label 과 같은 여러 컨트롤을 그룹화 하는데 사용되는 tag.
legend tag는 fieldset tag 안의 요소들에 대한 전체 제목을 표시할 때 사용하는 tag.
➡️ section tag vs article tag
section tag는 서로 관계 있는 문서를 분리하는 역할. 주로 문서를 다른 주제로 구분하기 위해 사용된다고 한다.
반면 article tag는 내용이 각각 독립적인 내용일 때 사용된다고 한다.
예를 들면 블로그 글, 포럼 글, 뉴스 기사와 같은 것들...
➡️ CSS 파일 불러오기
<link type="text/css" rel="stylesheet" href="mystyle.css">➡️ @import로 CSS 파일 불러오기
<title><@import>로 외부 스타일 불러오기</title>
<style>
@import url(mystyle.css);
</style>➡️ CSS border style
- groove : 테두리가 창(canvas)에서 조각(파진)된 것처럼 보이게 함.
- ridge : 테두리가 창에서 튀어나온 것처럼 보이게 함.
- inset : 테두리가 창에서 전체 박스가 깔려있는(embed) 것처럼 보이게 함.
- outset : 테두리가 창에서 전체 박스가 튀어나온 것처럼 보이게 함.
➡️ 예제 4-18
배경 이미지는 중간에 y축을 따라 반복 배치.
<style>
div {
background-repeat : repeat-y;
background-position : center center;
}
</style>➡️ CSS 단위
- em : 요소에 지정하는 글자 크기 단위. em 단위를 쓰면 부모 요소에서 지정한 글자 크기를 기준으로 배율을 조정.
- rem : rem은 root em 이라는 뜻으로, HTML 문서의 root 요소인 을 가리키며, 이 요소에 지정된 크기를 기준으로 상대적인 값을 가지게 된다는 것.
- px : 화소를 의미. px 단위는 요소를 이미지에 맞춰 정확히 배치해야 할 때 사용하면 좋다.
➡️ Z-index
z-index 속성은 요소의 스택 순서를 지정.
더 큰 스택 순서를 갖는 요소는 항상 스택 순서가 낮은 요소 앞에 위치.
tbody tr:hover {
/* 마우스가 올라오면 pink 배경 */
background : pink;
}
➡️ CSS Animation
CSS animations allows animation of most HTML elements without using JavaScript or Flash.
To use CSS animation, you must first specify some keyframes for the animation.
<style>
@keyframes bomb {
from { font-size : 500%;}
to { font-size : 100%;}
}
h3 {
animation-name : bomb; /* animation 이름*/
animation-duration : 3s; /* animation 지속시간*/
animation-iteration-count : infinite; /* animation 몇 번 반복할 것인지*/
}
</style>➡️ CSS 2D Transform
CSS transforms allow you to translate, rotate, scale, and skew elements.
- translate() : element를 원래 위치에서 x축으로 혹은 y축으로 이동.
- rotate() : element의 원래 위치에서 0˚ ~ 360˚ 회전.
- scale() : element의 원래 크기에서 확대 혹은 축소. 기준은 scale(1, 1). 축소 시에는 (0.5, 0.5)이런 식으로..
- skewX() : x축을 기준으로 지정된 각도만큼 기울이기.
- skewY() : y축을 기준으로 지정된 각도만큼 기울이기.
- matrix()
The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements. matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()).