* 본 포스팅은 간단한 웹문서 제작을 위한 HTML 정보글입니다.
1. 간단한 웹문서 제작을 위한 HTML의 기본
개인 홈페이지 제작의 필요성 정보화 시대, 빠르게 변화하는 사회 등등 어렸을 때부터 우리가 많이 듣던 이야기입니다. 그로부터 벌써 10년, 20년도 더 지난 현재 사회는 정말 빠르게 많은 직업
hooks.tistory.com
1. 이미지 준비하기
웹 홈페이지에 올릴 이미지를 먼저 준비합니다. png, jpeg, jpg 등 다양한 이미지 파일을 올릴 수 있습니다.
저는 블로그 로고 이미지를 올리도록 하겠습니다.
2. 이미지 삽입 코드
웹 코드의 <body> ~ </body> 사이에 이미지 삽입 코드를 다음과 같이 넣습니다.
<img src="1.png" alt="Loading fail">
메모장으로 제작한다면 같은 폴더 내에 이미지 파일이 있어야 합니다.
코드에 대해 부연 설명해보자면, img src가 이미지를 삽입하는 코드이고, 1.png가 이미지 파일의 이름입니다. 이미지 파일의 종류에 맞게 png, jpg 등 의 확장자도 표시를 해주세요.
마지막으로 alt는 속성 이름(Attribute Name)을 의미합니다. 이 코드는 이미지가 구현되지 않을 때, 이미지 대신 나타내는 문자를 지정하는 코드입니다. 속성 이름 다음의 "" 안에 있는 문자는 속성 값(Attribute Value)을 뜻합니다.
지난번 포스팅에서 제작한 기본문서의 제목 부분에 이미지를 삽입하면, 다음과 같이 홈페이지가 제작됩니다.
* <br> 은 줄 바꿈입니다. 아래 코드의 h1 파트에서 이 줄 바꿈이 없다면 이미지와 글자가 같은 줄에 출력되니 주의해주세요~
<body>
<h1> <img src="1.png" alt="photo"> <br> Big Example </h1>
<h2> Small Example </h2>
This page is EXAMPLE.
</body>
3. 이미지 사이즈 조절 하기
이미지의 사이즈를 조절하기 위한 코드입니다. 이는 alt와 같은 방식으로 속성 이름과 속성 값으로 나타냅니다.
width="Value"
height="Value"
주의사항으로 속성이름과 속성 값을 이미지에 추가할 때 구분 표시는 띄어쓰기 한 칸으로 표시합니다.
이때 속성 값은 숫자로 픽셀 단위가 자동으로 지정됩니다.
그리고 이미지에 테두리를 넣고 싶다면 속성 코드 border를 추가하면 테두리도 표시할 수 있습니다.
예시로 다음과 같이 코드를 넣으면,
<h1> <img src="1.png" alt="photo" width="200" height="200" border= "1"> <br> Big Example </h1>
...
페이지가 다음과 같이 완성됩니다.
'COMPUTER SCIENCE > A piece of INFO.' 카테고리의 다른 글
| 문단 구성에 유용한 HTML 코드 정리 (0) | 2021.05.18 |
|---|---|
| CSS 웹문서의 스타일 지정하기 (0) | 2021.05.14 |
| 간단한 웹문서 작성하고 브라우저로 열기 (0) | 2021.05.12 |
| 홈페이지 제작을 위한 기본정보 (0) | 2021.05.11 |
| 전자회로 정보 _ 복호기(Decoder)와 인코더(Encoder) (0) | 2021.05.08 |
