두부의 코딩일기

오늘은 a 태그와 이미지 태그에 대해서 알아보겠습니다. 요즘 쇼핑몰, 뉴스 등 이미지를 사용하지 않는 곳이 없습니다. 하지만 이미지를 사용하실 때는 주의할 점이 있습니다. 바로 "저작권"입니다. 개인적으로 이용하는 것이 아닌 상업적으로 이용하려는 이미지는 항상 저작권을 주의해야합니다. 이미지뿐만 아니라 글꼴, 동영상 등 모든 것들에는 저작권이 있습니다. 항상 주의하시고 사용하시길 바랍니다. 1. 이미지 태그 이미지 태그 속성 의미 src 이미지 경로 width 이미지 너비 height 이미지 높이 title 이미지 풍선 도움말 border 이미지 테두리 두께 alt 이미지가 로딩이 되지 않았을 때 보여주는 텍스트 이미지태그를 사용하는 방법 절대 경로와 상대 경로 이미지 태그에 src 속성에는 이미지 경로..

이번 포스팅은 태그 안에 들어가는 기본적인 태그들 중에 글꼴 태그를 위주로 알아보겠습니다. HTML에도 한글, 엑셀, 파워포인트 등에서 볼 수 있는 [텍스트 진하게], [텍스트 기울기], [밑줄] 등의 다양한 글꼴 기능을 사용할 수 있습니다. 1. 줄바꿈 태그 과 공백 nbsp; 두부 블로그에서 HTML을 배우자! 두부블로그에서 HTML을 배우자! 두부 블로그에서 자바스크립트를 배우자! 위의 코드를 보면 알 수 있듯이 태그에서 아무리 'spacebar'와 'Enter'키를 눌러도 웹브라우저 상에서는 변화가 없습니다. 그렇다면 줄바꿈을 할 수 없는 걸까요? 아닙니다! 태그를 이용해서 줄 바꿈을 할 수 있습니다. 또한, 여러번의 공백에도 불구하고 웹브라우저 상에서는 단 한 번의 공백만 이루어졌습니다. 이러한..

HTML에는 가장 기본적이면서도 필수적인 태그가 몇 가지 존재합니다. 웹 브라우저에서 사용자들에게 보이는 것에 관여를 하지 않지만, HTML을 사용하는 개발자들의 암묵적인 약속과 같은 태그이기에 지켜주는 것이 좋습니다. 어떤 형식으로 파일이 작성되었는지 알려주는 태그 웹페이지의 정보를 담거나 외부 자료들을 해당 문서에서 사용하기 위해 링크하는 태그들을 담는 태그 웹페이젱서 실제로 사용자가 볼 수 있는 부분을 담는 태그 title, meta 태그 등 h, p, img, i 태그 등 주석 처리 프로그래밍을 하면서 메모를 하는 경우가 빈번하게 발생합니다. 그런 경우에 주석 처리를 해서 코드에 설명을 추가한다거나 메모를 해둘 수 있습니다. 주석 처리는 웹브라우저가 해석하지 않으므로 브라우저 화면에서는 확인할 수..

HTML에는 다양한 태그가 있습니다. 많은 태그들을 이용해서 사용자에게 보여줄 디자인과 기능을 만들어냅니다. 태그는 크게 보면 블록 요소와 인라인 요소, 두 가지로 나눌 수 있습니다. 이름만 들으면 감이 잘 안오시죠? 블록 요소는 쉽게 말해서 '자동 줄 바꿈'이 되는 태그, 반대로 인라인 요소는 줄 바꿈 기능이 없습니다. 그러면 지금부터 두 가지 요소에 대해서 알아보겠습니다. 블록 요소 자동 줄 바꿈 기본적으로 너비(width) 100% 값을 가짐 너비(width) 와 높이(height) 설정 가능 margin 과 padding 설정 가능 종류 : article, canvas, audio, vidio, h, div, figure, footer, header, ol, ul, table, p 등이 존재 블록..

자바스크립트는 인터프리트 형태의 객체 지향 프로그래밍 언어로 코드가 작성된 순서대로 실행됩니다. 객체를 기반으로 하는 언어로 HTML과 CSS와 같이 사용되며, 프론트 엔드 분야에서 손꼽히는 언어입니다. 클라이언트 쪽에서 실행되는 코드이므로 개발자 도구(F12)에 공개되어 보안에 취약한 단점을 가지고 있지만 쉽게 배울 수 있는 장점을 가지고 있습니다. 접근이 쉬운만큼 다양한 편집 프로그램이 존재한다. HTML과 CSS, JavaScript를 편집하는 프로그램은 엄청 다양하고, 무료로 제공하는 프로그램들도 많습니다. 그 중에서 실무자들이 많이 쓰는 무료 프로그램을 몇 가지 소개하겠습니다. Sublime Text Brackets ATOM OS, Window, Linux 지원 OS, Window, Linux ..