본문 바로가기

개발자 꿈나무/html5

버튼 <button>에 onclick 링크걸기 버튼을 구현할 때 안에 태그를 사용하면 일부 브라우저에서 클릭이 되지 않는 문제가 있다. 이러한 경우 태그가 태그를 감싸는 형태로 순서를 바꾸어 사용해도 되지만 자바스크립트의 onclick 을 이용하여 구현하는 간단한 방법도 있다. 버튼내용 버튼내용 현재 페이지에서 이동 혹은 새 창으로 이동하는 버튼을 만들고 싶을 때 위의 코드에 링크 주소만 바꾸어 사용하면 된다. 2021. 4. 7.
이미지 태그 <img>의 alt와 title 속성 일반적으로 이미지 태그는 아래와 같이 사용한다. baby.jpg 라는 파일명의 이미지 파일을 불러온 것이다. 그런데 이러한 이미지 태그 에 alt나 title 속성을 사용한 것을 볼 수 있다. 이 속성들은 각각 무엇이고 어떤 상황에 사용해야 할까? alt의 의미와 사용 이미지 태그의 alt 속성은 해당 경로에 이미지가 없거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트이다. 대체 텍스트이므로 당연히 이미지의 내용을 대체할 수 있는 이미지 설명이어야 하며, 텍스트가 포함된 이미지의 경우 반드시 해당 텍스트를 함께 적어주는 것이 좋다. 시각장애인들은 alt의 내용을 리더기로 듣게 되는데, 현재 국가지침으로 정해져 있는 alt 텍스트의 글자수 제한은 없으나 통상 200~250자 정도까지를 권장하고 있다. (그 .. 2020. 10. 28.
html 문서 주석 처리하기 <!--주석--> html 문서를 작성할 때, 해당 코드에 대한 추가 설명을 넣고 싶을 때가 있는데 이럴 때 주석(comment)을 사용한다. 주석은 웹 브라우저의 페이지 소스 보기 등을 통해서는 확인이 가능하지만 웹 페이지 내에는 나타나지 않는다. 주석(comment)은 해당 코드에 대한 추가 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 로 마무리한다. (느낌표 유무 차이) 주석은 한줄에도, 여러 줄에도 모두 적용이 가능하여 활용도가 높다. [TIP] 주석을 중첩으로 인식하지는 못하므로, 주석 안에 또 다른 주석을 사용해서는 안 된다. 2020. 9. 30.
앵커(anchor) 만들어서 페이지 내 위치 이동시키기 앵커라는 단어는 많이 들어보았을 것이다. 앵커(anchor)의 사전적 의미는 '배의 닻'을 의미하며, 웹상의 html 페이지에서는 어떤 대상의 시작 지점을 알리는 의미로 쓰이기도 한다. 페이지의 내용이 많아 스크롤이 너무 길 때, 원하는 컨텐츠를 쉽게 찾을 수 없을 때 - 앵커 태그(anchor tag)를 이용하여 편리하게 이동할 수 있다. 아래의 이미지와 같이 section1~4로 이루어진 페이지가 있다고 가정해보자. 페이지의 상단 부분에 버튼 4개를 만들어서 클릭 시에 해당 섹션으로 바로 이동하게 한다면 방문객들이 훨씬 쉽고 편리하게 컨텐츠를 이용할 수 있을 것이다. 앵커 태그는 각 섹션의 시작 지점에 아이디값을 설정하고, a 태그를 이용하여 링크를 아이디값으로 지정해 주면 된다. 예시로 div에 아.. 2020. 9. 27.
줄바꿈태그 <br>과 <br/>의 차이 "안녕? 친구하지 않을래" 라는 텍스트를 표시하고 싶어서 html 파일을 만들고 아래와 같이 썼다. 태그를 이용하여 텍스트를 감싸 주었다. 는 paragraph의 약자로 '문단'을 의미한다. 에디터(왼쪽)에서 엔터를 쳐서 줄바꿈을 하더라도 미리보기 페이지(오른쪽)에서는 줄바꿈이 적용되지 않는다. 가 문단이라는 의미이니 이를 응용하여 태그를 두 번 사용하면 줄바꿈 효과를 낼 수 있다. 하지만 문단이므로 사이 간격이 벌어진 것을 확인할 수 있다. 우리는 이럴 때 태그를 사용하여 아래와 같이 간단하게 줄바꿈을 할 수 있다. 은 break의 약자이며 열고 닫는 태그가 존재하지 않아서 만 써주어도 된다. 간혹 이나 이 보이는데 문법상 차이가 거의 없다고 보아도 무방하다. HTML5 : 을 사용하며, 또는 과도 혼.. 2020. 9. 14.