HTML 기초~고급 핵심 정리까지 블로그 한페이지로 끝내기

서론

▶학습 목적 : 단순 암기 학습이 아닌 습득

▶독학 학습 보완 방법 : 인생 선배님들의 조언과 격려

▶ 학습 참조 자료 링크스

카레유

여행, 맛집, 역사, IT 프로그래밍에 관심이 많습니다. HTML, CSS, JavaScript, Android, Java, Kotlin, Python 을 주로 개발합니다.

curryyou.tistory.com

공부의신 강성태

공부법, 영단어, 영어회화, 영문법, 영어독해, 동기부여, 책방송, ASMR 등 온갖 꿀팁이 가득.「구독」하면 당신의 인생이 달라집니다. 소중한 여러분, 우린 반드시 할 수 있습니다! 빈부와 지역에

www.youtube.com

일잘러 장피엠

요즘 시대 일잘러를 위한 자기계발과 실행 튜토리얼

www.youtube.com

드림코딩

모든 드림코더분들이 개발자로 성장해 나가고 꿈을 이루는 여정에 함께 할 채널입니다. ❝Don't forget to code your dream 여러분들의 멋진 꿈을 코딩하세요 ⭐️ ...................................................

www.youtube.com

Part One, HTML 웹 프로그래밍 언어 학습 흐름 파악

HTML 마크업 언어는 HTML에 있는 많은 태그들을 개발자가 선택 후 조합하여 만든 여러 개의 콘텐츠 요소들을 웹 또는 모바일 앱으로 보여주는 것입니다.

HTML의 주요 역할과 개념은 다음과 같습니다:

1. 콘텐츠 구조화: HTML을 사용하면 텍스트, 이미지, 비디오, 링크 등 다양한 콘텐츠를 구조화할 수 있습니다. 예를 들어, 태그는 단락을 만들고, <img> 태그는 이미지를 삽입하는 데 사용됩니다.

2. 하이퍼링크: HTML을 사용하여 다른 웹 페이지 또는 리소스로 연결되는 하이퍼링크를 생성할 수 있습니다. <a> 태그를 사용하여 링크를 만들고, href 속성을 통해 링크 대상을 지정합니다.

3. 리스트와 표: HTML을 사용하여 목록(<ul>, <ol>)과 표(<table>)를 만들 수 있습니다. 이를 통해 정보를 구조화하고 시각적으로 표시할 수 있습니다.

4. 포멧팅과 스타일링: CSS(스타일 시트)를 사용하여 HTML 요소에 스타일과 디자인을 적용할 수 있습니다. 이를 통해 웹 페이지의 레이아웃과 모양을 조절합니다.

5. 멀티미디어: HTML은 이미지(<img>), 오디오(<audio>), 비디오(<video>) 등 다양한 멀티미디어 콘텐츠를 지원합니다.

6. 양식과 입력: 사용자로부터 정보를 수집하기 위해 HTML 양식(<form>)을 만들고 텍스트 상자, 라디오 버튼, 체크 박스 등의 입력 요소를 추가할 수 있습니다.

HTML은 웹 페이지와 모바일 앱의 구성과 표현에 필수적인 언어로, 웹 개발자가 웹 콘텐츠를 생성하고 제어하는 데 중요한 역할을 합니다.

HTML은 웹 페이지의 구조를 정의하는 데 사용되는 언어이며, 웹 개발에서 주로 사용됩니다. 그러나 HTML은 단순한 구조와 콘텐츠 정의를 위한 언어로, 웹 페이지의 디자인과 상호 작용을 추가로 개선하려면 다른 기술 언어와 함께 사용해야 합니다. HTML과 함께 사용하기 좋은 기술 언어는 다음과 같습니다.

1. CSS (Cascading Style Sheets): CSS는 HTML 요소의 스타일과 디자인을 제어하는 데 사용됩니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 레이아웃, 색상, 폰트 등의 시각적인 측면을 다루며, HTML과 함께 사용하여 웹 페이지의 디자인을 개선합니다.

2. JavaScript: JavaScript는 웹 페이지에 상호 작용성과 동적인 기능을 추가하는 데 사용됩니다. 웹 페이지 내에서 사용자와 상호 작용하고 데이터를 처리하는 데 유용하며, 웹 애플리케이션을 개발하는 데 필수적입니다

