안녕하세요. Graham입니다.
(TMI: 제가 좋아하는 graham's number 에서 가져온 닉넴.
그레이엄으로 읽어주시면 됩니다.)
오늘도 계속 진행해보겠습니다.
동영상 강의도 만들긴 했는데, 아직 음성 녹음을 못해서 이따 완료한뒤 첨부하겠습니다.
이미지를 써보자!
저번 시간까지 기본구조랑 텍스트 다루는 방법에 대해서 알아봤죠? 이번시간은 이미지를 다뤄볼거예요.
실습을 위한 폴더 만들기
이전까지는 아무 환경이나 아무 경로(위치여도) 상관이 없었으나 이번부터는 특정 폴더에 저장하겠습니다.
저는 F드라이브에 html_Tutorial 이라는 폴더를 만들었어요. 어떤 드라이브 경로여도 상관은 없습니다. 여러분들만의 폴더를 만들어주세요.
F:\html_Tutorial
VS Code 실행
방금전에 생성한 프로젝트를 가져올 가장 쉬운 방법은 생성한 폴더를 드래그해서 VS Code에 붙여넣으면 됩니다. 깜빡이면서 생성한 폴더가 불러와졌죠?
오늘이 4번째 강좌니까 04번 폴더를 만들어주세요.
F:\html_Tutorial\04
index.html 파일을 하나 생성하겠습니다. index.html 파일 안에 html:5를 입력해주세요. 기본으로 입력해야 될 내용이 자동으로 입력됩니다. 세상 참 편해졌어요. 그쵸?
이제 이미지를 불러올 시간
2가지 방법을 소개해드릴건데요. 우선은 실습부터 먼저하고 이론을 소개해드릴게요.
첫번째 방법(절대경로)
인터넷에 접속해주세요. 구글이나 네이버에서 아무 이미지 하나 클릭하신다음 웹주소를 확인해주세요.
https://cdn.tradefinanceglobal.com/wp-content/uploads/2018/09/unicorn-20072661280.jpg
제 이미지는 이런 주소네요.
body 안에 이렇게 써주세요.
<body>
<p>
<img src="https://cdn.tradefinanceglobal.com/wp-content/uploads/2018/09/unicorn-20072661280.jpg" alt="절대경로 테스트용"/>
<!-- <img src="이미지주소" alt="이미지설명"/> -->
</p>
</body>
제가 이렇게 적은 내용은 안적으셔도 무방합니다. 주석이라는 기능인데, 다음번에 자세히 설명 드릴게요. 저장한 다음 확인해보세요.
이미지가 잘 보이죠? 방금 여러분들은 절대경로를 활용한 이미지 코딩을 하신거예요. 엑박이 나온다면 이미지 경로가 잘못되신거예요.
이미지 사용방법에 대한 설명은 후반부에서 다룰게요.
두번째방법 (상대경로)
이번은 인터넷에서 아무 이미지나 다운 받아주세요. 저는 이 이미지를 다운받아서 실습 폴더에 넣어놨습니다.
사실 이미지를 어느 경로에 저장하셔도 상관 없지만 정확한 실습을 위해서 제가 저장한 폴더를 알려드릴게요.
04/image/flower.jpg
코딩의 세계에서는 파일명은 항상 영문 이나 숫자만 가능해요. 한글파일명, 띄어쓰기는 실제 웹상에서 오류 나는 경우가 많아 권장하지 않습니다.
예) flower.jpg (O) flower_1.jpg (O)
플라워.jpg (X) 꽃 그림.jpg (X)
아까처럼 이미지를 코딩에서 불러와보겠습니다. body 사이에 다음과 같이 입력해주세요.
<body>
<p><img src="image/flower.jpg" alt="꽃 이미지"/></p>
</body>
꽃 이미지가 잘 보이나요? 잘보이긴 하는데 너무 이미지가 크죠?
이미지 줄이는 방법은 다음시간에 다시 설명드리겠습니다.
당연히 설명해드리기로 한 문법두요.ㅎㅎ
감사합니다.
실습때 더욱 도움 되시라고 동영상도 녹화했습니다.
2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?
2019/07/08 - [프로그램 강좌] - [html02]html = head + body
2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기
2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2
2019/07/26 - [프로그램 강좌] - [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)
'프로그램 강좌' 카테고리의 다른 글
| [html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨) (0) | 2019.07.26 |
|---|---|
| [html05]이미지로 코딩하기2 (0) | 2019.07.25 |
| [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.21 |
| [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.19 |
| [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.17 |
