본문 바로가기
728x90
반응형

IT/HTML, CSS8

[HTML/CSS] #8 이미지에 링크 삽입하기 안녕하세요 저번에 링크 삽입하는 방법이랑 이미지 삽입하는 방법들을 알려드렸는데 오늘은 그 둘을 합쳐서 이미지 링크를 만드는 방법에 대해서 알려드릴게요 이미지에 링크를 삽입하는 방법입니다 더보기 이미지 삽입하기 이미지 링크 삽입하기 이런 식으로 링크를 삽입하는 기능인 a태그 안에 이미지 삽입 태그인 img 태그를 넣으면 이미지 링크가 완성됩니다 325enc.com으로 이동하는 링크 태그가 있고 그 안에 mcthemax.jpg 이미지 태그가 있으니까 가로 800px, 세로 500px의 사진을 누르면 설정해둔 링크로 이동할 수 있게 됩니다 그러면 이렇게 이미지를 눌렀을 때 성공적으로 이동할 수 있게 됩니다 ​ 더보기 이미지 영역별 링크 삽입하기 이번에는 이미지의 영역을 나누어서 각 영역마다 고유한 링크를 부여.. 2022. 1. 10.
[HTML/CSS] #7 이미지 삽입하기, 비율 조정, alt 안녕하세요 오늘은 이미지 삽입하는 방법에 대해서 알아볼게요 이미지는 라는 태그를 이용하여 삽입할 수 있습니다. 더보기 1. 삽입할 이미지 선택하기 삽입할 이미지를 선택하는 방법에는 두 가지가 있습니다. 하나는 이미지의 링크를 사용하는 것, 하나는 이미지를 다운로드해서 사용하는 것입니다. 먼저, 첫 번째로 이미지 링크를 사용해서 삽입해봅시다. 넣고 싶은 이미지나 사진을 검색해서 맘에 드는 이미지를 하나 찾아봅시다. 이미지를 찾은 후에 이미지를 우클릭하게 되면 이미지 주소 복사라는 버튼이 있습니다 눌러서 이미지 링크를 복사해주세요 이미지 삽입하 위와 같이 코드를 작성하시고 img 태그 src속성의 속성값을 아까 복사해둔 이미지 링크로 바꿔주세요. 그러면 이렇게 이미지가 잘 삽입된 것을 확인할 수 있습니다. .. 2022. 1. 4.
[HTML/CSS] #6. 링크 삽입하기 안녕핫에요 오늘은 링크를 삽입하는 방법에 대해서 알아봅시다 링크는 거의 모든 웹 페이지에서 사용되는 기능입니다 이 링크를 html로 삽입하는 방법을 알아봅시다. 링크 삽입하기 링크 삽입하기 URL 위와 같이 코드를 작성하고 실행해봅시다. 그러면 위 사진처럼 웹 페이지에 링크가 표시됩니다 URL 링크를 한 번 눌러봅시다. 링크를 누르면 아마 이렇게 파일에 액세스할 수 없다며 다른 페이지로 이동이 되지 않습니다. 왜냐하면 링크의 경로가 정해지지 않았기 때문인데 이건 우리가 웹 브라우저에서 주소창에 주소를 입력하지 않고 이동하려는 말도 안 되는 행동과 같습니다. 그래서 구체적인 경로를 링크에 정해주어야 합니다. 링크 삽입하기 Naver 이번에는 위처럼 코드를 작성하고 실행해봅시다. a태그에 href라는 속성을.. 2021. 12. 22.
[HTML/CSS] #5. 주석 작성하기 안녕하세요 ​ 어떤 프로그래밍 언어든 코드를 작성할 때 주석은 유용하게 쓰입니다 내가 작성하던 코드를 다른 사람에게 넘겨준다고 생각해봅시다 ​ 그 코드는 제가 적었기에 저 자신은 알아볼 수 있지만 다른 사람은 그 코드를 이해하는 데에 시간이 매우 오래 걸립니다. ​ 이때 코드를 잘 이해할 수 있도록 간단한 설명이나 구성을 주석으로 적어놓는 것입니다 ​ 주석은 다른 사람뿐만 아니라 코드를 작성하는 본인에게도 유용하기 때문에 꼭 알아두셔야 합니다. 주석 주석 작성하기 주석은 보이지 않는다 주석은 그러면 한 번 이렇게 p 서식 태그 안에 주석을 넣어봅시다 ​ 결과는 아까와 같네요 주석은 보이지 않습니다 이렇게 주석을 작성하는 방법에 대해서 알아봤는데요 추가로 주석을 작성하는 단축키를 알려드리자면 Ctrl과 /.. 2021. 12. 20.
[HTML/CSS] #4. 글자 서식 태그 안녕하세요 오늘은 여러 가지 글자 서식 태그를 알아봅시다 글자 서식 태그는 말 그대로 글자의 서식을 지정하는 태그를 말합니다 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.. 2021. 12. 20.
728x90
반응형