Keep going

입력 양식이란 특정 항목에 사용자가 뭔가를 입력할 수 있게 만든 것으로 '폼이라고도 한다. (로그인 창, 검색 창 등등) HTML에서 입력 양식을 사용하면 로그인 창에 아이디와 비밀번호 항목을, 회원 가입 양식에 이메일 주소, 전화번호 등의 항목을 넣을 수도 있다. 1. 폼 삽입하기 웹에서 만나는 폼 - 우리는 웹에서 폼을 자주 만난다. - 아이디와 비밀번호를 입력하거나 로그인 버튼, 회원 가입 등 사용자가 웹 사이트로 정보를 보낼 수 있는 모든 요소는 모두 폼이라고 할 수 있다. - 검색 사이트나 쇼핑몰 주문서 화면에서도 폼을 이용한 입력란을 볼 수 있다. 폼의 동작 과정 - 사용자가 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭하면 입력한 정보는 웹 서버로 전송된다. - 그럼 서버는 자신이 가진 데..

하이퍼링크는 클릭만 하면 연결된 곳으로 바로 이동해 웹 사이트를 더욱 편리하게 사용할 수 있는 중요한 기능이다. 링크를 삽입하는 태그와 href 속성 - 웹 사이트의 링크의 기능은 가장 많이 사용된다. - 링크는 태그로 만드는데, 이 때 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다. - 태그의 기본형은 href 속성을 이용해 연결할 파일이나 링크할 주소를 쓴다. # 텍스트 링크 만들기 - 텍스트 링크는 와 태그 사이에 링크로 만들 텍스트를 입력하고, href 속성에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다. 주문서 작성하기 cs # 이미지 링크 만들기 - 텍스트 링크를 만드는 것과 같은 방법으로 태그를 사용해 이미지에 링크를 추가할 수 있다. - 링크..

다양한 멀티미디어 파일을 삽입할 때 쓰는 , 태그 - 태그는 오디오 파일뿐만 아니라 비디오, 자바 애플릿, PDF 등 다양한 멀티미디어 파일을 삽입할 때 사용한다. - 웹 문서 안에 다른 문서를 삽입할 때도 사용할 수 있다. - data 속성에 보여 줄 멀티미디어 파일을 지정하고 width, height 속성을 사용해 플레이어의 크기를 지정한다. - 태그를 사용하여 웹 문서에 PDF 파일을 삽입하면 PDF 리더가 자동으로 포함되어 보여 준다. cs - 태그는 HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용할 수 있다. - 태그에는 src 속성을 사용해 삽입할 멀티미디어 파일을 지정한다. - 필요할 경우 width, height 속성으로 플레이어의 너비와 높이를 지정할 수 있다. - 태그에는 닫는..

이미지를 삽입하는 태그 - 태그에서 알아야 할 속성은 src와 alt 이다. - src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 한다. - alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력한다. 레드향 cs 웹에서 사용하는 대표적인 이미지 파일 형식 - 웹에서 사용하는 이미지는 인터넷으로 전송해야 하므로 파일 크기가 크지 않으면서 화질이 좋아야 한다. - 주로 JPG(또는 JPEG) 나 PNG 파일 형식을 사용한다. 아이콘이나 로고처럼 작은 이미지일 경우 GIF 파일을 사용하기도 한다. 종류 설명 GIF 표시할 수 있는 색상 수는 최대 256가지이다. 다른 이미지 파일 형식에 비해 파일 크기가 작아서 아이콘이나 불릿 등 작은 이미지..

표의 구성 요소 알아보기 - 표는 행과 열 그리고 셀로 이루어진다. - 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미한다. - 표를 만들려면 표를 만드는 태그와 행을 만드는 태그, 열을 만드는 태그가 필요하다. 표를 만드는 , 태그 - 표의 시작과 끝을 알려 주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. - 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. -

웹 문서에서 목록은 단순히 어떤 항목을 나열할 뿐 아니라 특히 CSS와 함께 사용해서 내비게이션을 만들거나 콘텐츠를 배치하는 등 다양한 용도로 사용한다. 순서 있는 목록을 만드는 , 태그 - 순서 있는 목록이란 말 그대로 각 항목을 순서대로 나열한 것입니다. - 순서 목록은 어떤 과정을 순서대로 설명할 때 과 태그를 사용해 만든다. - ol은 ordered list의 줄임말이고, li는 list의 줄임말이다. 상품 소개 페이지 레드향 샐러드 레시피 재료: 레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g 드레싱: 올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간 샐러드 채소를 씻고 물기를 제거한 후 준비합니다. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다. 드레싱 재료를..

제목을 나타내는 태그 - 웹 문서에서 제목은 다른 텍스트보다 크고 진하게 표시한다. - 태그에서 h는 제목을 뜻하는 heading을 줄인 말이다. - n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다. 상품 소개 페이지 레드향 레드향 샐러드 레시피 상품 구성 cs 텍스트 단락을 만드는 태그 , 줄을 바꾸는 태그 - 와 태그 사이에 택스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. - 편집기의 태그안에서 줄을 바꾸더라도 웹 브라우저에서는 한줄로 표시된다. 그렇다면 텍스트 단락을 만들 때 원하는 위치에 줄을 바꾸려면 어떻게 해야하는가? - 태그를 사용하면 줄을 바꿀 수 있다. - 태그는 단독으로 사용하므로 닫는 태그가 필요 없다. 상품 소개 페이지 레드..

의미 요소(semantic element) 의미 요소란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다. 의미 요소가 아닌 div 요소나 span 요소 등은 해당 요소가 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있습니다. 하지만 의미 요소인 table 요소는 코드를 보지 않아도 해당 요소가 표를 만드는 데 사용되었다는 것을 이름만 살펴봐도 바로 알 수 있습니다. 헤더 영역을 나타내는 태그 헤더란 도입부에 해당하는 콘텐츠를 가지고 있는 부분을 의미합니다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있습니다. (한 문서 내에 여러 개의 header 요소가 존재 가능) 사이트에서 헤더..