본문 바로가기

Frontend Developer/HTML9

[HTML] 양식 태그 HTML Forms - 1 ( <form>, <label>, <input> ) 양식 생성 태그 : 요소는 사용자로부터 정보・데이터와 같은 인풋(input)을 받아 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. Name: Submit HTML 문서 내에 사용자의 이름을 받아 제출해야 하는 경우, 위 코드 처럼 태그로 구획을 지정하고 그 구획 안에서 사용자의 이름을 받아 제출하는 양식을 만들 수 있는 것이다. 그럼 다음과 같이 사용자가 이름을 입력할 수 있는 입력창과 제출 버튼이 생성된다. 태그를 사용할 때 꼭 알아두어야 할 속성(attribute) 두 가지가 있다. 먼저 'action' 속성은 양식 데이터를 처리할 서버의 주소값을 가진다. 즉, 입력받은 정보나 데이터를 서버에 보내 처리하는 기능을 한다. 다음 'method' 속성은 양식의 정보 전달 방식을 결정한다... 2021. 2. 17.
[HTML] 목록 태그 똑똑하게 사용하기 ( <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <dfn> ) 목록 태그하면 가장 먼저 떠오르는 게 태그이지 않을까? 혹은 요소는 반드시 이나 요소 안에 작성해야 한다는 것까진 알고 있지만, 과 의 차이를 정확히 모르고 있을 수도 있겠다. 이번 포스팅에서는 정말 많이 사용하는 목록 표현요소 태그인 , , 태그와 흔히 사용하진 않지만 좀 더 정확하고 명확한 정보 전달 마크업을 위한 정의 목록 태그에 대해서도 정리해 보겠다. 비정렬 목록 태그 : 요소는 정렬되지 않은 목록(unordered list ) 즉, 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 안에 들어갈 항목의 순서를 바꿨을 때 그 목록의 의미도 바뀌게 된다면 이 아닌 태그를 사용하는 것이 바람직하다. 과 의 직계 자식 요소로는 오직! 요소만 올 수 있다. 요소는 밑에서 보다 자세히 다루겠지만, 목.. 2021. 2. 17.
[HTML] 미디어 파일 태그 ( <img> <audio> <video> <iframe> + <source> ), Can I use 사이트 이용 방법 미디어 파일 태그 미디어 파일(Media file)이란, 텍스트가 아닌 데이터 -이미지, 음성, 영상 등-을 가리킨다. 우리가 인터넷에서 어떤 미디어 파일을 내 컴퓨터로 다운받아 실행하려고 할 때, 만약 그 파일이 내 컴퓨터에서 지원하지 않는 확장자로 되어있다면?! 당연히 파일이 실행되지 않을 것이다. 웹 개발에서도 마찬가지인데, 확장자를 따지는 까다로운 녀석이 컴퓨터가 아니라 브라우저라고 생각하면 된다. MDN 사이트의 'Media type and format guide' 문서에서 일부를 가져왔다. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate.. 2021. 2. 14.
[HTML] 앵커 태그로 하이퍼링크 만들기 ( <a> ) 앵커 태그 : HTML의 앵커 태그 즉, 태그는 다른 페이지 또는 같은 페이지의 특정 위치나 파일과 같은 다른 URL로 연결할 수 있는 하이퍼링크를 만드는 기능을 한다. 우선 'anchor'라는 단어의 사전적 의미는 '닻을 내리다' '정박하다' '고정시키다' 라는 뜻이다. 사실 왜 앵커(anchor) 태그라는 이름을 붙인건지는 잘 모르겠지만, 'anchor'의 뜻을 HTML 앵커 요소의 기능과 연관시켜 생각해보면 -현재 페이지에 하이퍼링크로 연결되는 다른 페이지를 고정시킨다- 정도로 이해할 수 있을 것 같다. Tistory 태그는 문법적으로, 이동할 주소값을 나타내는 'href' 속성(attribute)을 함께 작성해 주어야 한다. 'href'는 'hypertext reference' 로, hyperte.. 2021. 2. 6.

티스토리툴바