간디의 세상

안녕하세요 저번에 링크 삽입하는 방법이랑 이미지 삽입하는 방법들을 알려드렸는데 오늘은 그 둘을 합쳐서 이미지 링크를 만드는 방법에 대해서 알려드릴게요 이미지에 링크를 삽입하는 방법입니다 더보기 이미지 삽입하기 이미지 링크 삽입하기 이런 식으로 링크를 삽입하는 기능인 a태그 안에 이미지 삽입 태그인 img 태그를 넣으면 이미지 링크가 완성됩니다 325enc.com으로 이동하는 링크 태그가 있고 그 안에 mcthemax.jpg 이미지 태그가 있으니까 가로 800px, 세로 500px의 사진을 누르면 설정해둔 링크로 이동할 수 있게 됩니다 그러면 이렇게 이미지를 눌렀을 때 성공적으로 이동할 수 있게 됩니다 ​ 더보기 이미지 영역별 링크 삽입하기 이번에는 이미지의 영역을 나누어서 각 영역마다 고유한 링크를 부여..

안녕하세요 오늘은 이미지 삽입하는 방법에 대해서 알아볼게요 이미지는 라는 태그를 이용하여 삽입할 수 있습니다. 더보기 1. 삽입할 이미지 선택하기 삽입할 이미지를 선택하는 방법에는 두 가지가 있습니다. 하나는 이미지의 링크를 사용하는 것, 하나는 이미지를 다운로드해서 사용하는 것입니다. 먼저, 첫 번째로 이미지 링크를 사용해서 삽입해봅시다. 넣고 싶은 이미지나 사진을 검색해서 맘에 드는 이미지를 하나 찾아봅시다. 이미지를 찾은 후에 이미지를 우클릭하게 되면 이미지 주소 복사라는 버튼이 있습니다 눌러서 이미지 링크를 복사해주세요 이미지 삽입하 위와 같이 코드를 작성하시고 img 태그 src속성의 속성값을 아까 복사해둔 이미지 링크로 바꿔주세요. 그러면 이렇게 이미지가 잘 삽입된 것을 확인할 수 있습니다. ..

안녕핫에요 오늘은 링크를 삽입하는 방법에 대해서 알아봅시다 링크는 거의 모든 웹 페이지에서 사용되는 기능입니다 이 링크를 html로 삽입하는 방법을 알아봅시다. 링크 삽입하기 링크 삽입하기 URL 위와 같이 코드를 작성하고 실행해봅시다. 그러면 위 사진처럼 웹 페이지에 링크가 표시됩니다 URL 링크를 한 번 눌러봅시다. 링크를 누르면 아마 이렇게 파일에 액세스할 수 없다며 다른 페이지로 이동이 되지 않습니다. 왜냐하면 링크의 경로가 정해지지 않았기 때문인데 이건 우리가 웹 브라우저에서 주소창에 주소를 입력하지 않고 이동하려는 말도 안 되는 행동과 같습니다. 그래서 구체적인 경로를 링크에 정해주어야 합니다. 링크 삽입하기 Naver 이번에는 위처럼 코드를 작성하고 실행해봅시다. a태그에 href라는 속성을..

안녕하세요 ​ 어떤 프로그래밍 언어든 코드를 작성할 때 주석은 유용하게 쓰입니다 내가 작성하던 코드를 다른 사람에게 넘겨준다고 생각해봅시다 ​ 그 코드는 제가 적었기에 저 자신은 알아볼 수 있지만 다른 사람은 그 코드를 이해하는 데에 시간이 매우 오래 걸립니다. ​ 이때 코드를 잘 이해할 수 있도록 간단한 설명이나 구성을 주석으로 적어놓는 것입니다 ​ 주석은 다른 사람뿐만 아니라 코드를 작성하는 본인에게도 유용하기 때문에 꼭 알아두셔야 합니다. 주석 주석 작성하기 주석은 보이지 않는다 주석은 그러면 한 번 이렇게 p 서식 태그 안에 주석을 넣어봅시다 ​ 결과는 아까와 같네요 주석은 보이지 않습니다 이렇게 주석을 작성하는 방법에 대해서 알아봤는데요 추가로 주석을 작성하는 단축키를 알려드리자면 Ctrl과 /..