3. 서버 측 스크립팅 언어: 서버 측 스크립팅 언어인 PHP, Python, Ruby, Node.js 등은 웹 서버와 상호 작용하여 동적 웹 페이지를 생성하고 데이터베이스와 통신하는 데 사용됩니다. 이러한 언어를 사용하면 웹 애플리케이션을 개발하고 서버 기능을 구현할 수 있습니다.

4. SQL (Structured Query Language): SQL은 데이터베이스 관리 시스템과 상호 작용하여 데이터를 저장, 검색 및 조작하는 데 사용됩니다. 웹 애플리케이션에서 데이터베이스와의 효율적인 데이터 처리를 위해 필요합니다.

5. 프레임워크와 라이브러리: 다양한 웹 개발 프레임워크와 라이브러리는 웹 애플리케이션 개발을 더 효율적으로 만들어 줍니다. 예를 들어, React, Angular, Vue.js는 웹 프론트엔드 개발을 간편하게 만들어 주는 프론트엔드 프레임워크입니다.

6. API (Application Programming Interface): 외부 서비스와 통합하거나 데이터를 공유하기 위해 API를 사용합니다. RESTful API, GraphQL 등 다양한 형태의 API를 활용하여 데이터와 서비스를 연결할 수 있습니다.

이러한 기술 언어는 HTML과 함께 사용하여 웹 및 모바일 애플리케이션을 개발하고 향상시키는 데 필요합니다. 웹 개발은 다양한 기술을 조합하여 원하는 기능을 구현하고 사용자 경험을 향상시키는 과정입니다.

참고로 HTML을 활용하는데 필요한 주요 HTML 태그의 개수는 약 100개입니다 :D

Part Two, HTML 관련 기초 용어 정리

My dog is very cute.

▶앞 를 부르는 용어 : 시작 태그(opening tag)

▶ 끝 를 부르는 용어 : 끝 태그(close tag)

▶ 가운데 텍스트를 부르는 용어 Your dog is very cute : 콘텐츠(content )
▶ 전체를 부르는 용어 My dog is very cute. : 요소(element , tag)

