4강. 웹페이지에 사진 올리기<img> 태그 및 속성

안녕하세요! 2020.07.15 오늘도 출석 완료하였습니다. 솔직히 말하면 이제는 웹 개발에 흥미를 많이 느끼고 있어서 이 시간을 기다리며 지내는 중입니다. 저는 새벽 00:00시부터 01:00시에 짬을 내서 공부하고 있습니다. 하루에 한 시간만 해도 충분히 나아가고 있다는 게 느껴집니다. 오늘도 생활코딩 인강을 보면서 열심히 공부하고 주요 부분 정리해서 올리도록 하겠습니다.

 

오늘 배울 부분은 웹페이지에 사진 올리기 <img>태그입니다. img는 image의 줄임말로 보이네요. 우선 웹페이지에 사진을 올리기 전에 저작권에 구애받지 않고 무료로 사진을 다운로드할 수 있는 사이트를 하나 소개해드릴까 합니다. 다음 URL을 참고해주세요.

 

www.unsplash.com  

Beautiful Free Images & Pictures | Unsplash

위의 사이트에서 임의 사진들을 바탕화면의 web 폴더에 집어넣어주세요. 저는 coding을 검색했더니 다음과 같은 사진들이 나열됩니다.

 

그 중에서 저는 첫 번째 사진이 가장 맘에 들어서 첫 번째 사진을 저장하려고 합니다. 저장방법은 첫 번째 사진을 클릭해주면 다음과 같은 화면이 나옵니다.

 

그럼 오른쪽 상단에 다운로드 프리를 눌러주고 저장은 바탕화면의 web폴더로 바로 저장을 해주시면 됩니다. 그리고 Atom 에디터에 들어가면 다음과 같이 왼쪽 부분에 사진이 저장된 것을 확인하실 수 있습니다.

 

노란색 부분 보이시나요? 저는 이 사진의 이름을 coding.jpg로 바꿔보겠습니다. 사진이름을 바꾸는 법은 노란색 부분에 오른 마우스를 클릭하고 rename을 클릭해서 원하시는 이름으로 바꾸시면 됩니다. 자 여기까지가 사진을 다운로드하고 atom에 사진을 넣는 방법입니다. 그러면 atom을 통해서 웹페이지에 사진을 넣는 방법을 설명해드리겠습니다. 웹페이지에 사진을 넣는 태그는 <ima src="">입니다.  ""<< 여기 사이에 사진 이름을 넣어주시면 됩니다. 그렇다면 저의 경우에는 <img src="coding.jpg">가 되겠죠? 한번 적용해보도록 하겠습니다.

 

웹페이지 글귀 밑에 뭔가가 생성된 것 같은데 이상하죠? 걱정하지 마세요 사진이 너무 크게 적용이 되서 다음과 같이 일부분만 나온 겁니다. 기본적으로 우리가 사진만 넣게 되면 다음과 같이 사진이 엄청 크게 나오기 때문에 우리는 사진 크기를 조절해줘야 합니다. 정말 간단합니다 뒤에 width="100%"만 추가해주면 웹페이지의 크기에 맞게 사진이 적용이 됩니다. 저는 여러분께 보여드리기 위해 시각적 편의를 위해 90%를 주겠습니다.

 

어떠신가요? 사진이 깔끔하게 적용 되었죠? 자 오늘 배운 내용을 정리해보겠습니다. 우리는 오늘 이미지 넣는 태그 <img>를 배웠습니다. 하지만 이 <img>만을 적게 된다면 웹페이지에 아무것도 표현을 할 수 없기 때문에 src="", width=""라는 속성을 추가해주었습니다. 속성의 순서는 상관없이 태그 뒤에 자유롭게 배치하셔도 됩니다.

 

오늘도 웹개발 공부를 한 시간 가량 거쳐서 배우고 정리해보았습니다. 점점 블로그에 글 쓰는 방법도 적응되는 것 가고 웹 개발에 대해 더 알아간다는 생각이 드니깐 나중에 내가 어떤 웹페이지를 만들어볼까 라는 꿈을 벌써 꾸기 시작했습니다. 여러분들도 제 자료를 맘껏 활용하여 재밌는 웹 개발 공부하시면 좋겠습니다. 좋은 하루 보내세요~^^