5강 HTML의 구조

지금까지는 문법을 배웠다고 생각하면 된다. 말하자면 문장을 만드는 법을 배웠다고 할 수 있습니다. 문장이 모이면 페이지가 되고 페이지가 모이면 책이 됩니다. 책에는 표지가 있고 표지에는 제목과 저자가 표기됩니다. 이처럼 정보가 많아짐에 따라 정보를 잘 정리하기 위한 체계 다시 말해 구조라는 것이 필요한데 이번에는 구조를 만드는 것을 알아보겠습니다. 지금까지는 언급을 안 했지만 빈도수가 가장 높은 임원급의 태그를 알려드리겠습니다. 그림을 보면 빈도수가 가장 높은 태그가 있는데 html , head , dody , title , mata 총 5개의 태그가 있습니다. 1. title 웹 페이지의 탭 부분을 보면 제목 또는 타이틀이 이거나 사이트의 이름이 적혀 있는 것을 볼 수 있다. 하지만 우리가 지금까지 만..

2020.08.21

4강 이미지 속성 , 부모태그와 자식태그

- 이해도를 높이기 위해 한글 문서를 캡처했습니다. - 1. 이미지 삽입 웹 페이지에 글씨만 있으면 먼가 답답한 느낌이 든다. 먼가 좀 화려한 게 있으면 좋겠다는 생각을 하게 된다. 그렇다! 사진을 넣고 싶다고 생각할 것이다. 이미지(image)를 웹페이지에 포함시킬 때 사용하는 태그는 태그입니다. 하지만 img 만으로는 정보가 부족하다. 그래서 여기에 속성 값을 주어야 하는데 이게 바로 source인데 줄여서 src로 하기도 합니다. 코드 : 이미지를 불러오게 되면 크기가 원하는 대로 나오지 않을 수도 있다. 그래서 우리는 이미지의 크기를 조절해줄 필요가 있다. 그게 바로 width라는 속성 값을 주게 된다. 예제 width CSS width 속성은 요소의 너비를 설정합니다. 기본값은 콘텐츠 영역의 너..

2020.08.06

3강 HTML기본문법

- 이해도를 높이기 위해 한글 문서를 캡처했습니다. - 1. 글자를 진하게 하기 무언가 중요하다고 생각하는 글자에게는 우리는 강조를 주고 싶어 한다. 문서 작성 프로그램을 보면 "진하게"라는 메뉴가 따로 존재할 것이다. 옆에 사진은 한글이란 프로그램을 실행한 화면이다. 선택한 글자를 진하게 해주는 메뉴를 볼 수 있다. 이것을 웹 페이지에서도 구현이 가능하다. 코드 : 내용 2. 밑줄 긋기 글자를 진하게 하는 것만으로도 부족하고 느낄 때 밑줄을 한번 더 그어서 더 중요하다는 것을 강조하고 싶을 때 사용한다. 밑줄은 영어로 underline이라고 하는데 앞 글자를 따서 코드를 만들었다. 코드 : 내용 3. 제목의 크기 나타내기 티스토리 글쓰기를 보면 제목의 크기를 고를 수 있는 메뉴가 나타난다. 웹 페이지에..

2020.07.29

2강 HTML 실습 환경 준비

1. 에디터 준비하기 이미 여러분의 컴퓨터에는 에디터가 존재한다. 윈도우에는 메모장 , 맥에는 TextEdit , 리눅스는 Gedit 등이 이미 설치되어 있다. 여러 에디터 중에 본인에게 맞는 것을 찾는 것도 중요하지만 이제 시작하는 사람들에게는 어떤 에디터가 나에게 맞는건지 찾기가 힘들다. 또한 에디터들의 사용방법이 다 다르기 때문에 통합해서 설명하기가 쉽지 않다. 그래서 준비한게 여러분들이 코드를 작성하는데 최적화되어 있는 프로그램을 사용하기로 했다. 바로 ATOM이란 에디터 프로그램이다. 아래 그림을 클릭해 설치해 보자. 어렵지 않으니 보통 프로그램 설치하는 대로 하면 된다. A hackable text editor for the 21st Century At GitHub, we’re building..

2020.07.17

1강 HTML 이란

1. HTML 이란? HTML 또는 하이퍼텍스트 마크업 언어(HyperText Markup Language)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. 2. HTML 정의 사..

2020.07.16