자신의 일은 스스로하자

이미지 태그 HTML은 img태그를 사용해 이미지를 넣습니다. img태그에서 가장 중요한 것은 속성입니다. img 태그 속성 -> 이미지의 경로 지정 ->이미지가 없을 때 나오는 글자 지정 -> 이미지의 너비 지정 -> 이미지의 높이 지정 위 코드를 실행시키면 아래 사진처럼 고양이 그림이 출력된 것을 볼 수 있습니다. 하지만 출력된 이미지가 원하는 크기가 아닐 수 있습니다. width, height 속성을 사용해 원하는 크기로 변경할 수 있습니다. img 태그사용 시 src경로와 이미지 이름을 확인 후 출력해주세요. 사진을 찾기 쉽게 아래 사진처럼 실행파일 안에 img파일을 만들었습니다. 위 코드처럼 src경로가 없는 상태로 출력하게 되면 아래처럼 이미지가 없을 떄 실행되는 alt속성의 글이 출력됩니다...

테이블 태그 테이블테그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다. 테이블 요소 태그 -> 표 내부의 행 태그, table row를 의미 -> 행 내부의 제목 셀 태그, table header를 의미 -> 행 내부의 일반 셀 태그, table data를 의미 header1 header2 1 1 2 2 위 코드를 실행하면 아래의 표형식 배치만 나오게 됩니다. 표처럼 테두리를 만들기 위해서는 속성이 필요합니다. 테이블 태그 속성 ->표의 테두리 두께 지정 위 코드에 border 속성을 추가해 테이블을 만들면, 아래 사진처럼 실행됩니다. border 속성 값이 커질 수록 겉 테두리가 두꺼워지는 것을 확인할 수 있습니다. th 태그와 td 태그 속성 -> 셀의 높이 지정 ->셀의 너비 지정 tabl..

목록 태그 웹 페이지의 내비게이션 메뉴를 만들 때 목록 태그를 사용합니다. 기본 목록 -> 순서가 없는 목록 태그입니다. -> 순서가 있는 목록 태그입니다. -> 목록의 요소를 나타냅니다. ol 태그 red blue yellow ul 태그 red blue yellow 위 코드들를 실행하면 아래 사진처럼 출력돼 ol태그와 ul태그의 차이를 알 수 있습니다. 중첩해서 목록 Color red blue yellow Fruit apple peach grape 중첩해서 목록을 만들 때는 li태그 안에 목록 태그를 입력하면 아래 사진처럼 출력됩니다. 정의 목록 : 정의 목록은 특정 용어와 그 정의를 표현할 때 사용하는 태그입니다. -> 정의 목록 태그입니다. -> 정의 용어 태그입니다. -> 정의 설명 태그입니다. ..

2021.06.27 - [HTML, CSS] - [HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원] [HTML] #3_1 HTML 기본용어/ 구조/ 글자 태그 [스마트인재개발원] HTML기본 용어 / 구조 HTML은 태그, 요소, 속성으로 이루어져 있습니다. 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다. 이 태그를 사 oneself.tistory.com 이전 글과 이어집니다. 글자 형태 태그 : 글자 형태 태그를 사용해 웹 페이지의 글자 형태와 의미를 부여합니다. -> 굵은 글자를 나타냅니다. -> 기울어진 글자를 나타냅니다. -> 작은 글자를 나타냅니다. Hyper Text Markup Language Hyp..

HTML기본 용어 / 구조 HTML은 태그, 요소, 속성으로 이루어져 있습니다. 태그는 HTML 페이지에서 객체를 만들 때 사용하는 것입니다. 사용할 수 있는 태그는 모두 미리 정해져 있습니다. 이 태그를 사용해 만들어진 객체를 요소라고 부릅니다. 태그에 추가 정보를 부여할 때는 속성을 사용합니다. 사용할 수 있는 속성 또한 W3C재단에서 정의해두었습니다. HTML구조는 아래 사진을 참고해 주세요. Hello HTML -> 태그는 웹 브라우저 현재 웹페이지가 HTML5 문서 임을 인식하게 해 줍니다. 반드시 문서의 첫 번째 줄에 있어야 합니다. ->모든 HTML페이지의 루트 요소입니다. lang 속성은 실제 웹 브라우저가 동작하는데 어떤 영향도 끼치지 않습니다. (검색엔진이 웹페이지를 탐색할 때 해당 웹..

2021.06.01 - [HTML, CSS] - [HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원] [HTML] #1 Visual Studio Code 다운로드/기본 설정[스마트인재개발원] HTML이란? HTML(HyperText Markup Language)하이퍼텍스트 마크업 언어는 윕 페이지를 위한 지배적인 마크업 언어입니다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아 oneself.tistory.com Visual Studio Code의 기본 설정 방법은 위 포스팅을 확인해주세요. Visual Studio Code의 기본 설정을 다 했다면 이번에는 본격적으로 HTML 페이지 생성과 페이지 작성, 페이지 실행하는 방법에..

HTML이란? HTML(HyperText Markup Language)하이퍼텍스트 마크업 언어는 윕 페이지를 위한 지배적인 마크업 언어입니다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용 등의 항목으로 구조적 문서를 만들 수 있는 방법을 제공합니다. 또한 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있습니다. 이제 HTML을 시작하기 위해 기본 설정을 해보겠습니다. 1. 크롬 설치 크롬은 현재 가장 많은 HTML 기능을 지원하는 웹 브라우저입니다. 만약 크롬이 설치 되어 있다면 기본 웹 브라우저를 크롬으로 바꿔줍니다. 2. Visual Studio Code 설치 이제 본격적으로 통합 개발 환경을 다운로드 받겠습니다. Visual..