안녕하세요 오늘은 여러 가지 글자 서식 태그를 알아봅시다 글자 서식 태그는 말 그대로 글자의 서식을 지정하는 태그를 말합니다 Bold Strong Italic Emphasized Marked Small Deleted Inserted Subscript Superscript 이렇게 코드를 작성해봤어요 알아볼 태그는 b, strong, i, em, mark, small, del, ins, sub, sup 이렇게 한 번 하나하나 알아볼게요 Bold Bold 태그입니다 태그를 사용합니다 bold의 한국어 뜻인 '선명한, 굵은'에 맞게 글자가 두꺼워진 것을 알 수 있습니다 Strong 태그를 사용하고 Bold와 기능은 같습니다 Italic 태그를 사용하고 글씨체가 기울어져서 표시되는 것을 알 수 있습니다 Empha..

안녕하세요 오늘은 저번에 알려드렸던 h1 태그와는 다른 h2, h3 등등 그리고 br 태그를 공부해보려고 합니다 전혀 어렵지 않은 간단한 내용입니당 h1, h2, h3, h4, h5 일단, h는 heading의 약자로 제목이나 부제목을 나타낼 때 사용한다고 저번에도 말씀드렸습니다 ​ h는 그냥 ...로 쓰시면 작동이 되지 않습니다 h뒤에 숫자를 붙여주어야 하는데 1~6 중에 존재하는 정수를 입력하시면 됩니다 ​ 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 안녕하세요 저는 고간디입니다. 위처럼 코드를 작성하시거나 복붙해서 실행해봅시다 저장한 파일을 실행해보면 위 사진처럼 나오는데 아마 보자마자 차이가 무엇인지 아실 수 있을 겁니다 딱 봐도 글자 크기가 다르지요?? 코드를 작성할 때 h태..

안녕하세요 오늘은 html의 기본 구조와 틀에 대해서 알아볼게요 안녕하세요 저는 고간디입니다. 위의 코드는 예시 코드입니다 이 코드에 사용된 태그들을 알아보며 html의 구조에 대해서 알아보도록 합시당 우선 코드를 복사해서 저장한 뒤에 실행해봅시다 html 파일을 실행해보면 이렇게 '안녕하세요'와 '저는 고간디입니다'가 출력되는 것을 알 수 있습니다. 아까 코드를 다시 봅시다 안녕하세요 저는 고간디입니다. 여기서 html, head, body 등 의 괄호로 묶여진 것을 태그라고 부릅니다. 태그에는 부모 태그와 자식 태그가 있는데 자식 태그는 부모 태그 안에 들어가 있는 태그를 말합니다. 예를 들어 위의 코드에서 부모 태그는 head, 자식 태그는 title이라고 볼 수 있는 것이지요. head 태그는 t..

안녕하세요 오늘 드디어 html, css 글들을 네이버 블로그에서 옮겨오려고 합니다 근데 글을 보니까 수정하고픈 게 좀 많이 보여서 이미지는 그대로 사용하고 글 내용만 약간 바꿔서 다시 써보려해요 html이란 Hypertext Markup Language의 약자로 기본적인 웹사이트를 만들 수 있는 웹 언어의 한 종류입니다 앞에서 언급한 영어에서 볼 수 있듯이 html은 엄밀히 따지자면 프로그래밍 언어가 아닌 마크업 언어입니다 이 html을 이용해서 웹사이트를 만드는 방법을 오늘부터 배워볼게요 저는 전문적인 지식도 없고 오직 인터넷으로만 배웠기 떄문에 잘못된 점이 있을 수 있는데 양해 부탁드릴게요 우리가 자주 접속하는 구글, 네이버 그리고 지금 본인께서 보고 있는 이 티스토리도 html로 만들어진 사이트들..