여는 태그 (Opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다. 이 예제에서는 문단이 시작되는 위치를 나타냅니다.

닫는 태그 (Closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다. 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.

콘텐츠 (Content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.

요소 (Element, tag): 요소는 여는 태그와 닫는 태그, 그리고 콘텐츠로 이루어집니다.

이 코드는 "Your dog is very cute."라는 문장을 단락으로 묶어서 웹 페이지에 표시하는 데 사용됩니다. 웹 브라우저에서 이 코드를 렌더링하면 "Your dog is very cute."라는 문장이 단락으로 웹페이지에 표시됩니다.

▶"Your dog is very cute" 문장 단락 웹페이지 표시 방법

1. 메모장을 열어 위 텍스트 My dog is very cute. 컨트롤+C&V 복사/붙여넣기하기

2. test.html 이름으로 바탕화면에 저장

3. test.html 더블클릭하여 실행해보기

Part Three, 테스트 환경 구축하여 HTML Tag(요소) 실습 해보기

1. Microsoft Visual Studio Code 설치하기

- Download Link : https://code.visualstudio.com/sha/download?build=stable&os=win32-x64-user

2. Visual Studio Code 실행하기

3. 키보드에서 Ctrl+Shift +X 누르기 OR 상단 메뉴 View안에 Extentions 클릭

4. 검색란에 open in browser Tech ER 검색하고 설치하기

5. 키보드에서 Ctrl+Shift+E 누르기

6. 왼쪽 상단 open folder 클릭

7. 바탕화면에서 마우스 우클릭 후 새폴더 생성 후 폴더 이름 "HTML" 이름으로 변경

8. HTML 폴더 선택 후 폴더 선택 버튼 클릭

9. 키보드에서 Ctrl+Alt+window+N 누르기

10.Test.html 파일이름 입력 후 엔터 2번

11.키보드에서 Shift+1 누르고 엔터

HTML 실습 준비 완료 화면 ▼

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

12. <body> </body>사이에 Hello New World, Your dog is very cute." 입력 후 키보드에서 Alt+B 누르기 ▼

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

Hello New World, Your dog is very cute.

</body>

</html>

13 웹페이지 출력 결과, HTML 마크업 언어 학습 환경 구축이 완료 ▼

Part Four, HTML 요소(태그) 안의 속성 값이 있다?

▶ HTML 요소의 여러가지 응용 활용 형태의 속성값은 인식만 해두기 구체적인 사용 방법은 나중에 개별 과목에서 상세하게 학습 및 정리하고 우선 여기서는 이런 것도 있구나하고 넘어가자

<body>

Hello New World, Your dog is very cute.

</body>

HTML 클래스(class) 속성은 HTML 요소에 대한 식별자(identifier)를 지정하는 데 사용됩니다. 이 식별자는 CSS(Cascading Style Sheets) 스타일 시트 또는 JavaScript 코드에서 특정 HTML 요소를 선택하고 스타일을 적용하거나 상호 작용하는 데 도움이 됩니다.

HTML 클래스 속성의 주요 특징과 개념은 다음과 같습니다:

클래스 속성 정의: 클래스 속성은 HTML 요소에 class 속성으로 정의됩니다. 이 속성은 요소에 하나 이상의 클래스 이름을 할당할 수 있습니다. 클래스 이름은 공백으로 구분됩니다.

<body>

이것은 클래스 예제입니다.

</body>

위의 예제에서 요소에 class 속성을 사용하여 "red-text"와 "bold" 두 개의 클래스 이름을 할당했습니다.
CSS 스타일 적용: 클래스 속성은 CSS 스타일 시트에서 클래스 선택자를 사용하여 특정 클래스에 스타일을 적용하는 데 사용됩니다. 클래스 선택자는 .으로 시작하며 클래스 이름을 지정합니다.

.red-text {

color: red;

}

.bold {

font-weight: bold;

}

위의 CSS 코드는 "red-text" 클래스에 빨간색 텍스트 색상을, "bold" 클래스에 글꼴 굵기를 적용합니다.
여러 클래스 적용: 하나의 HTML 요소에 여러 클래스를 적용할 수 있습니다. 이 경우 공백으로 구분하여 클래스 이름을 나열합니다. 요소는 나열된 모든 클래스의 스타일을 상속하게 됩니다.

<body>

이것은 여러 클래스를 가진 예제입니다.

</body>

JavaScript와 상호 작용: JavaScript 코드에서 클래스 속성을 사용하여 특정 HTML 요소를 선택하고 조작할 수 있습니다. 이를 통해 이벤트 처리, 동적 콘텐츠 변경 등 다양한 기능을 구현할 수 있습니다.

// JavaScript로 클래스 이름이 "red-text"인 요소를 선택

const redTextElements = document.querySelectorAll('.red-text');

// 선택한 요소에 이벤트 처리 또는 스타일 변경 등을 적용

클래스 속성은 웹 페이지의 스타일링과 상호 작용에 중요한 역할을 합니다. 웹 개발자들은 클래스를 적절히 활용하여 HTML 요소를 선택하고 원하는 스타일과 동작을 부여할 수 있습니다.

Part Five, HTML 요소 중첩

'자유의 꿈 나침판' 카테고리의 다른 글

감성을 자극하는 프랑스의 마법, 파리를 만나다. 소개, 에펠탑 아래에서 로맨틱한 순간, 미술의 보고: 루브르 박물관과 오르세 미술관, 골목길에서 맛보는 프랑스 요리, 결론 (1)	2023.10.21
최고의 자연 경치와 모험의 땅, 뉴질랜드를 탐험하다, 소개, 자연의 낙원 풍경의 아름다움, 모험의 성지 야외 활동, 문화와 역사의 조망 마오리 부시, 결론 (0)	2023.10.21
한국 영화의 마법 탐구: 세계적인 한국 영화 추천 (0)	2023.10.20
어느 유명 소설가인 어르신들의 소름 돋는 공부 방식 (0)	2023.10.03
학습과 습득을 이해하면 공부 효율이 1+1 (0)	2023.10.02

Life Unscripted

HTML 기초~고급 핵심 정리까지 블로그 한페이지로 끝내기