홈페이지 만들기/1단계. HTML17 HTML 폼(form) 태그: <form> <input> 태그와 text password number 속성 HTML 폼(form) 태그: 태그와 text password number 속성 태그를 사용하면 사용자의 정보를 웹 서버로 보내줄 수 있습니다. 그러나 태그를 사용하여 실제로 정보를 서버로 보내기 위해서는 서버에 대한 공부가 더 필요합니다. 따라서 우리는 태그를 사용하여 '폼 형태(껍데기)'를 만드는 것까지만 해보겠습니다. 1. 태그 - 사용자의 정보를 웹 서버로 보내주는 태그 - 태그는 여러 가지 속성을 사용해 사용자가 입력한 자료를 다양한 방법으로 처리합니다. - 아래는 태그의 속성들입니다. 1) method: 사용자가 입력한 정보를 서버에 어떻게 전송할지 정합니다. ① get으로 설정할 경우, 주소 표시줄에 사용자가 입려한 정보가 그대로 드러납니다. ② post로 설정할 경우, 사용자가 입력한 정보.. 2020. 10. 15. HTML 링크(a) 태그: <a> 태그와 속성(href target id) HTML 링크(a) 태그: 태그와 속성(href target id) 1. 태그 - 링크를 만들어주는 태그 (텍스트에 링크 삽입하기) - '링크'를 사용하면, 문서와 문서를 연결해줄 수 있습니다. - 어떤 텍스트나 이미지를 클릭했을 때, 다른 페이지로 연결된다면 그 텍스트와 이미지에는 태그가 사용된 것입니다. - 위는 'Daum으로 이동하기' 텍스트를 태그로 묶어 링크를 만들어 준 것입니다. - 텍스트를 클릭했을 때 이동할 문서의 주소는 href 속성으로 지정해줍니다. 위에서는 'https://www.daum.net'으로 주소를 지정해주었습니다. - 웹브라우저 상에 링크가 삽입된 텍스트가 표시될 때는 방문하지 않은 곳이 파란색, 방문한 곳이 보라색으로 표시됩니다(CSS로 다른 색을 지정해줄수도 있음). 2.. 2020. 10. 13. HTML 이미지(img) 태그: <img> 태그와 경로 설정(src / ..) HTML 이미지(img) 태그: 태그와 경로 설정(src / ..) 1. 태그 - 이미지를 삽입해주는 태그 - 태그는 이미지는 삽입해주는 태그입니다. 닫는 태그가 없습니다. - src 속성은 이미지 파일 경로를 지정해주는 역할을 합니다. 자세한 내용은 아래에서 설명하겠습니다. - alt 속성은 이미지를 설명하는 대체 텍스트를 삽입할 때 사용합니다. - alt 속성을 사용하면 시각 장애인들이 화면 낭독기를 사용할 때, alt 속성에 있는 내용을 읽어줍니다. - 또는 인터넷 연결 속도가 느리거나 이미지를 제대로 표시할 수 없는 상황일 때 alt 속성에 있는 텍스트가 표시 되기도 합니다. - width 속성은 이미지의 너비를 지정해줍니다. height 속성은 이미지의 높이를 지정해줍니다. - width와 he.. 2020. 10. 11. HTML 표(table) 태그: <table> <tr> <td> <th> <caption> <figcaption> <thead> <tbody> <tfoot> HTML 표(table) 태그: 1. 태그 - 기본적인 표를 만드는 태그 - 위 태그로 표를 만들면 표의 테두리선들은 원래 보이지 않습니다. 저는 CSS를 이용해 선이 보이도록 해두었습니다. - 위 표는 2행 2열로 구성되어 있습니다. - 태그는 표 전체 윤곽을 만들어줍니다.(붉은색) - 태그는 행(row)을 만들어줍니다.(노란색) - 태그는 값(data)이 들어갈 영역을 만들어줍니다.(초록색) 2. 태그 - 제목 셀을 만드는 태그 - th는 table header의 줄임말입니다. - 태그를 사용하면 제목 셀을 만들어줍니다. - 태그는 제목을 표현하기 위해, 글자를 굵게 표시하고 셀 중앙에 텍스트를 배치합니다. 3. 태그 - 표에 제목을 붙여주는 태그1 - 태그는 표에 제목을 붙여줍니다. - 태그를 사용.. 2020. 10. 9. HTML 목록(list) 태그: <ul> <ol> <li> <dl> <dt> <dd> 목록(list) 태그: 태그 - 순서가 없는 목록 만들기 - '목록태그.html'이라는 새파일을 만들었습니다. - ul은 'unordered list'의 줄임말입니다. - 태그 단독으로는 웹 브라우저 상에 목록을 만들 수 없습니다. - 태그 안 쪽에 태그를 삽입해 목록을 만들어 주어야 합니다. - li는 list item의 줄임말입니다. - 태그는 순서가 없는 목록이기 때문에, 각 목록 앞에 작은 원이나 사각형이 붙습니다. - 이 작은 원이나 사각형을 불릿(bullet)이라고 부릅니다. 태그 - 순서가 있는 목록 만들기 - ol은 'ordered list'의 줄임말입니다. - 태그는 태그와 마찬가지로, 단독으로는 웹 브라우저 상에 목록을 만들 수 없습니다. - 태그는 안 쪽에 태그를 삽입해 목록을 만들어.. 2020. 10. 7. HTML 인라인(inline) 태그: <strong> <b> <em> <i> <q> <mark> <span> HTML 인라인(inline) 태그: 0. 인라인(inline) 태그란? - '인라인태그.html' 파일을 새로 만들었습니다. - '블록태그'는 블록 태그입니다. 웹브라우저에서 한 줄 전체를 다 차지합니다. - '인라인태그'는 인라인 태그입니다. 웹브라우저 텍스트가 있는 만큼만 공간을 차지합니다. 1-1. 인라인 태그 vs 블록 태그 - '인라인태그.html' 웹 브라우저 화면에서 우클릭해봅니다. - '검사(N)'를 클릭합니다. - '화살표 모양 버튼'을 클릭하면 웹 브라우저 화면에서 개체를 선택할 수 있게 됩니다. - '블록태그'라고 써있는 부분에 마우스를 올려봅니다. 블록 태그로 감싸져 있기 때문에, 웹 브라우저 한 줄 전체를 차지하고 있는 것을 색깔로 보여줍니다. - '인라인태그'라고 써있는 부분에.. 2020. 10. 5. 이전 1 2 3 다음 반응형
