데브마우스

의미론적 태그(Semantic tag)란 무엇인가요? HTML5에서 도입된 태그로써 각각의 태그 안에 어떤 정보를 담고 있는지 전달하기 위해 도입된 태그입니다. 처음 웹에는 각각의 요소의 구역을 div 태그로만 구분하였습니다. 하지만 HTML 문서를 사람만 읽는게 아닌 기계(봇)도 읽기 시작하였습니다. 바로 검색 엔진도 웹 문서를 읽기 시작한 것이지요. 그래서 이러한 정보를 더 잘 전달하기 위해서 의미론적 태그가 생겨났습니다. 의미론적 태그는 모두 블록 요소를 가지고 있으며 이는 보통 사용자 정의 태그가 inline 속성을 지니는데 비해 블록 요소를 가지고 있으며 이는 미리 정의된 태그라는걸 알 수 있습니다. 의미론적 태그(Semantic tag) 태그 이름 요소 설명 div 블록 요소들을 그룹으로 정의..

폼(form) 태그란 무엇인가요? 폼 태그는 입력을 받기 위한 입력 형태(form)를 정의하기 위해 사용됩니다. 폼 태그안에는 input 태그가 있으며 이에따라 다양한 입력(input)을 받을 수 있습니다. 하지만 로그인 페이지처럼 사용자로부터 입력을 받는다고 꼭 폼태그를 써야하는 것은 아닙니다. div 태그 안에 input 태그를 넣어서 해결 할 수도 있습니다. 그럼에도 폼 태그 덕분에 사용자로부터 입력을 받는 창을 더 쉽게 만들 수 있습니다. form 태그 태그 요소 분류 설명 form 블록 입력폼을 정의합니다. 한쌍을 이루는 태그이며 아래 예시처럼 많은 입력을 받을 수 있게 합니다. form 태그의 속성 속성 속성 값 설명 action URL 폼 안의 데이터가 서버로 제출될 때, 그 데이터가 도착할..

table 태그란 무엇인가요? 테이블 태그는 행과 열로 이루어진 테이블을 만들기 위해 사용하는 태그입니다. table 태그 태그 이름 요소 분류 태그 설명 table 블록 요소 셀(cell)을 행과 열로 표현합니다. table 태그의 하위 태그 table 태그의 하위 태그 table의 하위 태그 display 요소 설명 table-caption 테이블의 제목을 표시하기 위해서 사용됩니다. table-row 테이블의 한 줄(가로 줄)을 생성하기 위해서 사용됩니다. 행을 의미합니다. table-cell 테이블의 한 칸(cell)을 생성하기 위해서 사용됩니다. 열을 의미합니다. table-cell 테이블의 한 칸(cell)을 생성하기 위해서 사용됩니다. 제목을 표시하기 위해서 사용되며 bold처리가 되어 있습..

img(이미지) 태그 초창기 웹 사이트는 대부분 텍스트 위주였으나 멀티 미디어를 원했으며 img 태그가 등장하게 되었습니다. img 태그는 사진을 볼 수 있게 해주는 태그입니다. 간과하기 쉽지만 img 태그는 인라인 요소입니다. 그렇기에 세로로 쌓이지 않고 가로로 쌓이는 특징을 가지고 있습니다. 태그 설명 요소 분류 비고 img HTML 문서에 이미지를 삽입합니다. 인라인 요소 싱글 태그 img 태그의 속성 속성 속성 값 설명 alt 텍스트 이미지 로딩 실패 시 대체 텍스트를 설정합니다. border px(픽셀) 이미지에 검은색 테두리 두께를 지정합니다. 일반 숫자만 넣고 px를 적지 않아도 px로 인식합니다. height px(픽셀) 이미지의 세로 사이즈를 지정합니다. width px(픽셀) 이미지의 ..

a 태그는 무엇인가요? a 태그는 HTML에서 다른 페이지나 동일 페이지의 특정 부분으로 이동할 수 있게 해주는 태그입니다. 아래는 코드 예제입니다. 링크 텍스트 a 태그 속성 및 속성 값 정리 속성 값 설명 href URL(https://devmouse.tistory.com) 링크된 페이지로 이동합니다. target _blank (새 창) _parent _top _self (현재 창) 클릭 했을 때 문서가 열릴 위치를 정합니다. _blank는 새 창에서 열립니다. type 미디어 타입 링크된 문서의 미디어 타입을 알려줍니다. 따로 작성된게 없다면 웹 페이지로 이동합니다. download 파일 이름 클릭 시 해당 컨텐츠가 다운로드 되게 합니다.

HTML 텍스트 관련 태그 태그 이름 요소 분류 태그 설명 , , ... 블록 제목(heading)을 정의하는 태그입니다. 숫자가 작을수록 큰 제목을 나타냅니다. 블록 단락(paragraph)을 나타내는 태그입니다. 블록 수평선을 생성하는 태그입니다. 블록 순서가 없는 목록을 표시합니다. 블록 순서가 있는 목록을 표시합니다. 블록 제목이 있는 목록을 표시합니다. 블록 목록을 만드는 태그입니다. 인라인 텍스트를 강조하는 태그입니다. 일반적으로 볼드체로 표시됨입니다. , 인라인 텍스트를 강조하는 태그입니다. 일반적으로 이탤릭체로 표시됨입니다. 인라인 텍스트에 밑줄을 그어 표시하는 태그입니다. 또는 인라인 텍스트에 취소선을 그어 표시하는 태그입니다. 인라인 텍스트에 밑줄을 친 것처럼 표시하는 태그입니다. 인라..

HTML 기본 구조의 규칙 HTML은 웹 브라우저가 읽을 수 있는 문서 파일입니다. 그렇다면 문서 파일을 작성하는 규칙이 있습니다. HTML의 모든 요소는 블록 요소와 인라인 요소로 나눌 수 있습니다. 블록 요소란 무엇인가요? 블록 요소는 줄 바꿈이 일어납니다. (세로로 쌓입니다.) 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다. 블럭 요소 중 특정 블록 요소는 자식 요소를 포함할 수 없는게 있습니다. CSS로 width와 height를 지정할 수 있습니다. 인라인 요소란 무엇인가요? 인라인 요소는 줄 바꿈이 일어나지 않습니다. (가로로 쌓입니다.) 텍스트와 인라인 요소를 자식 요소로 포함할 수 있습니다. 블록 요소를 자식으로 포함할 수 없으나 예외가 몇가지 있습니다. 사진을 올리는 img 태그..

입력 양식을 만드는 HTML의 form태그가 있습니다. 이런 form태그를 fieldset과 legend 태그로 꾸며줄 수 있습니다. See the Pen form의 legend와 fieldset 요소 by Dongmin Jeong (@Dongmin-Jeong) on CodePen. 태그는 입력 form의 테두리 위의 제목을 지정합니다. 태그가 있을 경우 태그는 뚜렷하게 드러나지만 태그가 없을 경우 태그는 글자만 나타납니다. 아래 예제는 태그가 있고 태그가 없는 예제입니다. See the Pen form-fieldset이 없고 legend가 있는 form by Dongmin Jeong (@Dongmin-Jeong) on CodePen. 아래 예제는 태그가 없고 태그가 있는 예제입니다. See the Pe..