본문 바로가기

분류 전체보기

 (216)
HTML5 - 이미지 태그 이미지를 생성할 때는 아래의 img 태그를 사용합니다. img 태그에는 여러가지 속성이 있지만 그중 가장 중요한 속성은 아래 표와 같습니다. 속성 이름 설명 src 이미지 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지 너비 지정 height 이미지 높이 지정 최근에는 스타일시트를 이용해 입력하는 것이 일반적이므로 width 속성과 height 속성은 잘 사용하지 않습니다. src 속성에 이미지 경로를 입력하면 이미지가 뜹니다. 예시1 이미지 태그를 사용하여 코드를 입력하면 예시1의 결과가 나옵니다. src 속성에 입력한 이미지가 존재할 때는 이미지를 출력하고 이미지가 존재하지 않을 때는 오른쪽 그림처럼 alt 속성에 입력한 글자가 출력 됩니다. 예시2 마땅히 사용할 이미지 없는 ..
2019년 11월 11일 스터디 기록 HTML 기본 용어 정리 : https://miyakita.tistory.com/2 HTML5 - 기본 용어 정리 태그와 요소 태그는 HTML 페이지에서 객체를 만들때 사용하는 것입니다. 태그를 사용해 만들어진 객체를 요소라고 부릅니다. 예시1 Hello HTML5 위의 예시1 에서 시작 태그 과 끝 태그 를 별도.. miyakita.tistory.com 페이지 구조 : https://miyakita.tistory.com/3 HTML5 - 페이지 구조 HTML 페이지를 직접 작성하기 위한 사전 공부입니다. 모든 HTML 페이지는 다음 코드에서 시작합니다. miyakita.tistory.com 글자 태그 : https://miyakita.tistory.com/4 HTML5 - 글자 태그 글자 태그는 웹 페..
HTML5 - 테이블 태그 테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다. 과거에는 테이블 태그를 사용해 레이아웃도 구성했습니다. 하지만 현대의 웹 페이지 대부분은 뒤에서 살펴볼 div 태그를 사용해 레이아웃을 구성하므로 사용 빈도가 줄었습니다. 테이블 태그 기본 table 태그를 생성하기 위해서는 아래의 표의 태그를 이용합니다. 태그 이름 설명 tr 표 내부의 행 태그 th 행 내부의 제목 셀 태그 td 행 내부의 일반 셀 태그 tr 태그는 table row를 의미하고, th 태그는 table header를 의미하며 td 태그는 table data를 의미합니다. 이것을 이요해서 아래의 예시1을 만들 수 있습니다. 예시1 예시1을 실행하고 요소 검사를 해보면 코드를 입력한 것과 다르게 아래 예시2와 같은 계층..
HTML5 - 목록 태그 기본 목록 목록을 만들 때는 아래 표의 태그를 사용합니다. 태그 이름 설명 ul 순서가 없는 목록 ol 순서가 있는 목록 li 목록 요소 ol 태그는 정렬된 목록(ordered list)을 의미하고 ul 태그는 정렬되지 않은 목록(unordered list)을 의미합니다. 마지막으로 li 태그는 목록 요소(list item)를 의미합니다. 예시1 위의 예시1을 참고하면 ol 태그를 사용하면 글머리에 숫자가 붙은 목록이 생성되고 ul 태그를 사용하면 글머리에 기호가 붙은 목록이 생성됩니다. 정의 목록 정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그입니다. 단어를 써놓고 그 정의를 풀이한 목록을 정의 목록이라고 합니다. 정의 목록을 사용할 때는 아래 표와 같은 태그를 사용합니다. 태그 이름 설명..
HTML5 - 글자 태그 글자 태그는 웹 페이지에서 가장 많은 비중을 차지하는 태그입니다. 제목 HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그입니다. HTML5는 아래표의 제목 글자 태그를 제공합니다. 태그 이름 설명 h1 첫 번째로 큰 제목 글자 태그 h2 두 번째로 큰 제목 글자 태그 h3 세 번째로 큰 제목 글자 태그 h4 네 번째로 큰 제목 글자 태그 h5 다섯 번째로 큰 제목 글자 태그 h6 여섯 번째로 큰 제목 글자 태그 h1 태그부터 h6 태그의 h는 heading을 의미하며 각각의 숫자는 크기 및 우선 순위를 나타냅니다. 예시1 Heading 태그를 입력하고 코드를 실행하면 예시1과 같이 출력이 됩니다. h1 태그는 큰 제목을 의미하고 h6 태그는 작은 제목을 의미하며, 일반적으로 웹..
HTML5 - 페이지 구조 HTML 페이지를 직접 작성하기 위한 사전 공부입니다. 모든 HTML 페이지는 다음 코드에서 시작합니다. 태그는 웹 브라우저가 현재 웹 페이지가 HTML5 문서임을 인식하게 만들어줍니다. W3C의 HTML5 명세에 따르면 모든 HTML5 문서는 반드시 태그를 표기해야합니다. 또한 반드시 첫 번째 줄에 있어야 합니다. 예시1 두 번째 줄의 html 태그는 모든 HTML 페이지의 루트 요소입니다. 모든 HTML 태그는 html 태그의 내부에 작성합니다. html 태그에는 lang속성을 입력할 수 있습니다. lang 속성에는 아래 표의 값을 입력합니다. 국가 속성값 국가 속성값 한국 ko 미국 en 일본 ja 러시아 ru 중국 zh 독일 de lang 속성은 실제 웹 브라우저가 동작하는 데 어떠한 영향을 주지..
HTML5 - 기본 용어 정리 HTML5를 공부하려면 기본적으로 태그(Tag), 요소(Element), 속성(Attribute)이라는 용어를 알아야 합니다. 이번에 배워볼 내용은 이러한 기본 용어를 정리하는 내용입니다. 태그와 요소 태그는 HTML 페이지에서 객체를 만들때 사용하는 것입니다. 태그를 사용해 만들어진 객체를 요소라고 부릅니다. 예시1 Hello HTML5 위의 예시1 에서 시작 태그 과 끝 태그 를 별도로 입력하는 요소도 있지만 아래 예시2처럼 시작 태그와 끝 태그를 함께 입력하는 요조도 존재합니다. 단독으로 사용하는 태그는 HTML5 표기법과 XHTML5 표기법을 사용해 입력합니다. 예시2 HTML5 표기법 XHTML5 표기법 어떤 표기 방법을 사용해도 문제는 없습니다. 예시3 Article Header Lorem i..
환영합니다! #1 글을 작성해 보세요. 신입사원 최종원님의 회원 가입을 진심으로 축하합니다. 이 글은 비공개로 작성돼 있습니다. '편집'으로 내용을 바꾸시거나, 삭제 후 '새 글을 작성'하셔도 됩니다. 블로그를 간단하게 소개하는 글로 편집해보는 것도 좋겠네요. #2 다양한 스킨이 있어요. 티스토리에 있는 다양한 '스킨'도 살펴 보세요. 블로그나 사이트를 사용하는 목적에 맞게 스킨을 고를 수 있습니다. 어떤 이야기를 주로 하실 건가요? 잘 생각해 보시고, 마음에 드는 스킨을 고르세요. '스킨 커버 편집'을 간단히 하면 멋진 첫 화면을 가질 수 있으니 한 번 해보는 것도 좋겠네요 #3 포럼에서 사람들과 소통하세요. 마지막으로 사용하시다가 티스토리에 대해 궁금한 내용이 있다면 '포럼'을 확인하세요. 찾기 어려울 땐 직접 ..

티스토리툴바