*이미지(Images)
- <img src="이미지 주소" width="00px" height="00px">: 이미지 주소에 있는 이미지를 출력하는 태그입니다. 가로 세로를 설정하여 크기를 설정할 수 있으며, 가로나 세로 중 하나만 설정할 경우 비율을 자동으로 조정하여 출력합니다.
- <img src="../../폴더이름/사진이름.jpg" width="00px">: 폴더, 위치에 있는 이미지를 출력합니다.
- 사진을 가운데 정렬 하려면 css에 img{ display: block; margin-left: auto; margin-right: auto;}를 입력합니다.
<html>
<body>
<img src="파일명.jpg" width="100px" height="100px">
</body>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</html>
*픽셀(Pixel)
- 이미지나 글자 등이 차지하는 공간의 크기, 길이를 설정할 때 사용하는 단위입니다.
- Picture Element의 준말로 한자로 화소라고도 합니다.
- px 말고도 %, em, rem 등의 단위가 있습니다.
- em: 상위 클래스에 설정된 폰트 기준으로 설정됩니다.(ex: 1.2em)
- rem: 최상위 클래스(root)에 설정된 폰트 기준으로 크기를 결정합니다.
- vh, vw: 뷰포트(브라우저) 사이즈에 맞는 크기로 설정합니다.(100분의 1 값)
- vmin, vmax, ex, ch 등의 단위도 있습니다.
*하이퍼링크(Hyperlink)
-하이퍼텍스트(Hypertext)의 핵심 개념으로 동영상, 글, 음악, 그림, 프로그램, 파일, 글의 특정 위치, 다른 웹사이트나 프로그램으로 연결시켜주는 기능을 합니다.
- <a href="주소">문장</a>
- <a href="link" target="_blank">문장</a>: 새 페이지 열어서 이동합니다.
- <a href="../index.html">문장</a>: 상위 폴더에 있는 파일로 이동합니다.
- <a href="folder/page1.html">문장</a>: folder에 있는 파일로 이동합니다.
- <a href="주소"><img src=""></a>: 이미지를 누르면 이동합니다.
<html>
<body>
<a href="주소" target="_blank">새창으로 열기</a>
<a href="../index.html"><img src="이미지.jpg"></a> //이미지를 눌러서 이동합니다.
</body>
<style>
</style>
</html>'웹개발(웹퍼블리셔) > 프론트엔드(HTML, CSS, JAVASCRIPT)' 카테고리의 다른 글
| (HTML/CSS) 마우스 오버(hover), 상속, 명시도, display (6) (0) | 2019.08.16 |
|---|---|
| (HTML/CSS)box model과 background(5) (0) | 2019.08.14 |
| (HTML/CSS)텍스트, span (4) (0) | 2019.08.13 |
| (HTML/CSS) div, 클래스(class), 아이디(id) (3) (0) | 2019.08.12 |
| HTML과CSS 기초(1) (0) | 2019.08.11 |