<a href="image/test.png" download>이미지 다운로드</a>
href 에 원하는 주소를 넣으면 된다.
download 속성이 설정되어 있으면, 링크가 가르키는 파일을 다운로드 한다.
iphone 과 사파리에서는 새창이 열린다 ㅠ
| [웹 프로그래밍] CSS(Cascading Style Sheet) (0) | 2017.07.14 |
|---|---|
| [웹 프로그래밍] HTML (Hyper Text Markup Language) (0) | 2017.07.14 |
CSS(Cascading Style Sheet)
(1) 디자인의 효과적인 관리
(2) 웹 디자인의 표준화
(3) version : 1.x -> 2.x -> 3.x
(4) 사용방법
1) Inline Style
- 태그 안에서 직접 사용하는 방식(즉흥적)
-style이라는 속성을 통해서 사용
2) Internal Style
-
3) External Style
- 별도의 .css 파일을 만ㄷ르어서 불러다 사용하는 방식
- 여러 페이지에서 재사용 가능
(5) 문법
Selector -> 디자인이 적용될 위치 선택
Selector {property:value; property:value;}
(6)property 정리
1) font관련
font-family : 글꼴
font-size : 크기
font : 여러개의 속성을 하나로 묶어서 상요할때
font-style : normal, italic, oblique
font-weight : 굴자 굵기
line-height : 줄간격
font-variant : 텍스트를 작은 대문자로
2)색상 및 이미지 관련된
color : 글자색
background-color : 배경색
background-image : 배경 이미지의 반복방법지정
background-attachment : 배경이미지의 고정 여부
background-position : 배경이미지의 시작위치
3) Text 관련
text-transform : 대문자를 소문자로 소문자는 대문자로
text-align : 수평적인 정렬 left right center
text-indent : 문단의 들여쓰기
text-decoration : 텍스트에 더해진느 여러가지 장식
vertical-align : 위아래 가운데 수직적인 정렬 top middle bottom
line-height
4) 여백 관련
- 가장 바깥쪽 여백
margin-top, margin-left, margin-rignt, margin-bottom
- 가장 안쪽 여배
padding-top, padding-left, padding-rignt, padding-bottom
- 경계선 여백 (바깥쪽과 안쪽의 중간 여백)
border-top, border-left, border-right, border-bottom
border-width, border-style, border-color
(7) 상속
1) 독립적 상속
- 하나의 태그가 다른 태그를 포함할 경우, 그 포함된 태그는 포함하는 태그
스타일의 영향을 받는다.
- 만약 상속을 거부할 경우, 다시 포함된 태그에서 프로퍼티를 지정해주면 된다.
2) 선택적 상속
- A태그안에 B태그를 포함시켜 정의하는 방식으로
B태그는 A채그 영역에서만 유효한 값을 지닌다.
ex)
h1 span{} : h1안에있는 span 태그만 사용하겠다는 선택적 상속
(8) 원하는 디자인 골라서 사용하기
1) Class
ex) h1.bl{color:blue;}
-> h1 class b1의 글자색은 파랑색으로 한다.
2) id
ex) h1#b1{color:blue;}
| [HTML5] a의 Download 속성 (0) | 2017.08.23 |
|---|---|
| [웹 프로그래밍] HTML (Hyper Text Markup Language) (0) | 2017.07.14 |
<>(태그)를 사용하여 사용하는 언어
<시작태그> 데이터 </끝태그> (Element : 시작태그와 끝태그 한쌍으로 묶은 것)
(2) 디자인을 위한 언어
(3) 웹브라우저에서 컴파일 및 실행
(4) HTML4.x -> XHTML -> HTML5
(5) 문법
프롤로그
<html>
<head></head>
<body></body>
</html>
작성 규칙
1. 모든 태그는 반드시 시작태그와 끝태그로 이루어져야함.
2. 모든 태그명은 반드시 소문자
3. 속성값은 반드시 '' 나 ""로 묶어준다.
4. single value는 프로퍼티명="값" 형식으로 작성
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html : charset=utf-8">
<title>헤더에 관련된 정보</title>
</head>
<body >
<!--글자의 크기 -->
<h1 align = "center">가장큰글자</h1>
<h2 align = "left">두번째로큰글자</h2>
<h3 align = "right">세번째로글자</h3>
<h4>네번째글자</h4>
<h5>다섯번째글자</h5>
<h6>여섯번째글자</h6>
<!--줄바꿈 : <br> -->
이것은
줄바꿈이
되나?
<hr/><!--시작태그와 끝태그사이에 아무것도 없을경우 이렇게 쓴다.-->
</body>
</html>
| [HTML5] a의 Download 속성 (0) | 2017.08.23 |
|---|---|
| [웹 프로그래밍] CSS(Cascading Style Sheet) (0) | 2017.07.14 |
