HTML – 모바일 지원

이번 시간에는 여러분이 만든 웹페이지가 작은 화면에 가지고 있는 스마트폰이나 태블릿과 같은 곳에서도 볼만하게 잘 표현될 수 있게 하는 방법을 살펴보겠습니다 아주 쉽습니다

저는 웹 페이지가 하나 필요해요 뭐 정보들이 어느 정도 들어 있는 그래서 여러분이 어떠한 웹 페이지를 사용해도 상관없지만, 우리는 기본적인 코드가 필요하니까 제가 지금까지 수업을 진행하면서 사용했던 파일 중에 indexhtml이라는 파일 안에 있는 내용들을 그대로 mobilehtml이라는 파일을 새로 만들어서 거기에 붙여넣기를 했습니다 물론 여러분들은 이 코드와 똑같을 필요는 없습니다

만약 똑같은 코드가 필요하신데 뭔지 모르겠다 그러면, 제가 만든 수업에서 웹사이트 만들기라는 항목에 예제 indexhtml라고 웹을 통해서 공유한 이 코드를 Copy해서 mobilehtml 파일을 만드시면 됩니다 자 그 다음에 이 파일을 제가 한번 열어보면 이렇게 생겼습니다 즉 데스크탑 브라우저에서 열었을 때는 이렇게 생겼는데 이것을 모바일 브라우저에서 열면 어떻게 생겼는지를 확인해야되는데 우리는 지금 웹 서버에 대해 잘 모르는 상태에서 하고 있잖아요

즉, 자신의 컴퓨터에 설치되어 있는 웹 브라우저를 통해 보고 있기 때문에 여러분들의 스마트폰으로 여러분들이 만든 웹사이트를 볼 수 없단 말이에요 자 그런 경우에 이렇게 하시면 됩니다 일단 크롬브라우저를 설치하시고 이 화면에서 오른쪽 클릭을 하면 '검사'라고 하는 게 나오거든요 선택하시면 밑에서 뭐가 툭 튀어나옵니다 그리고 그 중에서 스마트폰 비슷하게 생긴 저런 아이콘 있죠 저 아이콘을 클릭하거나 여기 적혀있는 것처럼 Ctrl+Shift+M키를 윈도우에서 누르면 (맥이면 cmd+shift+m이 아닐까 싶은데 모르겠어요, 고거는) 이렇게 생긴 화면이 뜹니다 그럼 이 화면이 뭐냐면 제가 이전 시간에 설명드린 적이 있긴 하지만 모바일로 봤을 때 이런 모습으로 보여진다는 화면입니다

그래서 제가 아이폰6를 선택했는데 아이폰6에서는 이렇게 보인다 라는 것이고 딱 보기에도 굉장히 글씨가 작기 때문에 그래서 사용자들은 더블탭을 해서 화면을 확대해서 보게 되는데 이런 경우에 웹 페이지의 크기가 화면의 크기에 딱 맞춰지면 좋겠죠 다시 말해서 데스크탑이면 화면을 넓게 쓸것이고 스마트폰이면 화면을 좁게 쓸 것 아니에요? 그것을 브라우저가 알아서 처리할 수 있게 하는 방법을 배워보도록 하겠습니다 코드를 열고 이곳에 meta라고 하는 태그를 추가하겠습니다 그리고 name으로 "viewport"라고 하는 내용을 지정합니다 그 다음에 content는 width는 폭이라는 뜻이고 device는 장치라는 뜻이고 화면에 폭을 디바이스의 폭만큼 지정해라는 그런 의미의 meta태그 입니다 다시 ReLoad를 해볼께요 아까보다는 화면에 훨씬 보기 좋게 표시되는 것을 보실 수 있습니다

여기다 하나만 더 추가하면 더 좋아요 뭐냐면 , initial-scale을 10으로 하게되면 지금은 큰 차이가 없지만 이 것은 모바일에서 웹사이트를 볼 때는 화면을 키우고 줄이고 하는 것을 줌이라고 하는데 바로 그 줌을 10 즉, 화면을 확대하지도 않고 축소하지도 않은 상태로 페이지를 시작해라 라는 그런 뜻입니다 뭐 여러가지 복잡한 테크닉들은 지금 우리가 보고 있는 맥락에서는 CSS와 같은 디자인과 관련된 수업을 하고 있지 않기 때문에 그런 복잡한 테크닉을 여기서 다루진 않지만 여러분이 웹페이지만을 만든다고 하더라도 모바일에도 적당하게 만들 필요가 있잖아요? 그런 경우에 html 태그중에 meta태그에 name값을 viewport라고 주고 이렇게 지정을 하면 웹브라우저는 여기에 설정되어 있는 것에 따라서 화면의 크기를 각 디바이스에 최적화된 크기로 표현을 해줘서 보기좋은 형태로 화면을 표시해줄 수 있게 된다 라는 것만 여러분들이 아시고 기계적으로 이 코드를 넣는다 라고 생각하시면 됩니다 그렇게 코드를 넣게 되면 데스크탑에서는 어떻게 보이는지를 또 봐야겠죠? 데스크탑에서는 원래 보이던 것과 똑같이 보여요 다만 화면의 크기가 작은 디바이스에서 최적화되서 보여지는 것이기 때문에 기계적으로 저 코드를 넣으시면 됩니다

아시겠죠?

Responsive Portfolio Grid CSS Website Layout (PART 2)

이봐 요, 픽셀! 이 반응 형 포트폴리오 웹 사이트 자습서의 제 2 부로 돌아가십시오 이 비디오에서는 이렇게 반응이 좋은 깨끗한 현대 한 페이지 포트폴리오를 코딩하는 방법을 보여 드리겠습니다

웹 개발의 최신 기술을 사용하는 웹 사이트 Flexbox 및 CSS Grid는 전세계 웹 개발자를위한 게임을 변화 시켰습니다 이전과는 다른 복잡한 레이아웃을 코드 작성하기가 훨씬 쉬워졌습니다 오늘날 세계에 존재하는 스크린 따라서 더 이상 지체하지 않고 시작하십시오! 이 웹 사이트에서는 배경 도형, 세로 사진을 내보낼 것입니다

소셜 미디어 아이콘은 웹 사이트의 이미지 폴더에 저장됩니다 먼저, 배경 도형을 클릭하고 파일> 내보내기> 선택으로 이동하십시오 형식이 PNG로 설정되고 "내보내기 대상"이 "웹"으로 설정되어 있는지 확인하십시오 세로 사진을 내보내려면 동일한 작업을 수행하십시오 SVG 버전의 소셜 미디어 아이콘도 내보낼 예정입니다

모든 아이콘을 선택하십시오 (쉽게 선택하려면 그룹을 해제해야 할 수도 있음) 그런 다음 파일로 이동하십시오 > 내보내기> 이미지 폴더로 내보내기를 선택했습니다 형식이 SVG 임베드인지 확인하고 "파일 크기 최적화 (축소)"를 선택하십시오 이제 모든 자산이 웹 사이트의 이미지 폴더로 내보내 졌으므로 점프 할 수 있습니다

바로 코딩으로 먼저 클래스 이름이 "container"인 div를 생성합니다 이 div 내에서 우리는 다음과 같은 클래스로 세 개의 div를 추가로 만들 것입니다 : sidebar, 내용, 꼬리말 사이드 바 div 내에서 nav 태그를 사용하고 정렬되지 않은 목록을 만듭니다 메뉴 링크

이 시리즈의 Part 1에서이 메뉴를 디자인했음을 상기하자 이제 코드를 작성 했으므로 주요 컨텐츠 영역을 코딩 할 수 있습니다 콘텐츠 div에는 클래스 이름이 "hero"인 섹션이 포함되어 있습니다 이 섹션에서는 img 태그를 사용하여 인물 사진에 연결합니다 img 태그 아래에 "hero-content"클래스로 div를 생성 할 것입니다

이 div 내에서 h1 태그와 단락 태그를 사용하여 영웅 제목을 추가합니다 그리고 blurb 마지막으로 앵커 태그를 사용하여 "Hire Me"버튼을 만듭니다 클래스 이름을 "action-btn"으로 지정하고 앵커 텍스트로 "Hire me"라고 씁니다 마지막으로 우리는 바닥 글 영역을 코딩 할 것입니다

바닥 글 div 내에서 바닥 글 태그를 사용하여 순서가 지정되지 않은 목록은 우리의 소셜 미디어 아이콘이 될 것입니다 이를 위해 정렬되지 않은 목록 태그, 목록 태그, 앵커 태그 및 그런 다음 앵커 태그 내에서 단락 태그를 추가하여 소셜 미디어 통계 Command 또는 CTRL + D를 눌러 네 개의 소셜 사회에 대해이 코드 줄을 네 번 복제합니다 미디어 아이콘 그런 다음 이미지 폴더를 열고 svg 아이콘을 선택하고 svg 코드를 복사 한 다음 그런 다음 첫 번째 목록 항목 내에 붙여 넣으십시오

다른 목록 항목에 대해서도이 작업을 반복하십시오 그것이 HTML을위한 모든 것입니다 이제 CSS 파일을 스타일링하기 위해 머리를 숙일 시간입니다 응답 성이 뛰어난 한 페이지 포트폴리오 포트폴리오 웹 사이트의 스타일을 지정하기 위해 최신 웹 개발 : Flexbox 및 CSS Grid 모바일 우선 코딩을 시작한 다음 미디어를 사용한다는 점에 유의해야합니다

큰 화면 크기를 위해 디자인 할 쿼리 시작하겠습니다 알다시피 "Nunito"라는 Google 글꼴을 이미 가져 왔습니다 스타일 300, 400 및 700 또한 Nunito를 글꼴 패밀리로 선언하고 제공함으로써 사이트의 본문을 스타일링했습니다 그것은 우아한 배경

위로 HTML 파일에서 우리는 주요 레이아웃 영역의 구조를 설정했습니다 내용 영역, 세로 막대 영역 및 바닥 글 영역이 있습니다 이제 우리는 CSS 격자를 사용하여 "격자 영역"속성을 사용하여이 영역의 이름을 지정합니다 우리는 배경 도형, 그라데이션 및 색상을 추가 할 예정입니다 1을이 레이아웃 영역에 추가합니다

그라디언트를 허용하는 선형 그래디언트 속성에서 "오른쪽으로"추가했습니다 작은 화면에서 볼 때 오른쪽에서 왼쪽으로 시작합니다 사이드 바, 내용 및 바닥 글이 포함 된 컨테이너 div를 선택합니다 글꼴 크기를 15em, 너비를 100 %, 높이를 100vh로 설정하여 브라우저 창의 전체 높이를 올리십시오

CSS 그리드 레이아웃을 만들려면 display : grid 선언을 사용하기 만하면됩니다 또한 우리는 그리드 템플릿 영역의 이름을 지정하려고합니다 여기에는 사이드 바, 컨텐츠 및 보행인 그리드 템플릿 열을 1fr로 설정하고 세 개의 그리드 템플릿 행을 130px로 크기를 조정합니다 800px 및 250px 마지막으로 세 개의 템플릿 영역을 모두 선택하고 패딩을 1em으로 설정합니다

이제 우리는 일반적인 포트폴리오 요소에 스타일을 적용 할 것입니다 사이드 바에서 메뉴 항목의 스타일을 지정하려면 nav ul을 선택하고 여백을 제거합니다 그리고 padding을 사용하고, flexbox를 사용하여 nav 메뉴 항목을 쉽게 응답하게 만듭니다 display : flex 선언을 사용합니다 다음 코드 행에서는 탐색 목록 항목과 앵커의 스타일을 제거하여 목록 항목 글 머리 기호, 채우기, 링크 색상 및 기타 글꼴 스타일 조정 이 시리즈의 파트 1에서 우리의 디자인 실물 모형과 유사합니다

또한 3s 전환을 추가하고 호버 불투명도를 1로 설정하여 링크가 맴돌 았고 흰색으로 바뀌고 그렇지 않을 때는 불투명합니다 또한 주요 콘텐츠로 구성된 주요 콘텐츠 요소의 스타일을 지정합니다 섹션, 영웅 텍스트 영역 및 영웅 이미지 영웅 이미지 너비를 200 픽셀로 설정하고 글꼴 크기와 글꼴 두께 및 색상을 적용합니다

그에 따라 텍스트 마지막으로 "action-btn"이라는 클래스 이름을 부여한 클릭 유도 문안 버튼의 스타일을 지정합니다 우리 html로, 글꼴, 패딩, 테두리 반경 및 색상을 지정하여 앵커를 설정하십시오 대담한 "Hire me"버튼으로 연결하십시오 0

3 초의 전환을 추가하여 그림자가 생기게합니다 마우스를 올리면 단추 뒤에 나타납니다 이제 포트폴리오 웹 사이트의 바닥 글 섹션에 스타일을 적용 할 수 있습니다 이것은 우리의 소셜 미디어 아이콘과 통계가 살아있는 곳입니다 보시다시피 nav와 마찬가지로 flexbox를 사용하여 소셜 미디어 아이콘을 만듭니다 반응 형

svg 태그를 선택하고 소셜 미디어 svg의 너비를 40 %로 조정하십시오 앞에서 언급했듯이 위의 스타일은 모바일 우선이므로 우리는 이제 미디어 쿼리를 사용하여 웹 사이트가 더 큰 브라우저 창에서 어떻게 보이는지 수정하십시오 브라우저의 최소 너비가 1040 픽셀 일 때의 미디어 쿼리를 작성해 보겠습니다 먼저 웹 사이트 컨테이너를 선택하고 그리드 템플릿 영역을 선언하십시오 대형 화면에서는 사이드 바가 내용 격자 및 바닥 글 격자 영역 옆에 있습니다

두 개의 그리드 템플릿 열은 300px 1fr과 두 개의 그리드 템플릿 행으로 설정됩니다 1fr auto로 설정됩니다 다음 코드 행에서는 다른 요소 (예 : nav, 영웅 텍스트 및 바닥 글 소셜 아이콘 nav ul에 대해서는 flex-direction을 column으로 변경하고 제거했습니다 선형 그라데이션 속성에서 "오른쪽에서"오른쪽으로 시작하여 위에서 아래로 시작합니다

포트폴리오 이미지의 플로트를 오른쪽으로 변경하고 footer ul을 960px로 변경하고 svg의 너비를 20 %로 줄였습니다 이것이 최신 웹 개발을 사용하여 반응이 빠른 한 페이지 포트폴리오 웹 사이트를 코딩하는 방법입니다 기술, CSS 그리드 및 Flexbox XO PIXEL에 가입하면 이처럼 더 훌륭한 디자인, 코드 및 기술 비디오를 얻을 수 있습니다 마음에 드시면이 비디오에 큰 점수를주십시오

보고 주셔서 감사합니다 다음 동영상에서 보겠습니다

HTML Full Course – Build a Website Tutorial

안녕하세요, CAD 초안에 오신 것을 환영합니다 내 이름은 마이크입니다

이 강의에서는 시작하기 위해 알아야 할 모든 것을 다룰 것입니다 HTML 작성 HTML은 하이퍼 텍스트를 의미합니다 마크 업 언어 및 기본적으로 웹 페이지를 만드는 데 사용할 수있는 언어입니다 그래서 인터넷에가 본 적이 있다면 인터넷상의 거의 모든 단일 페이지가 HTML이라는이 언어로 작성되었습니다 HTML에서는 일련의 HTML 태그를 정의 할 수 있습니다 귀하의 웹 사이트의 레이아웃과 모양 및 느낌을 정의합니다 따라서 HTML 태그가 무엇인지 알 수 있고 HTML 태그를 넣을 위치와 함께 사용하는 방법을 배울 수 있다면 그런 다음 자신 만의 웹 사이트를 만들 수 있습니다

실제로 사용자 정의 웹 사이트를 구축하는 것보다 훨씬 쉽습니다 사람들이 콘텐츠 관리 시스템처럼 사용하기 위해 달아나거나 웹 사이트 구축을 위해 프로그램을 사용하는 경우가 종종 있습니다 하지만 때로는 들어가서 손을 더럽 히고 처음부터 웹 사이트를 만드는 것이 재미있는 경우가 있습니다 그리고 당신은이 과정에서이 과정에서 어떻게하는지 배우게 될 것입니다 HTML 사용의 기본 사항을 다룰 것입니다

그래서 첫 수업부터 마지막 ​​수업까지 HTML을 작성하여 새 태그를 배우게되고 웹 페이지를 조작하여 새로운 방식으로 태그를 만들 수 있습니다 당신이 html로 원했던 방식을보고 느끼십시오 귀중한 기술입니다 당신의 이력서에 HTML 경험을 넣는 것조차 의미합니다 언젠가 직장을 구할 수 있도록 도울 수도 있고 멋진 친구처럼 자랑 할 수도있는 멋진 일이 될 수 있습니다

그대로 나는 때로는 사람들이 조금씩있을 수 있다고 생각한다 배우고 배우는 것이 너무 복잡해 보이기 때문에 HTML을 배우고 배우는 것이 힘들다 나는 그것이 정말로 실제로 당신에게 말하기 위해 여기에있다 배우기 쉬우 며 전과정 전체에 걸쳐 당신과 함께 할 것입니다 날 믿어 나는 잠시 동안 HTML을 알고 있었기 때문에 배우는 가치가있는 것이 무엇인지 알았고, 우리가 필요로하는 모든 것을 다룰 것입니다

우리는 중요한 모든 것에 대해 이야기 할 것입니다이 과정이 끝날 때까지, 당신은 진실하고 완전한 hTML을 사용하는 방법과 자신의 웹 사이트를 구축하는 방법에 대한 이해 이 튜토리얼에서는 텍스트 편집기를 선택하는 방법에 대해 이야기하고자합니다 HTML을 작성할 때마다 HTML이 이제 HTML 파일이라고 불리는 내부에 실제로 작성됩니다 이 파일은 텍스트 파일과 비슷하지만 점 대신에 파일입니다 Txt 또는 도트 할 CX 확장

우리는 점 HTML 확장자를 가지고 있습니다 그래서 HTML을 사용하면 기본적으로이 HTML 파일을 작성한 다음 웹 브라우저에서 해당 파일을 가져올 수 있습니다 웹 페이지로 표시하고 정말 멋진 것 중 일부입니다 html을 작성하는 첫 번째 단계는 이러한 HTML 파일을 작성하는 데 사용할 수있는 프로그램을 선택하는 것입니다 다양한 옵션이 있습니다

HTML 텍스트 편집기를 선택하려고 할 때 많은 시간이 걸리므로 다소 혼란 스러울 수 있습니다 너무 많은 옵션이 있고 너무 많은 사람들이 서로 다른 의견을 가지고 있기 때문에 조금이라도 압도적입니다 편집자 아시다시피,이 비디오에서 초보자가 할 수있는 가장 좋은 점은 무엇입니까? 나는 당신에게 당신의 선택권이 무엇인지에 대한 개요를주고 싶다 HTML 텍스트 편집기로 어디서부터 시작해야하는지에 관해서는 정말 간단한 텍스트 편집기 만 있으면됩니다 따라서 파일을 편집하고 다양한 형식으로 저장할 수있는 텍스트 편집기는 귀하와 일반적으로 HTML을 작성할 때 워드 프로세싱 프로그램처럼 사용하고 싶지는 않습니다

밖에 워드 프로세서가 많이 있습니다 Microsoft Word Google 문서 도구 LibreOffice 이것들은 큰 워드 프로세서 프로그램과 같습니다 과 이것은 일반적으로 사용하려는 것이 아닙니다 그래서 당신은 당신이 알고있는 Microsoft Word 안에서 당신의 HTML을 타이핑하고 싶지 않습니다 HTML을 실행할 때 잔인 함의 종류는 더 간단합니다

따라서 초보자를위한 많은 시간은 컴퓨터에있는 매우 간단한 텍스트 편집기를 사용하는 것이 좋습니다 Windows에서는 Mac에서 메모장이됩니다 TextEdit과 비슷하며 이것들은 단지 뼈입니다 간단한 텍스트 편집기와 그것은 실제로 필요한 것 이상으로 작성해야합니다 HTML과 마찬가지로 일반적으로 메모장이나 TextEdit 같은 간단한 HTML을 작성하는 초보자를위한 정말 HTML 작성에 집중해야하고 모든 단일 행을 입력하고 모든 것이 올바르게 형식화되어 있는지 확인해야합니다

궁극적으로, 그것은 당신이 정말로 기본을 이해하는 데 도움이 될 것입니다 하지만 메모장이나 TextEdit처럼 사용하고 싶지 않은 사람이라면 실제로 특별히 고안된 도구를 사용할 수 있습니다 프로그램과 인기있는 프로그램 중 일부에서 HTML을 작성하도록 특별히 고안된 이러한 프로그램이 많이 있습니다 원자 숭고라고 불리는 것이 있습니다 대괄호 txt 일반 webstorm

다른 회사에서 개발 한 여러 가지 프로그램이 있습니다 당신은 온라인으로 가서 많은 연구를 할 수 있습니다 본질적으로 이것들은 여러분이 HTML을 작성할 수 있도록 특별히 고안된 프로그램입니다 그래서 그들은 HTML을 가지고 다르게 표시 할 것입니다 HTML을 좀 더 쉽게 작성할 수있는 부가 기능이나 다른 기능을 사용할 수있는 기능을 제공 할 수 있습니다

그러나 그에 대한 벌칙으로 그것들은 또한 사용하기에 조금 더 복잡하고 그래서 나는 초보자를 위해 일반적으로 적은 것을 좋아한다 복잡한 일이 더 좋습니다 따라서 무언가를 간단하게하는면에서 더 많은 것을 잘못하고 싶을 수도 있습니다 그런 다음 다른 프로그램 중 하나에 대한 HTML 이동을 배우게되면 무엇인가 차이가 나는 것을 보여주고 싶습니다 이들은 다음과 같이 보일 것이다

그래서 여기에 TextEdit이 있습니다 이것은 Mac의 텍스트 편집기와 같은 기본값입니다 그래서이 파일을 열면 여기에 파일이 있는데 이것은 실제로 HTML 파일입니다 그래서이 파일 안쪽에 나는 많은 HTML을 작성했으며, 이것은 당신이 볼 수있는 가장 간단한 HTML 문서와 같다 그러나 이것은 HTML을 작성하는 것이 이런 식으로 보일 것입니다

그래서 여기에 더 많은 HTML을 추가하고 싶다면 그냥 입력 할 수 있습니다 알다시피, 그것은 매우 간단합니다 아무 것도 구성 할 필요가 없습니다 당신의 HTML을 써주세요 그러나 더 복잡한 것은 이런 프로그램이 될 것입니다

이것은 아담이라고 불린다 그리고 이것은 제가 이야기하고있는 텍스트 편집기 중 하나입니다 그리고 이것은 당신이 당신을 조금 더 쉽게 알 수있게합니다 HTML 형식을 약간 다르게 설정 한 것을 볼 수 있습니다 그래서 이것은 같은 코드입니다

그래서 여기,이 작은 꼬리표는 색깔입니다 여기가 색칠되어있어 그래서 일반적으로 색깔이 다른 프로그램이 있습니다 이렇게하면 다른 테마를 선택할 수 있으므로 내가 알 수 있습니다 이것의 느낌을 전체적으로 들여다 보도록하십시오

그래서 정말 멋진 옵션이 많이 있습니다 이와 같은 텍스트 편집기에서 사용할 수있는 구성 옵션 그러나 우리는 또한 HTML을 작성하는 것을 이해해야하며 이것은 기능적으로하는 것과 똑같은 일을합니다 이것들은 같은 것이다 그들은 단지 당신이 알고 있습니다, 그것은 우리가 HTML을 작성하는 환경입니다 그래서 여기에 당신에게 추천합니다 나는 확실히 추천 할 것이고 많은 사람들은 이것을 이와 같은 간단한 텍스트 편집기로 시작하는 것을 추천한다

반드시 그럴 필요는 없다 TextEdit하지만 단순하고 전체적인 아이디어 일 수 있습니다 HTML을 처음 배울 때 더 간단할까요? 다른 것들을 구성하거나 무거운 텍스트 편집기로 작업하는 것에 대해 걱정할 필요가 없습니다 당신은 가볍고 간단한 것을 사용하는 것을 압니다 TextEdit은 HTML에 집중할 수있게 해줄 것이며 HTML 작성에 대한 이해를 갖게됩니다

그리고 당신은 정말로 편안하게 느끼고 있습니다 그런 다음 지금 당장이 프로그램으로 이동할 수 있습니다 이것은 분명히 제 추천입니다 너는 내 말을들을 필요가 없다 그리고 이런 프로그램을 선택하고 싶다면 확실히 당신의 연구는 몇 가지 다른 프로그램을 시도해보십시오 당신을 위해 맞는 하나를 참조하십시오 이 텍스트 편집기가 최고라고 말하는 것처럼 온라인에서 많은 사람들이 듣게 될 것입니다

사람들은 항상 그런 것들에 대해 거의 싸움을하지 않습니다 하지만 최고의 텍스트 편집기는 당신에게 맞는 텍스트 편집기입니다 그래서 가장 즐겁게 즐기는 것이죠 다른 사람들이 말하는 것에 너무 귀를 기울이지 마라 선택하는 가장 좋은 방법은 다양한 텍스트 편집기를 사용하는 것입니다

이 과정을 수강하면됩니다 심지어 당신은 다른 것들을 시도해 볼 수 있으며 각각의 것을 어떻게 사용 하는지를 볼 수 있습니다 그러나 초심자를 위해 다시 간단한 hTML을 시작하는 것이 좋습니다 정말 간단한 언어입니다 그래서이 모든 것들과 마찬가지로 플러그인 및 추가 기능과 테마는 웹 개발 및 일반 프로그래밍으로 인해 더 좋아집니다

보통 더 간단하고 더 직설적 인 것이 더 낫습니다 이 튜토리얼에서는 첫 번째 HTML 파일을 만드는 방법에 대해 이야기하고자합니다 HTML 파일을 만드는 방법을 보여 드리겠습니다 웹 브라우저에서 어떻게 HTML 파일을 볼 수 있는지 보여 드리겠습니다 그러면 웹 브라우저에서 HTML 파일을 볼 수있는 방법을 보여 드리겠습니다

HTML 파일을 기본 HTML 코드와 함께 사용하면 제대로 작동합니다 그래서 내가 할 일은 프로젝트를위한 폴더를 만드는 것입니다 그래서 나는 여기에 내 웹 사이트에 대한 내 HTML 파일을 넣을 수있는 폴더를 만들거야 파일 탐색기 난 그냥 새 폴더를 만들거야 그리고 나 지금 이걸 부를거야 GA는 Khadem e 초안 초안 사이트 및 그럼 지금 우리가 할 수있는 일은 내 텍스트 편집기 안에이 폴더를 열어서 여기에 올거야

이 프로젝트 폴더 이제이 폴더 안에 새 파일을 만들겠습니다 그러면 새 파일을 말하고 바로이 파일을 색인 도트 HTML 이제이 파일 인덱스의 HTML을 명명하는 이유는 일반적으로 첫 번째 웹 페이지를 만들 때입니다 당신은 그것의 이름을 색인 도트 HTML로하고 싶다 HTML은 우리가 사용할 수있는 특수한 파일 이름이고, 파일 이름은 indexhtml입니다

폴더의 루트 디렉토리에 있습니다 그런 다음 웹 브라우저는 웹 사이트의 홈 페이지라고 생각합니다 따라서 이와 같은 웹 페이지를 만드는 경우 인덱스라는 이름을 HTML에 지정하는 것이 좋습니다 하지만 정말로 당신이 원하는대로 이름을 지을 수 있습니다 나는 내 이름을 지을거야

indexhtml 및 이제 HTML 파일을 열어 보겠습니다 그래서 이것은 실제로 우리가 웹 브라우저에서 사용하고 볼 수있는 파일 그래서 내가 여기 와서 hello world를 타이핑하면 실제로이 파일을 가져 와서 웹 브라우저에서 열어 보겠습니다 그래서 저는 열어서 열기를 클릭하고 웹 브라우저에서 열어 보겠습니다 Google 크롬으로 열어 보겠습니다

이제 어떤 일이 일어나고이 파일이 웹 브라우저에서 열리고 보일 것입니다 우리는 본문을 가지고 있습니다 그래서 이것은 가장 단순한 것과 같습니다 가장 순수한 형태의 HTML로 HTML 파일 내부에 일부 베어 본 (bare-bones) 텍스트를 타이핑하는 것입니다 여기에 화면에 표시됩니다

그러나 공식 파일과 같은 HTML 파일을 원한다면 제대로 구성됩니다 우리는 실제로 약간의 여분을 추가해야 할 것입니다 여기서 코드를 작성하면이 문제를 해결할 수 있으며 HTML 태그라는 것을 만들 것입니다 이제 hTML은 다음을 정의하는 데 사용되는 언어입니다 웹 페이지 레이아웃 및 레이아웃 정의 가능 태그라는 것을 사용하여 일련의 태그를 만들 수 있으며 태그는 기본적으로 내 웹 브라우저에 알려줍니다

내 웹 사이트를 어떻게 보이게하고 내 웹 사이트에 어떤 콘텐츠를 갖길 원하십니까? 그래서 일종의 HTML 파일 작성을 시작하십시오 우리는 기본적인 것을 만들어야합니다 HTML 태그의 뼈대와 이것들은 모든 HTML 파일이 가질 표준 태그 일 뿐이며 기본적으로 우리 브라우저를 제공 할 것입니다 우리 파일에있는 내용에 대한 다른 정보는 여기에 있습니다 내가 만들고자하는 첫 번째 태그가 호출됩니다 doctype과 기본적으로이 파일의 문서 유형이 무엇인지 정의하고 우리는 HTML 파일을 만들 것입니다

그래서 느낌표를 써야 겠어 똑같이 타이프 e 대문자를 본 다음 HTML을 말하고 싶습니다 이 태그는 기본적으로 내 웹 브라우저에 알려줍니다 이 문서의 유형은 다음과 같습니다 HTML이므로 HTML 문서이며 여기 아래로

컨테이너 태그라는 것을 만들 수 있습니다 이 태그는 하나의 태그입니다 이 태그 중 하나만 필요하지만 HTML 컨테이너 태그라고하는 많은 태그가 있으며 기본적으로 두 개의 태그가 있음을 의미합니다 따라서 시작 태그가 있고 종료 태그가 있고 그 안에 다른 태그를 넣을 수 있습니다 그래서 그들은 콘텐츠 나 다른 HTML 태그를위한 컨테이너 역할을합니다

그리고 우리가 만들 첫 번째 것은 HTML 태그라고하기 때문에 서명하지 않을 것입니다 HTML 및 더 큰 부호 및 지금 나는이 꼬리표를 닫을 수있다 그래서 이것이 시작 태그이고, 끝 태그를 만들고 싶습니다 그래서 나는 그것을 여기에서 만들 예정이다 Tagg을 만드는 방법은 시작 태그의 이름을 취하는 것입니다 기본적으로 앞에 슬래시를 넣은 다음 시작 태그의 이름을 입력합니다

그래서 이것은 이제 한 쌍의 태그이고 당신은 관계를 올바르게 볼 수 있습니까? 그래서 여기 시작 태그가 있습니다 그래서 hTML이이 태그의 이름이고, 이것이 HTML 태그이고 이것이 종료 태그라고 말할 수 있습니다 따라서 같은 이름을 사용하지만이 슬래시 그래서 슬래시는 이것이 종료 태그임을 나타 내기 위해 사용되며이 HTML 태그는 가지고있는 HTML 파일에 필요할 것입니다 이것은 기본적으로 웹 사이트의 최상위 태그와 같습니다

웹 사이트의 전체 컨테이너 태그와 같습니다 그래서 모든 HTML 코드와 HTML 태그가 여기에 들어갑니다 이제는 만들 필요가있는 두 세트의 태그가 있습니다 첫 번째 집합을 head 태그라고하고 두 번째 집합을 body 태그라고합니다 따라서 모든 HTML 파일에는 두 가지 기본 섹션이 있습니다

문서의 머리 부분이 있고 문서의 본문과 문서의 머리 부분이 있습니다 문서에 대한 데이터를 정의하므로 문서의 제목과 같은 것을 정의 할 수 있습니다 설명을 제공 할 수 있습니다 문서와 관련된 다른 속성을 문서와 관련된 이미지처럼 정의 할 수 있습니다 또한 머리를 사용하여 필요한 모든 리소스를 HTML 파일로 가져올 수 있습니다

나중에이 HTML 파일을 다른 유형의 파일에 연결할 수 있다는 것을 알게 될 것입니다 머리 속에서 우리는 그 모든 것을 할 수 있습니다 그래서 머리는 HTML 파일의 설정과 비슷합니다 그것은 명령 센터와 같습니다 이것은 실제 파일에 대한 메타 데이터와 비슷합니다

헤드 태그를 만들어 머리를 만들 수 있습니다 그래서 우리가 머리를 써야 할 것보다 작을 것입니다 이제이 태그를 닫을 수 있습니다 그 것처럼 이제 body 태그를 만들겠습니다 body 태그는 HTML 페이지의 고기와 뼈처럼 넣을 곳입니다

그래서 body 태그는 우리의 모든 HTML 컨텐트가 갈 곳입니다 일반적으로 몸은 머리보다 훨씬 커야합니다 시체는 실제로 웹 페이지의 모든 콘텐츠를 넣는 곳이 될 것입니다 몸에있는 것이 대부분 나타나거나 적어도 브라우저에서 렌더링 될 것입니다 여기 아래로 나는이 시체 꼬리표를 만들거야

그래서 나는 시체를 말하고 다른 닫는 태그를 만들거야 Body와 그래서 나는이 모든 다른 태그들을 정의하고있다 그리고이 파일을 웹 브라우저에서 열면 웹 브라우저는이 모든 태그를 살펴보고 알아낼 수 있습니다 페이지에 관한 정보 그래서 웹 브라우저는 실제로이 모든 다른 태그들을 파싱하는 것을 좋아할 수 있습니다 정의 할 수 있도록 모든 정보 표시 정보 및 태그를 사용하여 해당 정보를 정의하고 해당 정보를 다른 방식으로 배치하는 데 도움을 주며 웹 브라우저는 기본적으로 모든 정보를 파싱 할 수 있습니다

이를 해독하여 웹 사이트를 구축하십시오 정말 멋집니다 이제 제가 지적하고자하는 한 가지 방법은 제가 모든 것을 포맷하는 것입니다 그래서 당신은 내가 여기에있는 HTML 태그와 이러한 HTML 태그 내부 나는이 머리 꼬리표를 가지고 있고, 나는이 꼬리표를 가지고있다

그래서 나는이 모든 태그들 사이의 관계를 지적하고 싶다 그리고 저는 여러분에게 몇몇 용어를 소개 할 것입니다 가장 먼저 주목해야 할 것은 헤드 태그를 들여 쓰고 있다는 것입니다 그리고 body 태그를 들여 쓰기 때문에 여기에 몇 개의 공백이 있음을 볼 수 있습니다 이것은 기본적으로 탭이며 일반적으로 HTML을 작성할 때 모든 파일을 들여 쓰시겠습니까? 들여 쓰기 규칙은 기본적으로 우리가이 컨테이너를 가지고있는 것과 같습니다

맞습니까? 그래서이 HTML 태그와이 HTML 태그가 여기에 있습니다 우리는 몸에 머리가있다 그래서 다른 태그 안에 들어있는 모든 태그를 들여 쓰고 싶습니다 이 머리 태그는이 HTML 태그 안에 있으므로 머리 글자와 동일한 것을 들여 쓰고 있습니다 나는 들여 쓰기를하고 있는데 그것은 기본적으로 시각적으로 태그 간의 관계를 해독하는 데 도움이됩니다

이러한 태그와의 관계 및이를 수행하는 가장 일반적인 방법 중 하나는 다음과 같습니다 가족 용어 따라서이 HTML 태그를이 헤드 태그의 부모로 참조합니다 이 body 태그는 body 태그이므로 body 태그는 HTML 태그의 하위 태그입니다 따라서 HTML 개발자와 같이 이야기하는 경우가 많다면 용어를 사용하게 될 것입니다 그들은 헤드 태그가 HTML 태그의 자식이라고 말할 것입니다

그래서 당신에게 요청할 수 있습니다 이 body 태그의 부모는 무엇이며 body 태그가? HTML 태그 안에는 head 태그와 body 태그를 형제로 정의 할 수도 있습니다 따라서 이들 태그는 형제 태그이므로 동일한 부모를 공유하므로 관계를 이해할 수 있습니다 그래서 만약 내가 여기에 또 다른 태그 안에 일련의 태그를 만들려고한다면 단락처럼 만들 수 있습니다 실제로, 당신은 그것을 머리에 넣기를 원할 것입니다

우리는 그것을 몸에 넣고 싶다 따라서 단락 태그를 만들 수 있으며 단락 태그에 대해 너무 걱정하지 않아도됩니다 하지만 이것은 단락 태그는이 HTML 태그의 손자가됩니다 그리고이 몸체 태그의 자식이 될 것입니다 이 말은 여러분이 많이 들으려는 용어와 비슷합니다

일반적으로 우리는 이것을 정의하고 있습니다 세대 별 구문의 관점에서 HTML 태그를 사용하므로 부모님이 조부모님에게 중요한 점이 있습니다 이제 우리는이 기본 HTML 뼈대를 배치했습니다 우리는 본질적으로 우리가 필요로하는 모든 것을 갖추고 있습니다 이 웹 사이트와 내가 새로 고칠 수 있도록 아니면이 페이지를 저장할 수 있습니다

실제로 브라우저로 향하게됩니다 이제이 페이지를 새로 고치면 아무 일도 일어나지 않습니다 그래서 이것은 완전히 비어 있습니다 HTML 문서는 우리가 쓸 수있는 가장 간단한 HTML 문서와 같습니다 그래서 나는 당신이 사용할 수있는 태그를 하나 더 보여줄 것입니다

이것을 제목 태그라고합니다 그래서 여기에 문서의 머리 부분에 제목이라는 또 다른 태그를 만들겠습니다 이 태그 여기에 정보를 넣을거야 그래서 일반적으로 HTML 태그가있을 때 특정 태그는 컨테이너를 의미합니다

예를 들어,이 HTML 태그 세트는 컨테이너입니다 기본적으로 다른 태그를 보유하는 데 사용되지만 특정 태그는 내용을 담는 데 사용됩니다 따라서이 제목 태그는 텍스트를 담는 데 사용되므로 이러한 제목 태그의 내부에 있습니다 우리는 텍스트를 넣고 싶습니다 그리고 이것은 내 웹 사이트의 제목이 될 것입니다 그래서 저는 마이크의 말처럼 말할 수 있습니다

웹 사이트 및 이것은 이제 우리 웹 사이트의 공식 제목이 될 것이며, 웹 브라우저를 방문하면 이 탭에서 여기를보십시오 여기서 제목을 볼 수 있습니다 Indexhtml 그것이 파일의 이름입니다

하지만이 파일을 새로 고침하면 마이크의 웹 사이트가 업데이트된다는 것을 알 수 있습니다 그래서 이것은 브라우저의 좋은 예입니다 우리의 웹 사이트를 통해 구문 분석 하고이 제목 태그를 읽을 수있어 우리 웹 사이트의 제목이 무엇인지 알아 내십시오 그래서 이것들은 당신이 머리 속에 넣거나 제목 꼬리표를 넣을 수있는 종류의 꼬리표입니다 HTML 문서에 대한 정보를 정의하는 태그를 알고 있습니다 그리고 body 태그 안에 여기에 내 웹 페이지 안에 넣고 싶은 콘텐츠를 넣을 수 있습니다

그래서 나는 다음과 같이 넣을 수있다 안녕 세상 여기 아래로 이제 페이지를 새로 고침하면 웹 브라우저에 표시됩니다 그래서 당신의 웹 사이트에 내용을 쓰고 싶습니다 어떤 내용이든이 바디 태그 내부와이 코스의 나머지 부분을 통과하게 될 것입니다

우리는이 바디 태그 안에 넣을 수있는 모든 멋진 태그에 진지하게 들어갈 것입니다 HTML에는 이러한 멋진 태그가 너무 많으며 놀라운 태그를 사용하여 멋진 것들을 할 수 있습니다 우리 웹 브라우저의 내부 그래서 나는 당신이 주위에 끈기를 바란다 그리고 우리는 물건을 몸에 넣는 법을 배울 것이다

이 튜토리얼에서는 몇 가지 기본 HTML 태그 사용에 대해 이야기하고 싶습니다 그래서 우리는 가장 중요한 것을 보게 될 것입니다 귀하의 웹 사이트에서 사용하게 될 일반 HTML 태그와이를 사용하여 꽤 잘 보이는 사이트를 정의합니다 이 비디오가 끝날 때까지 HTML 내부에 많은 콘텐츠를 배치하는 방법에 대한 좋은 아이디어가 있습니다 브라우저에 표시하십시오

내가 보여주고 싶은 첫 번째 태그는 실제로 우리 문서의 머리 부분에 올라갈 것입니다 제목 바로 위에 여기에 넣을 것입니다 지금은 HTML 파일의 기본 골격을 가지고 있습니다 HTML 파일의 가장 단순한 버전과 비슷합니다 내가하고 싶은 한 가지는 메타 태그라고하는 메타 태그를 정의하는 것이며 메타 태그는 기본적으로 파일에 대한 정보를 정의하는 태그 그래서 그것은 우리에게 메타 데이터를 제공하므로이 부호를 사용하지 않고이 메타 태그를 정의 할 것입니다

그리고 기본적으로 이것을 사용하여 내 웹 페이지의 문자 인코딩을 정의합니다 그래서 이것은 기본적으로 웹 브라우저에이 문서의 내부에서 사용하고있는 문자의 유형을 말하고 있습니다 그래서 나는 말할 수 있습니다 문자 집합은이 따옴표와 동등합니다 그냥 말할거야

UTF – 8 그러면 내 문서의 문자 세트가 utf-8로 정의됩니다 정말 공통된 캐릭터 세트와 같습니다 내가 사용하고있는 캐릭터 세트입니다 그래서 내가 말했듯이, 이것은 메타 태그이며, 우리의 파일에 관한 정보를 정의하는데 사용됩니다 나는 하나 더 메타 태그를 정의 할 것이고 이것은 메타 설명 태그가 될 것입니다

따라서이 태그를 사용하여 기본적으로 저희 웹 사이트 및이 태그에 대한 설명은 웹 브라우저와 같은 것들에 의해 사용될 수 있습니다 예를 들어, Google 이 메타 태그를 파일로 볼 수 있으며 검색 페이지에 정보를 표시하는 데 사용할 수 있습니다 일반적으로 Google에서 여러 번 검색하면 그들은 그것의 작은 묘사 같이이고 나는 파일에서이 꼬리표를 사용하고있다 그래서 나는 말할 수있다 메타와 나는 이름이 같다고 말할거야 설명과 지금 내가 말할거야 내용은 평등하게 그리고 이제는 내 웹 사이트에 대한 설명을 입력 할 수 있으므로 정말 멋지다고 말할 수 있습니다

웹 사이트 및 이제 우리는이 멋진 웹 사이트와 같은이 설명이 있고 나는이 태그를 끝내고 끝낼 것입니다 그래서 너희들에게 보여주고 싶다 하나의 개념 또는 아시다시피, HTML의 한 가지 이제 HTML 속성에 이러한 HTML 태그가 있습니다 여기는 메타 태그입니다

이것은 메타 태그이지만이 태그 안에는 속성이라는 것이 있습니다 때때로 사람들은 그것들을 속성이라고 부릅니다 때로는 사람들이 재산이라고 부릅니다 기본적으로이 태그에 몇 가지 정보를 전달합니다 따라서 메타 태그가 있고이 태그에 맞춤 정보를 제공하고 있습니다

이 메타 태그의 내부에는 내가 찾고자하는 정보 유형이 있습니다 그래서 설명을 정의하고 그것을 설명해야한다고 말하고 있습니다 그래서이 HTML 태그에서 많은 시간을 지나칠 수 있습니다 속성 또는 속성 그리고 이러한 태그는 이러한 속성과 속성을 사용하여 작업을 수행 할 수 있습니다 따라서이 메타 태그 작업은 파일에 대한 메타 데이터를 정의하는 것이고 우리가 그것을 전달할 때 이러한 속성이나 속성 메타 데이터를 정의하는 데 필요한 정보를 제공합니다

우리의 HTML 태그 안에는 많은 시간이 있습니다 우리는 다른 속성을 가지려고합니다 태그에 다른 정보를 제공해야합니다 그러니 마음 속에 두세요이 메타 태그는 당신이 이것을 좋아하기 때문에 그것을 보여주는 좋은 일을합니다

하나는 두 가지 속성을 취한다 그래서 그것들은 지금 우리 문서의 머리 부분에서 정의 할 수있는 두 개의 태그입니다 우리 문서의 본문으로 들어가서 재미있게 시작할 것입니다 그래서 문서의 본문은 우리가 실제처럼 모든 것을 넣을 수있는 곳입니다 웹 사이트 콘텐츠 그래서 웹 사이트에서 볼 수있는이 모든 것들은 일반적으로 몸 안쪽으로 가야합니다

이제 첫 번째 태그입니다 너를 보여주고 싶다 기본적으로 헤더를 정의하거나 웹 사이트에서 제목과 같이 사용할 수있는 태그이므로 여기에이 태그가 있습니다 안녕하세요 전 정말 좋아하지 않기 때문에 그냥 없애 버릴 겁니다

웹 사이트에 두통을주고 싶다고 가정 해 봅시다 그래서 나는 여기에 내 웹 사이트의 제목처럼 잘 정의하고 싶었다 제목 태그라는 것을 사용할 수 있습니다 그리고 우리가이 표제 꼬리표를 쓰는 방법은 수업 기호와 함께이고 나는이 H를 사용하고 나서 H를 사용할 것입니다 저는이 숫자에 1부터 6까지의 숫자를 줄 수 있습니다

그래서 그것을 2로 줄 수 있습니다 3 4 5 또는 6 그리고 이것은 기본적으로 우리 웹 사이트의 헤더를 뱉어 내십시오 그래서 머리글 1은 이것이 마이크의 것임을 말합니다 웹 사이트 및 나는이 결말표를 여기서 사용할거야 그래서 이것은 태그의 예입니다

내부에 텍스트 입력이 필요할 것입니다 그리고 지금 내가 여기로 가서 내 페이지를 새로 고침 할 때 마이크의 웹 사이트가 나타나고 멋지고 크다는 것을 알 수 있습니까? 그래서 나는 내 웹 사이트에서이 멋진 큰 머리글을 가지고 있고 그것을 알고있다 텍스트가 정말 크고 정말 좋아 보인다 그리고 h1을 정의하는 것 외에도, 이것을 h2로 만들 수도 있습니다

그리고 이제 이것을 h2로 만들면 조금 더 작아 질 것입니다 그래서 당신은 그것이 조금 줄어든 것을 볼 수 있습니다 그리고 이것을 h4로 만들 수 있습니다 그리고 그것은 더욱 더 줄어들 것입니다 과 나는 h6까지 줄곧 갈 수있다

hTML이 정의 할 수있는 가장 작은 크기의 머리말은 꽤 작은 머리말이 될 것입니다 언제든지 좋아하는 것을 발표하거나 좋아하는 타이틀을 원할 때마다 어쩌면 이 헤더와 헤더를 사용할 수있는 문서의 섹션은 일반 텍스트보다 조금 더 커 보이고 굵게 보일 것입니다 헤더가있는 것 외에도 h2로 남겨 두는 편이 좋을 것입니다 나는 내 웹 사이트의 단락처럼 정의 할 수있는 일반 텍스트 정보도 정의 할 수 있습니다 기사 나 웹 페이지처럼 많은 글을 쓰고 있다면 단락을 사용하고 싶을 것입니다 그렇습니까? 웹 사이트에 텍스트를 넣고 싶습니다

그래서 저는 단락 태그라고 불리는 것을 만들 수 있고 단락 태그는 바로 될 것입니다 P로 끝나는 태그가 필요합니다 그리고 지금 내가 쓰는 모든 텍스트는 그 자신의 단락 안에 들어가서 이렇게 쓸 수 있습니다 단락과 이제 내 페이지를 새로 고침 할 때 이것이 자신의 단락에서 나타난 것을 볼 수 있습니다 그리고 단락에 대해 멋진 점은 자동으로 형식 자체를 정렬하므로 실제로이 바로 아래 다른 단락을 만들 수 있습니다

그래서 우리는 이것이 다른 것이라고 말할 수 있습니다 단락과이 단락은 자동적으로 그 자체의 공간을 만들어줍니다 이 단락 아래 좋아요 우리는이 단락을 가지고 있습니다

그리고 나서 우리는이 단락을 가지고 있습니다 이 단락 안에 많은 텍스트를 넣고 일반적으로 텍스트 블록처럼 쓸 때마다이 단락을 사용하려고합니다 단락 태그 이제이 단락 안에있는 요소 중 일부 스타일을 지정할 수도 있습니다 여기이 단어를 굵게 표시하기를 원한다고 가정 해 봅시다 글쎄, 나는 또 다른 특별한 HTML 태그를 사용할 수있다

그것은 과감한 태그 다 그리고 이것은이 단어를 활로 만들 것입니다 그래서 나는 사인보다 덜 할 수 있고 대담한 사인은 그냥 B입니다 그리고 나서 끝내고 싶니? 이렇게 열리고 닫힌 굵은 태그의 내부 우리는 웹 사이트에 단락 안에 또는 다른 장소 안에 텍스트를 넣을 수 있습니다 우리는 대담 해지고 싶다 이제이 페이지를 새로 고치면 단락이 굵게 표시됩니다

다른 태그도 사용할 수 있습니다 그래서 대담하게 만들지 않고 이탤릭체로 만들 수 있습니다 그래서 저는 B 대신에 눈을 쓸 수 있습니다 이제 대담한 텍스트 대신이 텍스트를 기울임 꼴로 표시하고 실제로 포함시킬 수 있습니다 이 태그들은 서로 안에 있으므로 굵은 태그와 이탤릭 태그를 사용할 수 있으므로이 굵게 태그를 사용하고 이 다른 끝나는 굵게 태그 및 굵게 태그 안쪽에 가져 가겠습니다

기울임 꼴 태그를 달아서 단락을 넣을거야 이제 우리는 대담한 이탤릭체를 갖게 될 것입니다 그런 단락 그래서 그냥 단어 중 하나를 기울임 꼴로 표시하고 동시에 단어로 작성 그래서 그것은 당신에게 정말 좋은 방법입니다 특정 단어를 기울임 꼴로 표시하거나 특정 단어를 대담하게 표시 할 수 있으며 실제로 이러한 태그를 사용하여 쉽게 쉽게 찾을 수 있습니다

우리가 할 수있는 또 다른 일은 문서의 레이아웃을 제어 할 수 있다는 것입니다 따라서 HTML을 사용하는 것 중 하나는 웹 페이지를 배치한다는 것입니다 매우 구체적인 방법으로 나는 그 일이 어떻게 일어나는지 보여줄 수 있습니다 그래서 HTML이 웹 페이지를 레이아웃 할 때, 기본적으로 우리가 여기서 정의한 레이아웃을 본문 내부에서 취합니다 웹 페이지에 여기에 표시합니다

문서의 요소가있는 순서는 브라우저에 표시 될 순서입니다 그래서이 단락을 잘라내어 머리글 위에 여기 붙여 넣으면 내 문서 레이아웃과 구조에 반영됩니다 이제 단락이 웹 사이트 헤더보다 웹 사이트 헤더 위에 오게 될 것입니다 그러면이 단락들이 그 아래에있게 될 것입니다 그래서 당신이 주문하는 방식입니다

HTML 내부의 태그는 웹 사이트에 표시되는 방식입니다 그리고 다른 것은 HTML이 반드시 신경 쓰지 않는다는 것입니다 이 파일을 포맷하는 방법 그래서 다른 말로하면 HTML은 공백을 신경 쓰지 않습니다 여기에 여분의 라인이 있습니다 당신은 괜찮다고 생각할 것입니다

단락과 제목 사이에 두 줄의 여백이 추가 될 것입니다 바로 여기에이 공간이 모두 있기 때문입니다 그러나 사실은 그렇지 않습니다 페이지를 새로 고칠 때 아무 일도 일어나지 않습니다 HTML은 자체적으로이 태그를 사용하여 스스로를 출력하므로이 태그에 상관하지 않습니다

공백은 파일 안에 있습니다 이 태그 안에 무엇이 있는지 정말 신경 써야합니다 그래서 우리가 공백을 만들고 싶다고 상상해보십시오 이 머리글을 다시 집어 넣을거야 그래서 나는 조금 더 읽기 쉽다

실제로 새 줄을 만들 수 있었으므로이 머리말 뒤에 여기에이 줄을 넣으려고합니다 새 줄을 만들고 싶었습니다 나는 break라고 불리는 또 다른 HTML 태그를 사용할 수 있으며 break 태그는 기본적으로 HTML 문서에 새로운 라인을 생성 할 것이다 그래서 나는 BR의 수업 기호를 할 수 있습니다 그러면 우리는 슬래시를 할 것입니다

우리는 더 큰 표시를 할 것입니다 그리고 제가이 페이지를 새로 고침 할 때 여러분은 보게 될 것입니다 제목과이 첫 단락 사이에 우리는이 공간이 여기에 있음을 볼 수 있으며이 중 많은 부분을 사용할 수 있습니다 멋진 태그는 원하는대로 만들 수 있습니다 둘 중 하나를 만들면 이제는 훨씬 더 아래로 갈 수 있습니다 따라서 이러한 중단 태그는 실제로 문제를 일으킬 수 있습니다

내가 사용할 수있는 또 다른 태그를 가로 룰 탭이라고하며 가로 룰 탭은 기본적으로 웹 사이트 바로 직선으로 콘텐츠를 분리하는 데 도움이 될 것입니다 그래서 나는 그 꼬리표를 만들 수있다 인사라고 말하면 슬래시와 나는 더 큰 표시를 할 것이고, 그래서 당신은이 HR 태그가 그와 비슷하다는 것을 알게 될 것입니다 우리가 전에 사용했던 Br 태그와 이것은 또 다른 특별한 유형의 HTML 태그입니다 그래서 이것은 하나의 태그라고하는 태그입니다

바로이 헤더에서 두 번입니다 하나의 태그가 있습니다 그리고 우리는이 다른 끝 태그를 가지지 만 때로는 태그가 될 것입니다 예를 들어 실제로 두 개의 태그가 필요하지 않은이 가로 규칙 탭과 같은 경우 내부에 들어갈 필요가없는 것처럼 그리고 그것은 단지 하나의 태그와 많은 시간이 될 것입니다 이 단일 태그를 사용하면 이러한 방식으로 형식을 지정하게됩니다

그래서 당신은 이름을 쓸 것이고 우리는이 끝 기호를 사용할 것입니다 실제로 어떤 경우에는이 슬래시를 제거 할 수 있지만 기술적으로 올바르므로 계속 사용합니다 HTML을 사용하면 휴식 시간 대신 여기를 볼 수 있습니다 우리는 수평선을 가질 것입니다 그리고이 수평선은 기본적으로 우리가 우리를 갈라 놓을 수있는 것입니다

콘텐츠를 넣을 수있는 권리는 여기에 다른 콘텐츠처럼 넣을 수도 있고 스타일에 맞게 지정할 수도 있습니다 거기에 이중 줄이 있어도 가로 룰은 페이지 전체에서 계속됩니다 또한 텍스트의 크기를 제어하는 ​​데 사용할 수있는 몇 가지 다른 태그가 있습니다 여기이 단락 아래에 이 단어 중 하나를 더 크게 만들고 싶다고합시다 예를 들어,이 부분을 더 크게 만들고 싶다고 가정 해 봅시다

크고 작은 두 개의 태그를 사용할 수 있습니다 텍스트가 조금 더 크거나 작습니다 그래서 나는 큰 태그를 여기에서 할 수 있고 나는 끝 태그를 할거야 따라서이 태그는 다른 모든 태그와 마찬가지로 작동합니다이 큰 태그 내부에 들어가는 것이 실제로 더 커질 수 있습니다

이제 이걸 여기에서 보시오 내 페이지를 새로 고침 할 때 실제로 약간 더 커질 것입니다 그리고 당신은 그것을 볼 수 있습니다 그리고 저는 똑같이 할 수 있습니다 이것과 관련된 것은 여기에 태그입니다

이 사실을 실제로 보여주기 위해 더 크게 만들자 이 페이지를 새로 고침하면 이 태그도 커질거야 그래서 그것은 그렇게 커지지 않습니다 그러나 이것을 여러분에게 사용할 수 있습니다 텍스트가 어떻게 보이는지 제어하십시오

어쩌면 당신은 약간의 텍스트가 조금 더 크거나 작게되기를 원할 것입니다 나는 똑같은 일을 할 수있다 하지만 작은 태그를 사용하여 여기 내 말에 이 작은 태그를 붙이 겠어 그래서 우리는 작고 다시 말할 것이고, 끝낼 것입니다 과 이제 내 오른쪽을 지켜봐

이것은 더 작아 질 것입니다 그래서 당신은 그것이 조금 줄어든 것을 볼 수 있습니다 큰 태그와 작은 태그를 사용하면 웹 사이트의 텍스트 크기를 제어하는 ​​데 도움이됩니다 subscript와 superscripts라고하는 다른 태그들 그래서 이것은 첨자 나 위첨자와 같은 형식을 취하는 데 사용할 수 있습니다 특히 수학과 같은 것을한다면 이런 식으로 뭔가를 쓰고 싶을거야

그래서 나는이 단락으로 가서 아래 첨자와 위 첨자를 만들겠습니다 그래서 저는 타입을 좋아하고 싶다고 상상해 봅니다 우리가 말할 수있는 물에 대한 화학 공식 h2o 그러나 이것 역시 실제로 실제로는 아래 첨자가되어야합니다 그것은이 작은 태그를 사용할 수 있도록 H보다 아래로 너무 작게 너무 작아야합니다 나는 이것을 서브 태그로 둘러 쌀 수있다

이제 조금 더 작아 질 것입니다 그래서 우리는 여기에 h2o가 있음을 알게 될 것입니다 따라서 형식이 올바르게 지정되었습니다 나는 또한 위첨자로 같은 것을 할 수있다 또 다른 좋은 예는 수학과 같아서 아마 10을 쓰고 싶을 것입니다

10 ^ 2와 같은 제곱 (squared) -이 위 첨자를 사용할 수 있습니다 태그를 붙이면 위 첨자가됩니다 이제 우리는 10 제곱이됩니다 그래서 이들은 모두 당신이 기본적으로 사용할 수있는 작은 HTML 태그와 같습니다 귀하의 웹 사이트에 텍스트 서식을 지정하십시오

그리고 HTML이 처음 작성되었을 때 귀하는 웹 사이트가 단지 모든 텍스트 였음을 이해해야합니다 그래서 요즘 우리는 웹 페이지에 이미지와 비디오 및이 모든 다른 것들을 가지고 있습니다 일반적으로 HTML은 텍스트를 쓰는 데 사용되었으며 일부 이미지와 다른 것들이있었습니다 하지만 막 다루는 HTML 태그가 많이 있습니다 서식 지정하기 그래서 이것들은 모두 편리하게 올 수있는 태그 단락의 텍스트 서식을 지정하거나 단락의 텍스트를 서식 지정하는 데 사용할 수 있습니다

다른 요소 내부의 태그 그래서 나는 단락처럼이 태그를 사용할 수 있음을 알 수 있다고 생각하지 않으려면이 태그를 사용할 수 있습니다 귀하의 웹 사이트에 텍스트가있는 곳이라면 어디에서나 헤더에서이를 사용할 수 있습니다 그렇지 않으면 다른 곳에서 사용할 수 있습니다 원하는 기본 HTML 태그가 있으므로 분명히 우리가 배울 수있는 태그가 많이 있으며 더 많은 태그를 사용할 수 있습니다 하지만 당신이하고 싶은 것은 실제로 기본에 대한 핸들을 얻는 것입니다

그래서 이것은 헤더와 같은 HTML의 기본 요소와 같습니다 수평 규칙은 단락을 나눕니다 기본 사항 처리하기 그리고 이러한 것들을 사용하여 다른 웹 사이트를 개척하고 더 복잡한 것으로 나아갈 때처럼 연습하십시오 기본 사항을 알고 있기 때문에 HTML을 사용하는 것이 좋습니다 이 튜토리얼에서는 HTML로 주석에 관해 이야기하고 싶습니다

이제 주석은 기본적으로 HTML 내부에 작성할 수있는 작은 텍스트 조각입니다 브라우저에서 무시할 수 있으며 일반적으로 주석의 목적은 읽거나 다른 사람이 읽는 것입니다 개발자가 읽을 수 있도록 HTML 코드 내부에 HTML 주석을 쓸 수 있으며 웹 브라우저에서 완전히 무시됩니다 하지만 예를 들어 나중에 코드로 돌아 가면 자신에게 약간의 알림을 남기거나 약간의 코드 블록이 무엇을하는지 설명 할 수 있습니다 다른 개발자에게 파일을 제공하면 주석을 사용하여 작은 노트를 제공 할 수 있습니다 HTML 내부에서 주석을 사용하는 방법을 보여줄 것입니다

그런 다음 주석 우수 사례에 대해서도 이야기 할 것입니다 그래서 당신이 어떻게 코멘트를 HTML에서 가장 좋은 방법으로 사용하는지는 코멘트를 만들 수있는 방법입니다 매우 구체적인 구문을 사용하므로 적은 수의 기호를 사용하여 주석을 만들 수 있습니다 느낌표와 두 개의 하이픈 그래서 지금 내 텍스트 편집기에서 볼 수 있습니다 내가 주석을 실제로 바꾼 것처럼 여기에 두 번째로 넣을 때 이제 우리는 의견을 듣고 있으므로 입력 한 텍스트는 회색으로 표시됩니다

그래서이 텍스트는 여기의 텍스트와 다르게 보입니다 기본적으로 그것은 단지 괜찮은 것입니다 이제 HTML 주석이 있습니다 내가 지적하고자하는 것 중 하나는이 주석을 아래의 모든 코드에서 만들었습니다 이 작은 논평으로도 바뀌었다

이제 내가하고있는 일은 주석을위한 시작 태그를 만드는 것입니다 따라서 주석은 이러한 여는 태그와 닫는 태그 안에 들어가야하며이 주석 태그를 닫을 수 있습니다 하이픈, 그리고 더 큰 표시 이제 이러한 태그 내부의 내용은 주석이 될 것이며 여러 줄에 걸쳐 주석을 실행할 수 있습니다 그래서 나는 주석을 만들 수있다 당신은 우리 텍스트의 몇 개의 다른 라인에 걸쳐 그것을 안다

그리고 나는 코멘트가 근본적으로 단지있다라고 말했다 브라우저에서 렌더링하지 않을 특수 텍스트 일반적으로 브라우저는 브라우저를 보지 않을뿐만 아닙니다 그들은 단지 일종의 그들을 무시하고 여기에서, 당신은 단지 작은 것을 넣을 수 있습니다 나는 이것에 관해 작업 할 필요가 있거나, 말할 수있는 것처럼 말할 수있었습니다 너는 이것을 표시하지 않는다는 것을 안다, 너는 정말로, 나는 너가 말하고 싶은 어떤 덧글이라도 중요하지는 않지만 댓글은 유용 할 수 있으며 댓글을 사용하는 방법을 알고 싶어합니다

주석을 사용하여 주석 처리 할 수도 있습니다 특정 코드 조각 예를 들어 내가 이것을 원하지 않는다고 가정 해 봅시다 이 수평 규칙에서 H2가 나타납니다 그래서 그것은이 웹 사이트의 머리글과 같습니다 이것을 받아 들여 코멘트로 둘러 쌀 수 있습니다

기본적으로 내 웹 사이트에는 표시되지 않으며 브라우저가 무시하기 때문에 볼 수 있습니다 그래서 HTML을 쓰는 사람들은 주석을 쓰는 것 외에도 작은 노트를 쓰는 것을 좋아합니다 그들은 또한 코드의 작은 부분을 주석으로 처리하는 주석을 사용합니다 그래서 그것은 유용합니다 맞습니까? 이 코드는 이제 브라우저에서 렌더링되지 않으므로 그래서 만약 내가 다른 코드를 시험해보고 싶다면, 다른 것을 시도하십시오

이 코드를 주석으로 처리 할 수 ​​있으며 여전히 HTML 파일 내부에있을 것입니다 하지만 브라우저에서 사용하지 않을거야 많은 사람들이 할 또 다른 일은 그들이 왜 그런 말을하는지에 대한 이유를 넣을 것입니다 그래서 여러분은 단지 이 일을 다시하거나 너는 그런 뜻인지 알거야 여기에있는 내용을 다시 작성하면 주석 내에 백업을 원할뿐입니다

이것이 주석의 기본 사항입니다 그들은 정말 간단하지만 지금도 정말 강력합니다 한마디로 나는 경고의 종류를 추측한다 이것은 내 개인 의견과 같이 이야기하는 것과 같다 나는 당신이 코멘트를 사용할 때, 당신은 그들을 간절히 사용할 필요가 있다고 생각한다

나는 어떤 사람들은이 모든 것을 쓰는 나쁜 습관을 가지고 있다고 생각한다 정말로 긴 코멘트는 일을 설명하고 일을하고, 당신은 개인적으로 알고 있습니다 나는 코멘트의 목적이 코드로 설명 할 수없는 것을 설명하는 것이라고 생각한다 그래서 때때로 사람들은 지저분한 코드를 작성합니다 그래서 그들은 지저분한 잔소리를 쓸거야

HTML을 누른 다음 그것은 단지 이런 식으로 오, 이것은 헤더입니다처럼되고있는 위에 코멘트를 쓸거야 한편, 코드는 마치 완벽한 재앙을 알고 있습니다 정말 지저분 해 나는 HTML이 스스로를 말하게하는 것을 크게 믿는다 그리고 나는 그것을 채택하기위한 괜찮은 철학이라고 생각한다 HTML이 그 자체로 말할 때 당신은 깨끗하고 읽기 쉬운 글을 써야합니다

HTML과 그런 식으로 누군가가 당신의 HTML 문서를보기 위해 간다 모든 것이 명확하기 때문에 설명을위한 설명 있잖아? 당신은 지저분한 코드를 쓴 사람이되고 싶어하는 것을 원하지 않는다 누구 한테 도움이되지 않기 때문에 권리 확실한 이 코드 라인이 무엇을하고 있는지를 알려주는 설명이 있지만 거기에 들어가거나 수정해야하는 경우에는 도움이되지 않습니다 댓글을 사용하기 전에 당신이하고있는 일을 설명하려고합니다

귀하의 HTML 주석을 사용하여 HTML로 설명 할 수없는 것들에 사용되며 그들은 내가 말한 것처럼 사용할 수 있습니다 코드 줄을 주석 처리하고 잠시두기 만하면 브라우저에서 숨길 수 있습니다 정말? 이것은 모든 종류의 제 견해와 저에게 종류에 대한 의견을 말하고 있지만 주석을 사용합니다 생산성을 높이려면 HTML 파일에 추가해야합니다 이 튜토리얼에서는 스타일 및 색상에 대해 이야기하고 싶습니다 HTML로 할 수있는 멋진 것들 중 하나는 실제로 개별 요소의 스타일을 지정할 수 있고 스타일을 지정할 때입니다

HTML 요소를 사용하면 스타일 속성이라는 것을 사용할 수 있으며 실제로 각 HTML 요소에 특정 스타일 정보 제공 이제 HTML 스타일링에 대해 이야기 할 때 당신이 얻을 수있는 CSS라는 제목의 또 하나의 주제가 있습니다 스타일 시트 그래서이 수업에서 스타일에 기본 CSS를 사용할 수있는 방법을 소개하고자합니다 이제 이러한 HTML 요소 중 일부 이것은 CSS에 대한 전체 과정을 의미하지 않습니다 실제로이 초안 아카데미 과정은 실제로 HTML 용으로 만 사용됩니다

우리는 CSS에 관해서 만 이야기하는 과정이 있지만 지금은 알고 있습니다 나는 당신을 주제로 소개하고 싶다 일부 HTML 스타일 지정하기 여기에서 볼 수 있습니다 나는이 헤더를 여기에 가지고있다 그리고 나서이 파일을 여기에두고 실제로이 두 가지 색 속성을 부여 할 수 있습니다

나는 텍스트에 색을 칠할 수 있으며 실제로 배경색도 지정할 수 있습니다 이 강의에서는 HTML의 요소에 기본 색상을 추가하는 방법을 보여 드리겠습니다 그러나 다시 한번, 이것이 CSS에 관한 완전한 과정과 같은 것을 의미하지 않는다는 것을 명심하십시오 이것은 스타일링에 대한 모든 과정을 의미하지 않습니다 너에게 소개 할거야

그래서이 단락에서 나는이 절을 속성으로 전달할 수 있습니다 따라서 태그를 정의하는 것 외에도 HTML에서 특정 정보를 HTML 태그에 지정할 수도 있습니다 이것들은 속성 또는 속성과 같이 호출되거나 일부 사람들은 매개 변수라고 부릅니다 나는 이걸 무언가에게 줄거야 스타일은 스타일을 입력하기 때문에 동등하고 지금은이 따옴표 안에 있습니다 이 요소에주고 싶은 몇 가지 다른 스타일 속성을 입력 할 수 있습니다

그 중 하나가 색상이고이 단락의 텍스트 색상을 조정할 것입니다 나는 콜론을 할 수 있고 이제는 기본적으로 원하는 색상을 입력 할 수 있습니다 파란색을 사용하자 그것은 내가 좋아하는 색 중 하나이기 때문이다 이제이 페이지를 새로 고침하면 여기의이 단락이 파란색으로 바뀌 었음을 알 수 있습니다

그래서 단지 지루한 검은 색 대신 푸른 색으로 바꿀 수 있습니다 과 이제는 빨간색 일 것이므로 다른 색상을 사용할 수 있으며 텍스트의 색상을 변경할 수 있습니다 배경색이라고하는 것을 변경할 수도 있습니다 그래서 색상을 빨간색으로 변경하는 것 외에도 배경색을 어쩌면 파란색으로 이제 타이핑 할 수 있습니다 배경 – 색상과 나는 다른 색상으로 전달할 수 있습니다

그럼이게 파란색으로 만들어 보자 이제는이 단락의 텍스트가 빨간색으로 표시되고 배경색은 파란색으로 표시됩니다 그 것처럼 따라서 이러한 다양한 색상 조합을 사용하여 텍스트의 배경을 제어하고 텍스트의 색상 및 이러한 속성 및 기타 요소를 사용할 수도 있습니다 예를 들어,이 머리글 안에서이 똑같은 것을 사용할 수 있습니다

나는 말할 수 있었다 스타일, 나는 이것이 우리가 지나가고있는 속성 일 뿐이라는 것을 기억합니다 저는 색깔을 말할 수 있습니다 이제 우리는 이것을 초록색으로 만들 것입니다 그래서 나는이 물건을 초록색으로 만들 수있다

그리고 나는 또한이 컨테이너 꼬리표에이 스타일을 사용할 수있다 그래서 여기 우리는이 body 태그를 가지고있다 이 스타일을 줄 수도있어 스타일을 말할 수 있으며 배경색을 지정하지 않는 이유는 무엇입니까? 그래서이 배경 색상을 하늘색, 배경을 말할 것입니다 색깔 연한 파란색과 이제 보게 될 것은 전신입니다

그래서 우리 HTML의 전체 본문 그래서이 모든 것들이 파랗게 바뀔 것입니다 그리고 그것은 정확히 무슨 일이 일어나므로 이것을 사용할 수 있습니다 웹 사이트의 배경을 제어하는이 body 태그 내부의 배경색 그리고 우리가 시체의 배경을 만들었지 만 눈에 what 것입니다 하늘색 이 단락의 배경을 파란색으로 만들었 기 때문에 우리가 몸에서 가져온 스타일을 무시하고있어 그래서이 스타일 속성을 사용하여 HTML 요소의 기본 스타일과 요소 스타일 지정에 대해 자세히 알고 싶다면 JAF 아카데미에는 CSS에 관해 이야기하는 전체 과정이 있습니다

여기서 우리는 HTML을 스타일링하는 모든 것들에 들어가게됩니다 그러나 지금 당장은 HTML을 배우려고 노력 중이며 HTML을 먼저 배우는 것이 좋습니다 이 기본 색상 스타일을 사용하여 웹 사이트의 모양을 바꿀 수 있다는 것을 알고 있습니다 이제 내가 사용할 수있는 모든 색상을 찾으러 갈 수있는 웹 사이트를 보여 드리고자합니다 그래서 이것은 w3 학교라고하는 웹 사이트이고 당신은 w3 학교 색상 목록과 같은 Google 검색을 할 수 있습니다

이 모든 CSS 색상 목록을 제공합니다 다시 한번 말하지만, CSS에 대해 너무 걱정하지 마십시오 그 스타일 태그의 내부에서 사용할 수 있다는 것을 알아 두십시오 그래서 이것은 색상의 이름과 같은 완전한 목록 일 뿐이며 이름을 전달하고 싶지 않으면 그래서 그 스타일 태그 중 하나 안에 아쿠아처럼 말할 수있는 것처럼 배경 아쿠아 텍스트를 색칠합니다 이 16 진수 태그를 거기에 넣을 수도 있습니다

그럼이 녀석을 복사해서 색 이름 대신 넣고 그대로 쓸 수있어 그게 바로 몇 가지 기본 사항입니다 HTML에서 색상 및 스타일 사용하기 HTML을 배우려고하는 경우 너무 걱정하지 마십시오 스타일을 지정하는 것 뿐이지 만 요소 스타일링의 기본 사항을 보여 주기만하면됩니다

젖은 치아와 함께 일하기 시작하다 HTML 내부 스타일링 이 튜토리얼에서는 레이아웃을 위해 다양한 HTML 태그를 사용하는 방법에 대해 이야기하고자합니다 웹 사이트의 구조 이제 우리는 body와이 HTML 태그와 같은 기본적인 HTML 태그를 살펴 보았습니다 머리글과 단락과 같은 것들도 아주 기본적인 HTML로 보았습니다 이 자습서의 태그

우리 페이지에서 컨텐트를 형식화하는 데 사용할 수있는 태그에 관해 이야기하고 싶습니다 그래서이 꼬리표는 우리 웹 사이트에 다른 내용을 다른 단면도로 레이아웃하는 데 도움이 될 것입니다 정말로 HTML을 쓰고있을 때 당신이 그 권리를 사용하고 있는지 확인하고 싶습니까? 태그를 레이아웃하여 가장 일반적인 실수 중 하나 인 페이지를 새로 작성하십시오 HTML을 만드는 개발자는 올바른 태그를 사용하지 않고 자신이 가지고있는 HTML 태그를 모두 사용하지 않는다는 것입니다 자신의 페이지를 레이아웃 할 수 있음 많은 사람들은 올바른 태그를 사용하지 않을 것입니다 또는 특정 HTML 태그에 대해 알지 못해서 페이지를 레이아웃하지 않을 수도 있습니다

아니면 그냥 시간을내어 사용하는 느낌이 들지 않습니다 그러나이 튜토리얼에서는 웹 페이지 레이아웃에 사용해야하는 모든 태그를 보여 드리고자합니다 그래서 내가 보여주고 싶은 첫 번째 것은 몸 안의 코드 몇 개를 레이아웃하는 것입니다 이제 대부분의 웹 페이지에는 뚜렷한 부분 일반적으로 머리글이 있고 머리글은 맨 위처럼 보이며 일반적으로 머리글은 모든 페이지에있는 요소입니다 귀하의 웹 사이트는 탐색 메뉴와 같을 수 있습니다

어쩌면 브랜딩 정보가있을 수 있습니다 따라서 웹 사이트의 이름과 로고가 같을 수 있으며 웹 사이트의 다른 부분을 좋아할 링크가 있습니다 나는 당신이 웹 사이트의 헤더가 어떻게 보이는지 알기 전에 웹 사이트를 본 적이 있다는 것을 의미합니다 다음 섹션은 주요 섹션입니다 이것은 마치 웹 사이트의 고기와 뼈와 같습니다

이것은 모든 내용이 갈 곳입니다 어쩌면 당신은 당신이 기사의 다른 단면을 몇몇 심상 있을지도 모른 기사 같이 가지고있을 것입니다 도대체 무엇이 그것은 메인과 같습니다 섹션의 세 번째 섹션은 바닥 글이며, 대부분의 웹 사이트는 내려가는 길 다시 몇 가지 추가 탐색 링크가 있습니다 어쩌면 일부 브랜딩 정보 일부 소셜 미디어 페이지를 좋아하는 링크 일 수 있지만 대부분의 웹 사이트는 기본 3 가지를 구현할 예정입니다

섹션 구조 머리글 기본 및 바닥 글 및 HTML에 우리가 사용할 수있는 태그가 있습니다 그 모든 섹션을 내 몸 안에 여기에 이렇게 정의하십시오 머리글을 정의하여 시작하겠다 헤더 태그는 다음과 같이 두 가지로 만들 것입니다 이제 우리 웹 사이트의 헤더에 넣으려는 코드는 여기에 올라갈 것입니다

이제 여기, 나는 갈기를 만들어서 다른 태그들을 갈기 갈기 찢어 놓을거야 그리고 당신이하고 싶은 것은 웹 사이트의 모든 주요 내용을 여기에 넣는 것입니다 마지막으로 꼬리표 인 마지막 태그를 사용할 수 있습니다 그래서 바닥 글과 다시 이 바닥 글을 닫아 기본 3 개의 태그 레이아웃을 갖도록하겠습니다 헤더가 있습니다

우리는 주를 가지고 있으며 우리는 바닥 글을 가지고 있으며 이들은 모두 형제 요소입니다 그래서 그들은 모두 모두 같은 부모 요소를가집니다 HTML을 사용할 때마다이 body 태그와 좋은 연습은이 특정 영역에 대한 코드를 분리하는 것입니다 그래서 당신은 당신의 웹 사이트 헤더에 대한 모든 코드를 넣고 싶습니까? 꼬리말 내부의 꼬리말에있는 메인 태그 안의 메인에 대한 헤더 태그 내부 우리가 정의 할 수있는 다른 태그 안에도 정의 할 수 있습니다 어떤 것들은 내 머리글 태그의 내부를 상상해보십시오 나는 탐색 메뉴는 웹 사이트의 헤더에 여러 번 표시 될 수 있습니다

네비게이션 링크는 홈 페이지와 같습니다 그런 다음 About page Contact Us 페이지를 작성하십시오 nav 태그라고하는 무언가의 내부에있는 탐색 요소이며이 nav 태그는 탐색 요소를 저장하는 데 사용됩니다 그래서 당신이 좋아했다면, 당신은 당신의 웹 사이트 내의 다른 링크 목록을 알고 있습니다 그럼 너는 그들을이 nav 태그 안에 넣을 수있어 분명히이 비디오의 요점은 네비게이션 태그 나 네비게이션 목록을 만드는 법을 보여주기위한 것이 아닙니다

구조에 사용할 필요가있는 것을 보여주고 싶습니다 그래서 나는이 정보를 구조화하는 방법을 보여줄 것입니다 그래서 어쩌면 탐색 목록이나 탐색 링크와 같은 탐색 항목이 내부로 들어갈 것입니다 태그가 있으면 HTML 내부에 특수 태그가 있습니다 이 메인 내부에서 사용할 수있는 다른 태그가 있습니다

그래서 내가 블로그 웹 사이트와 블로그 웹 사이트를 가지고 있었다고 상상해보십시오 나는 많은 블로그 게시물을 가지고 있었다 음, 내가 할 수있는 한 가지는 기사 태그라고하는 것을 사용하는 것입니다 그래서 기사 태그를 만든 다음 그 기사 태그 안에 넣을 수 있습니다 기사라는 태그를 만들 수 있도록 블로그 게시물을 쓸 수있었습니다

여기 아래로 우리는 이걸 닫을거야 그래서이 기사 태그 안에는 기사의 모든 텍스트를 넣을 수 있고 그러면 브라우저는 알 수 있습니다 좋아요 여기 안에 기사가있을거야

섹션이라고하는 다른 태그를 사용할 수도 있습니다 그래서 일반적으로 블로그를 쓰고 있다면 귀하의 웹 사이트에 다른 섹션이 있으므로이 섹션 태그를 사용하여 기사 또는 실제로 귀하의 웹 사이트의 모든 부분을 분할 할 수 있습니다 다른 섹션으로 따라서 섹션 태그는 article 태그와 함께 사용할 필요가 없습니다 그러나 그들은 단지 실제로 잘 어울립니다 그리고 그것은 의도적으로 섹션과 섹션을 말할 수 있습니다 이 코드를 닫으면 블로그 게시물의 첫 번째 섹션과 같은 코드가 여기에 포함될 수 있습니다

아마 다른 섹션이있을거야 다시 말하자면,이 섹션 컨테이너를 원하는만큼 만들 수 있도록이 섹션을 닫을 수 있습니다 웹 사이트의이 섹션에 대한 모든 콘텐츠를 넣을 수 있습니다 그리고 보통 다른 섹션이있을 때마다 섹션 헤더를 포함 시켜서 정리할 수 있습니다 h1 또는 h2 또는 h3과 마찬가지로 지금 갖고 싶어하는 헤더 또한 HTML 내부에서 헤더를 사용하는 것에 대해 이야기하고 싶습니다

문서 및 이것은 필요한 일이 아니지만 일반적으로 HTML 페이지 또는 HTML 기사를 배치하는 경우 헤더를 어떻게 사용하고 있는지 조심하고 싶습니까? 그래서 일반적으로 하나의 헤더와 하나의 헤더가 메인 페이지와 같을 웹 페이지에 있습니다 웹 사이트의 제목과 그 머리글 아래에 웹 사이트의 다른 섹션을 정의하는 머리글이 있습니다 그래서 너는 이것을 가질지도 모른다 맨 위 머리말 하나 다음에 머리말 두 개가 있고 다른 머리말이 2 개 있고 여기에 다른 머리글이 필요한 경우 그 중 한 섹션은 헤더 세 개를 사용합니다 따라서 사람들은 계층 구조와 같은 방식으로 헤더를 사용할 것을 권장합니다

그래서 헤더 1과 헤더 2를 갖고 싶습니까? 헤더 2 및 그런 다음 여기에 다른 헤더 3이 들어 있습니다 따라서 이런 종류의 계층 구조로 웹 사이트의 헤더를 정의하고 싶을 것입니다 그렇게하지 않으면 웹 사이트의 실적을 변경하지 않는 것처럼 필수 사항은 아닙니다 하지만 그게 최고야 웹 사이트를 디자인 할 때 많은 개발자가 사용하게 될 많은 사람들을 연습하십시오

그리고 우리는 웹 사이트의 구조처럼 레이아웃하는 것에 대해 이야기하고 있기 때문에 내 생각에 그 태그를 사용하면 레이아웃을 도울 때 사용할 수있는 또 다른 태그가 마음에 들었습니다 Google의 웹 사이트는 사이드 태그에서 호출 된 다음 사이드 태그는 기본적으로 모든 콘텐츠에 사용할 수있는 태그입니다 그게 직접은 아니야 페이지의 주요 내용을 좋아하는 것과 관련 있습니다 사이드 태그에서 사용하려는 시나리오의 좋은 예는 광고와 같을 수 있습니다

그래서 많은 웹 사이트는 당신이 구글 애드 센스를 사용하고 있거나 당신이 알고있는 것처럼 광고를 가질 것입니다 귀하의 웹 사이트에 광고가있는 것이면 무엇이든 사용할 수 있으며 사이드 태그를 사용하여 그 태그와 제쳐 태그를 정의 할 수 있습니다 기본적으로이 콘텐츠가 페이지에 있으며 사용자에게 표시되는 것입니다 하지만 웹 사이트의 핵심 콘텐츠와 직접 관련이있는 것은 아닙니다 그래서 그들은 단지 당신이 당신의 웹 사이트 레이아웃을 돕기 위해 사용할 수있는 다른 태그들입니다 웹 사이트의 기본 구조를 만들 때 태그를 사용하는 것이 좋습니다

많은 사람들이하는 일 중 하나는 마치 일종의 사용과 같을 것입니다 웹 사이트 레이아웃을위한 일반 컨테이너 태그 그래서 그들은 HTML이 자신의 웹 사이트를 레이아웃하기 위해 정의한 특정 HTML 태그와 당신이 알고있는이 태그들을 사용해서 이렇게 지정하는 것은 내 웹 사이트의 섹션이며 내 웹 사이트의 다른 섹션입니다 왜 모든 섹션을 정직하게 정의해야합니까? 태그 사용하기 이렇게하면 반드시 웹 사이트의 모양과 느낌을 바꿀 필요는 없습니다 헤더를 사용하지 않고 웹 사이트의 기본 머리글과 바닥 글을 만들 수 있습니다 또는 꼬리말 꼬리표, 그 꼬리표의 목적은 조직을 위해 행동 할 것이다 것입니다 따라서 HTML 파일을 작성하는 경우 목표 중 하나는 가능한 한 파일을 읽을 수 있도록 만드는 것입니다 그래서 당신이 읽을 수 있기를 원하는 파일을 쓸 때 나중에 또는 다른 개발자와 이들을 사용할 때 HTML 태그에 이러한 구조 태그 무슨 일이 일어나고 있는지 쉽게 알려줍니다

맞아요 그래서 당신의 HTML을 볼 수 있습니다 나는 괜찮은 것처럼 말할 수 있습니다 여기에 헤더가 있습니다 오, 여기에 주요 그래서 이것은 핵심 내용이 모두있는 곳입니다

괜찮아 여기 기사가 있는데 두 번째 섹션으로 이동해야합니다 여기 두 번째 섹션이 있습니다 단지 더 쉽게 파일을 읽으면 조직이 조직화되고 다시 태그가 만들어집니다 이 구조 태그는 반드시 웹 사이트의 모양이나 느낌을 변경하지는 않지만 매우 유용한 또 다른 이유입니다 그들은 유용한 검색 엔진 최적화 및 검색 엔진 최적화를위한 것입니다 기본적으로 귀하의 웹 사이트를 보는 방법은 검색 엔진

그래서 많은 것들이 실제로는 그보다 더 많습니다 그러나 당신의 위치에는 좋은 검색 엔진 최적화가있는 경우에 같이 기본적인 생각 같이 종류의 그것 같이이다 그렇다면 Google과 같은 검색 엔진은 정말 쉽습니다 귀하의 사이트를 통해 읽을 수 있고 그것이 무엇에 관한 것인지 그리고 이러한 매우 구체적인 것을 사용할 때를 파악할 수 있습니다 HTML 태그 그것은 Google 같이 당신의 웹 사이트로 들어가고 당신의 웹 사이트의 구조를 파악하고 숫자를 그린 것을 매우 쉽게한다 이 HTML 태그를 사용할 때 웹 사이트의 모든 콘텐츠가있는 곳 Google과 같은 무언가가 파일에 쉽게 들어가서 기사가 어디에 있는지 파악하고 다른 기사를 찾아 낼 수 있습니다 당신의 웹 사이트의 단면도는 귀하의 웹 사이트가 어떻게 배치되어 있는지 그리고 그 정보를 귀하의 웹 사이트를보다 잘 보여줄 수있는 방법 많은 사람들이 HTML 태그의 능력을 과소 평가합니다

그래서이 비디오가이 태그들로 하여금 당신을 가질 수있는 힘을 지켜보고있는 당신들에게 그런 종류의 것을 주입시키고 싶습니다 확실히 이런 것들을 웹 사이트 레이아웃에 사용하고 싶습니다 그들이 중요하기 때문에 중요하지 않다는 말을하는 사람들의 말을 듣지 마십시오 그것이 HTML html에 포함 된 이유입니다 말도 안되는 언어입니다

거기에 털이 많지 않습니다 그래서 HTML이 무언가를 정의 할 때, 당신은 그것이 중요하다는 것을 알고 있습니다 어쨌든 나는 항상 당신의 파일을 배치하는 것이 좋습니다 너 같은 이런거야 당신이 원하지 않는다면이 다른 태그들은 조금 시간이 걸릴 것이라고 생각합니다 하지만 검색 엔진과 같이 파일의 가독성과 가능성을 높일 수 있습니다

이 튜토리얼에서는 링크를 사용하는 방법에 대해 이야기하고 싶습니다 HTML 링크는 가장 인기있는 HTML 요소 중 하나이며 귀하의 웹 사이트를 인터넷의 다른 웹 사이트에 연결하여 내 사용자가 googlecom을 좋아할 수있는 링크를 만들거나 Facebookcom 또는 내 웹 사이트의 다른 페이지에 연결할 수 있습니다 따라서 탐색 목록처럼 구축하고 싶다면 나는 사용자가 클릭 할 수있는 나의 웹 사이트의 다른 페이지에 대한 링크를 가질 수 있습니다

그런 다음 당신은 또한 그 페이지로 이동할 수 있습니다 이미지 또는 PDF와 같은 파일에 연결하고 해당 링크를 만들면 사용자가 해당 이미지 또는 PDF를 볼 수 있습니다 그래서 링크를 만드는 법을 보여 드리겠습니다 우리는 a라는 특수 HTML 태그를 사용해야합니다 이 태그에 정보를 전달해야하는 경우 우리는 H ref라는 이름을 부여해야하며 href는 기본적으로 우리가 연결하고자하는 곳입니다

그래서 링크를 만드는 가장 쉬운 방법은 외부 링크처럼 생성하는 것입니다 웹 사이트에없는 페이지로 연결 상상해보십시오 googlecom과 같은 링크를 만들고 싶었습니다

이 href 안에 googlecom에 주소를 입력하면됩니다 HTTP 콜론 슬래시는 슬래시를 슬래시 당신은 당신이 이것을 포함해야합니다 HTTP 또는 HTTPS는 사용자가 좋아하는 링크를 포함시키지 않을 때 많이 포함됩니다 ww-whatever 그러나 href를 작성하고 링크를 만들 때 이동하려는 위치에 대해 매우 구체적이어야합니다 그래서이 부분을 포함해야 할 것입니다

Wwm 그래서 우리가 효과적으로 해낸 것은이 링크 속성에이 주소에 링크하기를 원한다는 것입니다 어느 것이 Google이고 지금은 이것을 닫을 것이고 나는 실제로 이 전체 태그를 닫아서이 닫는 태그를 만들 수 있습니다 이제 여기에 태그를 넣을 수 있습니다 예를 들어 말할 수 있도록이 링크의 텍스트 Google의 홈페이지가되었습니다 또한이 링크 태그 내부에 텍스트 이외의 것을 넣을 수 있으므로 실제로 넣을 수있는 텍스트를 넣을 필요가 없습니다

HTML 요소가 있으므로 여기에 머리글처럼 넣을 수 있습니다 예를 들어 그래서 우리가 그렇게하지 않으면 머리말을 붙일 수 있습니다 이제 내 페이지를 새로 고침하면 여기에이 오래된 링크가 있음을 알 수 있습니다 이 큰 머리글 하나입니다 우리가 그것을 클릭하면 우리를 google

com을 클릭하면이 링크를 클릭하면 Google로 이동 한 것을 확인할 수 있습니다 구글의 홈페이지 맞지? 그래서 우리는 Google에 여기 있습니다 그래서 당신이 링크를 만들 수있는 방법입니다 기본적으로 여기에 올 웹 사이트로 이동할 수 있습니다 URL 표시 줄 복사 HTTP 또는 HTTPS 부분을 포함하여이 부분을 링크의 href로 가져 오면 거기에 연결할 수 있습니다

우리가 할 수있는 또 하나의 것이 있습니다 내가 알아야 할 한 가지는 웹 사이트에서 멀리 이동하는이 링크를 클릭 할 때입니다 그래서 나는 이것을 클릭하고 어떤 경우 Google에서 갑자기 Google을 사용하고 있습니다 특정 상황에서 링크를 클릭하면 사용자가 웹 사이트를 탐색하지 못하도록 할 수 있습니다 예를 들어 새 탭에서이 탭을 열어 놓고 원하는대로 할 수 있습니다

이 우리가 말할 수 있도록 다른 속성에 태그를 달아 라 우리는 표적이이 따옴표와 동등하고 이제는 안에 있다고 말하고 싶습니다 우리는 링크의 밑줄을 말하고 싶습니다 승인 따라서이 밑줄 공백 값을이 대상 속성에 전달할 때 기본적으로 브라우저에 새 탭에서이 링크를 열도록 지시합니다 이제 Google을 열면 새로운 탭으로 열리 며 여전히 웹 사이트를 열어 놓았습니다

따라서 이것이 더 좋게 만들 수있는 한 가지 방법입니다 그리고이 링크 안에는 내가 원하는 HTML 요소를 넣을 수 있으므로 h1처럼 넣을 수 있습니다 어쩌면 우리는이 홈페이지를 과감하게 만들고 싶었을 것입니다 여기서 대담한 태그를 넣을 수 있습니다 당신은 정말 창조적이되고 서로 다른 스타일의 서로 다른 스타일을 좋아할 수 있습니다

너는 그렇게 두려워하지 말고 싶다 태그 내부에있는 HTML 요소는 사용자가 원하는 것을 분명히하기 때문입니다 우리가 할 수있는 또 다른 일은 웹 사이트의 다른 페이지에 링크 할 수 있다는 것입니다 그래서 나는 그 링크에 대한 텍스트를 없애 버릴거야 나는 또한이 표적 공란을 제거 할 것이다

내 파일 탐색기에서 내 작은 파일 트리를 살펴보면이 indexhtml과 현재 사용중인 파일 인 파일 나는이 페이지 도트 HTML과이 페이지 3 도트 HTML을 가지고 있는데 이들은 모두 다른 것과 같다 내 웹 사이트에있는 웹 페이지 따라서 주어진 웹 사이트에는 여러 웹 페이지가 있습니다 당신은 페이지에 대한 블로그에 있다면 블로그 기사와 같은 묶음이있을 수도 있습니다

웹 사이트에 대한 HTML 파일이 두 개 이상있을 것입니다 그리고 우리는 실제로 그 파일들 사이를 링크 할 수 있습니다이 링크 속성을 사용하면 그렇게 할 수 있습니다 그래서이 href에서 Google과 같은 절대 주소를 사용하여 링크하는 대신 내 웹 사이트의 해당 페이지에 연결할 수 있습니다 상대 URL 사용 예를 들어이 페이지에 액세스하려면 페이지 2에 링크하고 싶다고합시다 현재 나와있는 페이지와 두 페이지가 같은 디렉토리에 있기 때문에 나는 단지 페이지 쌍둥이 이름을 타이핑 할 수있다

그래서 나는 여기처럼 말할 수있다 페이지 두 점은 HTML로 표시되고 브라우저는 자동으로 두 번째 페이지로 이동한다는 것을 알게됩니다 그래서 여기 저기 두 페이지를 말할 수 있습니다 이제 브라우저에서 두 번째 페이지에 대한 링크가 있음을 알 수 있습니다 그래서 이것을 클릭하면 두 페이지로 넘어 가서 두 페이지 안에 있음을 알게 될 것입니다

이미 여기에 링크를 설정했습니다 그래서 여기 2 페이지에 나는 인덱스 HTML에 나를 다시 연결시키는 또 다른 링크가있다 그리고 이것은 우리가 만들 수있는 방법이다 우리 사이트의 네비게이션 이제 2 페이지에서 끝났습니다 홈 페이지로 돌아가서이 두 페이지 사이를 탐색 할 수 있습니다

내 웹 사이트에서 나는 페이지 3에 대한 또 다른 링크를 만들 수 있으므로이 페이지 바로 아래에서 바로이 두 가지 작업을 수행하십시오 이번에 또 다른 링크를 3 번 ​​페이지로 만들 것입니다 한 가지 주목할 점은 페이지 3이이 디렉토리 안에 있다는 것입니다 3 페이지에 대한 링크를 원한다면 3 페이지는 dyrone 폴더 안에 있습니다 HTML 3 페이지 만 말할 수는 없습니다

브라우저가 알지 못할 것이기 때문에 이 페이지 3은 어디에 있어야하는지 정확히 알려야합니다 우리가있는 현재 파일에 비례하여 내가 말할 수있는 한 포워드 슬래시 페이지 3과 이것이 무엇을 말할 것인가? 우리는 하나의 디렉토리로 가고 싶고 우리는 페이지 3이라는 이름의 디렉토리 하나 안에있는 페이지에 링크하고 싶다 HTML 이제 우리는 3 페이지에 대한 링크를 가져야 만합니다 나는 이것을 클릭 할 수 있고 우리는 3 페이지를 가져올 것이다 이것이 웹 사이트의 다른 페이지에 연결할 수있는 방법입니다

웹 사이트에서 파일에 대한 링크를 만들 수도 있습니다 그래서 우리의 경우에 우리는이 작은 고양이 그림을 가지고 있습니다 그리고 이것은 단지 귀여운 고양이 같았습니다 실제로 우리는 우리 웹 사이트에있는 고양이의이 그림에 링크하십시오, 그래서 여기 저의 인덱스 파일로 갈 것입니다 이 HTML 파일에 액세스하는 것과 같은 방식으로이 그림에 액세스 할 수 있으므로 dyrone 대신 고양이 그림을 같은 디렉토리에 두어 고양이와 고양이를 말할 수 있습니다 그러면 jpg 파일이됩니다

이것을 고양이에게 바꾼다 그리고 이제이 고양이 사진에 대한 링크가 있어야합니다 이렇게 나는 그것을 고양이의이 그림으로 데려 갈 것이고 나는 고양이를 볼 수있다 그래서 당신에게 링크 할 수있는 방법입니다 외부 웹 사이트 웹 사이트의 다른 페이지 및 웹 사이트의 파일 그래서 jpg 웹 사이트에 PDF 또는 워드 문서를 저장 한 경우 링크 할 수도 있습니다

그것은 중요하지 않으며 HTML에서 링크를 사용하는 기본 사항 중 하나입니다 이 튜토리얼에서는 웹 사이트에서 이미지 사용에 관해 이야기하고 싶습니다 사람들이 웹 사이트를 가질 때 가장 많이하는 일 중 하나는 이미지를 그곳에 올려 놓는 것입니다 그래서 오늘 저는 우리가 이야기 할 수있는 이미지로 작업하는 기본을 보여 드리겠습니다 이미지 크기 조정 및 기본적으로 HTML 페이지에 배치 그래서 여기 이미지 태그를 만들겠습니다

이미지 태그는 기본적으로 서명보다 적습니다 나는 G 다 이 이미지 태그 안에 우리는 실제로 두 개의 정보를 제공해야합니다 우리가이 이미지 태그를주는 첫 번째 일은 이 이미지 태그가있을 때 표시 할 이미지 위치 기본적으로 실제 이미지에 연결해야합니다 그리고 나서 HTML은 그 이미지를 잡고 웹 사이트에 올려 놓을만큼 똑똑 할 것입니다

그래서 저는 SRC가 소스와 동일하다는 것을 말할 수 있습니다 그리고이 따옴표와이 따옴표 안에 들어 있습니다 우리는 이미지의 위치를 ​​넣고 싶다 이제이 작업을 수행하는 가장 기본적인 방법 중 하나는 인터넷에있는 이미지로 연결하는 것입니다 따라서 인터넷에 많은 이미지가 있습니다

실제로이 소스의 이미지에 주소를 넣을 수 있습니다 태그를 붙이면 이미지가 표시됩니다 브라우저가 여기에 있습니다 나는 공룡의 그림을 몇 개 가지고 있고 여기에 공룡이 많이있다 여기 정말 무서운 t-rex처럼이 이미지를 볼 수 있습니다

이 이미지는 그와 관련된 주소 같은 것을 알 수 있습니다 이 이미지는 분명히 마치이 미친 주소와 비슷하지만이 이미지에 주소를 복사 할 수 있습니다 그런 다음 붙여 넣기 만하면됩니다 이 소스 속성을 사용하면 그 나쁜 소년을 여기에 붙여 넣을 수 있습니다 우리는이 멋진 이미지를 얻었습니다

소스를 지정하는 것 외에도 이미지를 사용하려면 하나 이상의 속성을 지정할 수도 있습니다 alt라고 부르는 alt 속성은 기본적으로 이미지를 찾을 수없는 경우 표시됩니다 그래서 문제가 될 때가 있습니다 HTML은 연결하려는 이미지가 어느 것과도 같습니다 삭제되었거나 브라우저에 없거나 브라우저에서로드 할 수 없습니다 예를 들어, 그 무서운 공룡은 마치 그 사람이 자신의 웹 사이트에서 빼낸 것처럼 사라졌습니다

그러면 더 이상 나타나지 않을 것입니다 그래서이 alt 태그를 백업과 같이 가지고 있습니다 따라서이 텍스트 안에 어떤 텍스트를 넣을 지 대체 태그 이미지가 나타나지 않고 항상 alt 태그가있는 좋은 연습 방법 인 경우에도 표시됩니다 이 문장을 꽤 문장적인 문장 하나처럼 만들면 정말 말할 수 있습니다 무서운 디노, 이제 이미지와 평범한 텍스트 같은 것을 묘사하는 것과 같습니다

항상 alt 태그가 있는지 확인하고 싶을 때 이미지가 있으면 태그 하나만 남을 것입니다 따라서 HTML은 종료 태그에 시작 태그와 같은 두 개의 태그를 갖게됩니다 그리고 우리는 거기에 이미지가있는 케이스가 아닌 물건들을 넣을 것입니다 우리는이 슬래시를 단지 할 수 있습니다 우리는 더 큰 표시를 할 수 있습니다

이제 태그가 완료 될 것입니다 따라서이 이미지는 단 하나의 이미지 태그 일 뿐이며 분명히 꽤 긴 URL입니다 이제이 작업을 수행하면이 이미지를 가져 와서 웹 사이트에 표시해야합니다 그래서이 디노는 실제로 당신이 볼 수있는 커다란 크기입니다 슈퍼 무서운,하지만 지금은 우리 가이 이미지를 우리의 웹 사이트에 있으므로 우리는이 이미지에 연결할 수 있습니다 우리가 할 수있는 또 다른 일은 실제 컴퓨터에있는 이미지에 대한 링크입니다

따라서 인터넷에있는 이미지에 연결하는 대신 나는 내가 좋아하는 이미지에 링크 만 할 수있다 너는 나 자신을 안다 그래서 나는이 출처를 없애고 여기에 내 작은 파일 나무에있는이 그림을 가지고있다 그냥이 귀여운 고양이 야 나는 실제로이 고양이 그림을 가져다가 인터넷에서 그 그림을 그렸던 것처럼 내 웹 사이트에 삽입 할 수 있습니다

근원 안에 있기 때문에 나는 고양이의 이미지와 연결될 것입니다 그래서 우린 그냥 고양이 도트 JPG가 될거야 이제 alt를 변경하여 정말 무서운 공룡처럼 정말 귀여운 고양이로 바꿀 수 있습니다 내 페이지를 새로 고침하면 고양이 사진을 볼 수 있습니다 그래서 여러분이 공룡 그림을 보았을지도 모르는 문제들 중 하나 지금이 고양이 그림과 함께하면 그것들은 큰 이미지와 같고 특히 공룡 그림과 같이 종류가 큽니다

그것은 거대했다 전체 그린처럼했다 이미지로 할 수있는 일 중 하나는 이미지의 크기를 조정하는 것이고이 이미지 태그에 몇 가지 속성을 추가 할 수 있습니다 그래서 소스를 정의하는 것 외에 alt 텍스트를 정의하면 너비와 높이, 너비와 높이를 정의 할 수 있습니다 이미지 그래서 나는 이것을 호소 할 수있다 너는 알고있다 실제로 그것이 평등하게 될 것이라고 말할 수 있습니다 우리는 아마 100 정도라고 말할 수 있습니다

이것은 백 권리 일 것입니다 그래서 우리가 조금씩 줄이면 100이 의미하는 바를 의미합니다 100 픽셀 픽셀은 HTML에서 기본적으로 정의와 같이 사용할 수있는 측정 단위입니다 크기와 픽셀은 설명이 어렵습니다 크기가 너무 커서 설명이 쉽지 않습니다

표준 단위, 즉 픽셀은 다른 크기 일 수 있습니다 보고있는 화면의 해상도에 따라 100 픽셀이기 때문에 대부분의 웹 페이지에서 같은 거리가 될 것입니다 그러나 센티미터 또는 인치와 같은 절대 측정 거리와는 다릅니다 그래서 저는 100 픽셀 너비와 100 픽셀 높이를 말할 수 있도록 이것을 염두에 두십시오 이제 내 페이지를 새로 고침 할 때 고양이는 조금 더 작아서 조금 더 잘 볼 수 있습니다

그러나 우리에게는 고양이가 보인다는 또 다른 문제가 있습니다 끔찍한, 오른쪽 내 말은 조금 씩 웃어서 너는 내가 높이 내에서 이것을 제거하면 내가 실제로 이미지의 종횡비 변경 이제 이미지를 새로 고침하면 실제로 이미지가 키가 크다는 것을 알 수 있습니다 그래서 이미지의 너비와 높이를 다르게 정의 할 때 동일한 화면 비율을 유지하고 싶습니까? 당신이 할 수있는 것은 당신이 당신의 이미지의 종횡비가이 고양이에서이 고양이에 대해 무엇인지 알아내는 것입니다 jpg 이 이미지의 종횡비가 300 x 200이므로 여기에서 볼 수 있습니다

300 픽셀 x 200 픽셀이므로 300과 200이 같아집니다 당신은 종횡비를 알고 있습니다 그리고 같은 종횡비를 유지할 수 있습니다 우리 안에있는 우리의 높이, 그래서 다시 넣으십시오 우리는 그것을 200으로 만들 수있다

100에 의해 100 그리고 이것은 우리에게 종횡비와 마찬가지로 정확합니다 그것은 300에서 200까지 같은 비율입니다 이제 이미지 크기를 조정하면 멋지 네요 크기가 조금 작지만 같은 가로 세로 비율과 같은 크기입니다 그래서 이미지의 크기를 조정할 수있는 방법입니다

당신 그리고 이미지와 함께 다른 것들을 사용할 수도 있습니다 그래서이 이미지를 예를 들어 링크와 결합 할 수 있습니다 그래서 여기에 올 수 있고 링크 태그를 만들 수 있습니다 우리는 단지 이봐, 우리는 이것을 href라고 여기 안에 나는 무엇이든 넣을 수 있었다

내가 원했던 링크 그래서 예를 들어, 나는 이것을이 공룡 그림처럼 연결할 수 있습니다 공룡의 URL을 거기에 넣으십시오 이 링크를 닫을 수 있고 이미지를 클릭하면됩니다 공룡에 대한 사진을 볼 수있게 해주므로 클릭 가능한 이미지를 만들 수 있습니다

당신은이 이미지들로 많은 것을 할 수 있으며 당신은 다른 이미지들 안에 그것들을 끼워 넣을 수 있습니다 HTML 태그로 다른 HTML 태그 안에 이미지처럼 넣을 수 있습니다 당신이 원하는 곳 어디든지 둘 수 있습니다 이미지는 강력하고 절대적으로 당신이 당신의 웹 사이트에서 그것을 사용하고 있는지 확인하고 싶어합니다 이 속성을 모두 포함해야합니다

이것은 정말로 중요합니다 많은 사람들이 게으르다가 거기에 넣지 않지만 정말 중요합니다 예를 들어 내가이 고양이 jpg와 근원을 없애 버렸다면 이제는 그것이 무엇인지 알게 될 것입니다 대체 텍스트를 제공하여 정말 중요합니다 귀하의 웹 사이트 인 콩테 (Conte)가 함께있을 수 있습니다

이미지 링크가 깨졌습니다 이 튜토리얼에서는 웹 사이트에서 동영상을 사용하는 방법에 대해 이야기하고 싶습니다 컴퓨터에 저장 한 비디오를 어떻게 가져올 수 있는지 보여 드리겠습니다 귀하의 웹 사이트에 넣은 다음 YouTube 비디오를 귀하의 웹 사이트에 어떻게 포함시킬 수 있는지 보여 드리겠습니다 여기 정상적인 비디오부터 시작해 보겠습니다

나는 이것을 가지고있다 튜토리얼 도트 mp4 비디오 및 이것은 하나의 자습서는 트래픽 Adam II에 대해 수행 한 것으로서 내 웹 사이트에이 자습서를 포함시켜 실제로 사용할 수 있습니다 HTML 비디오 태그이고 그냥 비디오처럼 될 것입니다이 태그는 source라는 속성을 제공 할 것입니다 SRC는이 따옴표와 동등하고 안에 있습니다 동영상의 위치를 ​​입력하고 싶습니다

내 경우에는 현재 파일의 비디오 경로가 상대 경로이므로 그냥 튜토리얼에서 P를 누른 다음이 비디오 태그를 닫을 수 있습니다 실제로 끝 동영상 태그가 필요합니다 이제 한 가지 할 일은 이러한 동영상 태그 안에 텍스트를 넣는 것입니다 사용자 브라우저가 특정 형식의 동영상을 표시 할 수없는 경우 표시되는 텍스트입니다 대부분의 브라우저가 동영상을 표시 할 수있는 것처럼 드문 경우입니다

그러나 비디오가 어떤 이유로 든 실패 할 경우 여기에 입력 한 모든 텍스트가 표시됩니다 내가 여기 내 웹 사이트로 간다면 페이지를 새로 고침 할 수 있으며 동영상이 표시되고 표시됩니다 그러나 문제는이 비디오를 클릭하면 실제로 재생할 수 없다는 것입니다 그래서 나는 비디오를 계속 클릭하지 않고 계속 누르고 있습니다 왜냐하면 우리는이 비디오에 비디오 컨트롤을주지 않았기 때문입니다

그래서 나는 여기서 내려올 수 있습니다 실제로이 속성에 다른 속성을 부여 할 수 있습니다 컨트롤과 여기에 컨트롤을 입력하는 한 이 비디오는 비디오 컨트롤을 가질 수 있습니다 그래서 때로는 웹 사이트에 비디오를 저장하기를 원할 수도 있습니다 그냥 일반 비디오 태그를 사용할 수 있지만 비디오를 제어 할 수있게하려면 이제 재생 버튼을 클릭하면됩니다

비디오의 다른 부분으로 건너 뛸 수있는 비디오를보고 있습니다 여기는 내가 볼 수있는 볼륨을 제어 할 수있다 이제 우리는이 비디오를 완전히 제어 할 수 있습니다 내가 할 수있는 또 다른 일은 비디오의 크기를 제어하는 ​​것입니다 이 크기를 다른 크기로 지정하려면 비디오가 약간 크다는 것을 알 수 있습니다

나는 이것을 할 수있어서이 두 속성에 너비를 줄 수 있고 높이도 줄 수있다 이제 동영상의 화면 비율을 유지하고 싶습니다 그래서 저는 이것을 폭과 높이를 줄 것입니다 내가 사용하고있는 너비에 맞게 자동으로 조정하여이 너비를 줄 수 있습니다 300이고 300 픽셀입니다

이제 페이지를 새로 고침하면 동영상은 300 픽셀이됩니다 그래서 좀 더 작아서 좀 더 쉽게 볼 수 있고 당신은 할 수 있어요 이 width 속성을 사용하여 너비와 높이를 제어하십시오 내가 할 수있는 또 다른 일은 동영상의 미리보기 이미지를 조정하는 것입니다 따라서 페이지를 새로 고침하면 동영상의 첫 번째 장면과 같은 그림이 표시됩니다

하지만 특정 미리보기 이미지가있는 경우 여기에서 사용할 수도 있습니다 여기를 클릭하면 포스터와이 따옴표 안에 기본적으로이 이미지 파일을 전달할 수 있습니다 그래서 여기에 이 미리보기 이미지가 있으며 이는 실제로 YouTube에서 해당 이미지의 미리보기 이미지입니다 그래서 실제로 색인 색인 HTML 파일을 다시 열어 볼 수 있습니다

여기에 넣을 수 있습니다 엄지 손가락 Jpg 이미지로 이동하고 내 페이지를 새로 고침하면 해당 미리보기 이미지가 동영상에 사용됩니다 그래서 사실 좀 더 크게 만들게 해줘 따라서 비디오에서 첫 번째 이미지처럼 첫 번째 장면을 보여주는 대신 실제로 엄지 손톱을 주면 정말 유용 할 수 있습니다 당신이 할 수있는 또 다른 일은 내가 자동 응답을 할 것인지를 지정하는 것입니다

자동 재생, 이제이 페이지를 열면 비디오가 자동으로 재생되기 시작합니다 그래서 특정 종류의 유용 할 수 있습니다 상황 당신은 또한 내가 루프를 말할 수 있도록 이것을 반복 할 수 있습니다 비디오가 끝날 때까지 마치 비디오 재생이 끝났을 때 실제로 돌아 다니기 때문에 루프가 돌아가고 끝나면 재생을 시작하여 볼 수 있습니다 내가 끝까지 여기까지 갔을 때 주위를 돌아 다니기 시작했다

그래서 그것들은 당신이 알고있는 작은 몇 가지입니다 당신이 그것을 넘겨 줄 수있는 속성이 더 있습니다 나는 그들 모두에 들어 가지 않을 것입니다 그래서 당신의 컴퓨터에 로컬로 저장된 비디오를 가져 와서 이제 웹 페이지에 추가 할 수 있습니다 YouTube 동영상도 포함 할 수 있습니다

그래서 이것은 많은 사람들이 아마 많은 비디오를하기를 원할 것입니다 이것은 YouTube에 저장되어 있습니다 원하는대로 웹 사이트에 포함시키고 싶다면 YouTube에서 실제로이 작업을 쉽게 처리 할 수 ​​있습니다 나는이 공룡 비디오를 가지고있다 그리고 내가 원한다면 이 공룡 비디오를 내 웹 사이트에 삽입하십시오

실제로 YouTube에 올 수 있습니다 이 공유 버튼을 클릭 한 다음 여기를 클릭 할 수 있습니다 삽입 할 수있는 옵션이 있어야합니다 그래서 여기에 내가 할 수있게 해줄거야 클릭하여 퍼가기를 클릭하면 실제로 볼 수있는 HTML 코드가 생깁니다

이것은 HTML 태그입니다 iframe이라고합니다 기본적으로 iframe 태그는 다른 웹 사이트를 들여다 볼 수있게 해줍니다 따라서 YouTube 웹 사이트를 YouTube 웹 사이트에로드하는 것이 좋을 것입니다 그러면 해당 동영상을 중심으로 좋아할 것입니다

나는 iframe에 대해 이야기하는 전체 HTML 비디오를 만들 예정입니다 너무 걱정하지 마세요 이 코드를 복사 한 다음 붙여 넣을 수 있다는 것을 알고 있습니다 YouTube는 실제로 옵션을 제공하므로 선택을 취소하거나 다른 옵션을 확인할 수 있습니다 플레이어에게 비디오 타이틀 및 기타 작업을 제어하거나 표시합니다

그래서 나는 이것을 복사 할 것이고, 이제 우리는 우리가 여기에 올 수있다 HTML 이 코드를 모두 붙여 넣을 수 있습니다 우리는 YouTube 동영상을 사용할 수있게 될 것이며 YouTube 동영상에 대한 멋진 점 중 하나는 YouTube 플레이어가 전체 화면 YouTube 버튼처럼 보이도록 제어합니다 YouTube 볼륨 버튼과 그 모든 것들을 좋아합니다 YouTube에서 동영상을 퍼가는 경우 정말 멋지게 보입니다

이 동영상으로 너비와 높이를 변경할 수 있으므로이 두 값을 모두 수정할 수 있습니다 그 (것)들을 더 크거나 더 작게 만드십시오 이것이 동영상 사용의 기본 사항입니다 제 생각에는 대부분의 유스 케이스가 비디오를 가지고 있거나 귀하의 웹 사이트에 올리시겠습니까, 아니면 귀하의 웹 사이트에 YouTube 동영상을 올리시겠습니까? 그것은 당신이 그 두 가지를 모두 할 수있는 방법입니다 이 튜토리얼에서 HTML로 목록을 만드는 것에 대해 이야기하고 싶습니다

이제 HTML을 사용하면 항목 그룹을 나열 할 수 있으며이를 수행 할 수있는 몇 가지 태그를 제공합니다 어쩌면 이름 목록이나 단계 목록을 나열해야 할 수도있는 시나리오가 많이 있습니다 레시피와 HTML의 특정 태그를 사용하여 목록을 포맷하고 실제로보기 좋게 만들 수 있습니다 내가 말했듯이 정의 할 수있는 몇 가지 유형의 목록이 있습니다 기본적으로 어떻게 목록을 정의 할 수 있습니까? 목록의 첫 번째 유형은 순서가 지정되지 않은 목록이라고하며 특정 순서가없는 목록입니다

그래서 상상해보십시오 우리는 여러 품목의 목록을 만들고 있습니다 특정 순서로 진행할 필요가 없었습니다 정렬되지 않은 목록을 만들 수 있습니다 그래서 ul을 타자하면 닫는 태그가 필요할 것입니다

그리고 우리는이 정렬되지 않은 목록의 내부를 막을 것입니다 목록 항목을 정의 할 수 있습니다 따라서이 두 태그는 기본적으로 목록의 컨테이너와 내부에 있습니다 목록 항목이라는 것을 만들 것입니다 목록의 각 항목에 대해이 항목이 필요합니다

항목 태그를 나열하는 태그 모음이며 여기서 우리는 원하는 항목을 작성할 수 있습니다 그래서 예를 들어 과일 목록처럼 쓸 수 있어요 그래서 우리는 사과 오렌지와 바나나 맞아, 나는 다른 과일들과 내가 원한다면이 목록 항목을 조금 더 복잡하게 만들 수도 있습니다 그래서 나는 링크처럼 여기에 뭔가를 포함 할 수 있으므로 링크를 만들 수 있습니다 그것에게 href를 줘라

그리고 내가 실제로이 사실을 알려주지 않을 것이다 그럴 필요가 없으면이 링크를 닫아서 이 태그 안에있는 HTML 태그는 내부에서 원하는 모든 것을 실제로 할 수있는 항목을 나열합니다 이제 페이지를 새로 고침하면 멋진 목록이 있음을 알 수 있습니다 그래서이 모든 항목을 나열하고 있습니다이 링크는 링크이며 이것은 순서가없는 목록이기 때문에

목록에있는 각 목록 항목을 표시하는 작은 원 마커가 있습니다 이것이 순서없는 목록을 정의하는 방법이지만,이 목록의 항목을 정렬하려면 어떻게해야합니까? 맞습니다 조리법에 요리법이나 무언가를 쓰고 있다고 상상해보십시오 매우 단계를 따라야합니다 특히 원하는 단계를 건너 뛰지 않아도됩니다

우리는 정렬 된 목록과 정렬 된 목록을 찾습니다 우리는 단지 오 L을 입력하면 주문 목록에 나타납니다 이제이 목록에있는 모든 항목을 주문할 것입니다 그래서 1 2 3처럼 주문했습니다 각 요소에 할당 된 특정 순서가 있으며 순서는 기본적으로 이러한 목록 항목이 순서 목록의 내부에 나타나는 순서입니다

실제로 목록의 스타일을 변경할 수 있습니다 그래서 우리는 숫자가 모두 나열되어 있음을 알게되었습니다 실제로 타입을 변경할 수 있으므로 타입을 지정할 수 있고 타입을 지정할 수 있습니다 그래서 기본 유형은 이처럼 하나가 될 것이지만 대신 1을 말하면 자본은 그걸 의미 할거야 알파벳순으로 듣는 것뿐입니다

그래서 우리는 B와 C가 같습니다 나는 또한 소문자 a를 할 수 있으며 그것은 소문자로 될 것입니다 내가 할 수있는 대문자 I와 로마 숫자가 될 것입니다 또는 소문자 I을 할 수 있습니다 로마 숫자는 소문자입니다

따라서 내부에있는 항목의 유형에 따라 목록의 스타일을 바꿀 수 있습니다 이 목록을 포함시킬 수도 있으므로 목록 항목 안에 목록을 넣을 수 있습니다 그럼이 오렌지 안에리스트를 넣자 내가 또 다른 오와 L을 만들 수 있도록 순서대로 목록을 우리는 이것을 닫을 것이고 다른 목록 항목을 정의 할 수 있으므로 항목 1과 같이 말할 수 있습니다 이제 우리는이 목록에 목록을 올릴거야

그래서 오렌지 목록 항목 내부 우리는 또 다른 목록을 가지고 있으며, 따라서 원하는 목록을 모두 포함시킬 수 있으며 그렇게하는 것이 매우 유용 할 수 있습니다 그래서 정렬 된 목록과 정렬되지 않은 목록은 가장 인기있는 두 가지 유형의 목록입니다 HTML과 90 %는 그 사람들과 만 일할 것이지만 실제로는 다른 목록이 있습니다 존재하고 나는 단지 그것에 대해 너희들에게 말하기를 원한다 인기가 없기 때문에 아마 이걸 보지 않을거야

그러나 적어도 당신은 그것이하는 일을 배우기 위해 일종의 일종의 일을 할 수 있습니다 따라서 설명 목록이라고하며 특별한 유형의 목록입니다 항목을 나열한 다음 해당 항목을 설명 할 수 있으므로 이러한 DL 태그로 설명 목록을 만들 수 있습니다 나는이 것을 닫고 여기에서 우리는 목록 항목을 정의 할 수 없다 설명 용어를 정의 할 것입니다

그래서 이것이 DT가 될 것이고 목록 항목처럼 작동합니다 그래서 여기에 입력 할 수 있습니다 사과와 기술 용어 외에 설명 용어를 설명 할 수 있으므로 설명 용어를 설명 할 수 있으며 DD를 입력하면됩니다 과 우리는 이것을 끝낼 것이고, 여기에서 나는 내가 그렇게 말할 수있을 정도로 사과를 기술 할 수있다 – 그들은 빨간색이나 뭐 그리고 지금 내 웹 사이트로 가면이 사과가 있다는 것을 알 수 있습니다

목록의 항목을 클릭 한 다음 바로 아래에 설명이 있으므로 다른 항목을 추가 할 수 있습니다 오렌지 설명이있는 몇 가지 항목이 있습니다 이렇게하면 원할 경우 유용 할 수 있습니다 설명이있는 목록 항목이 있습니다 그래서 그것들은 목록의 세 가지 기본 유형입니다

내가 대부분 말했듯이, 아마 당신은 단지 순서가 매겨진 목록이나 정렬되지 않은 목록을 사용하고있을 것입니다 또는 적어도 당신이 볼 수있는 가장 인기있는 것이지만 설명 목록은 존재하며 그들은 또한 유용합니다 이제는 HTML로 다른 목록을 만들기 시작할 수 있습니다 이 튜토리얼에서는 HTML로 테이블을 만드는 것에 대해 이야기하고 싶습니다 기본적으로 테이블은 정보를 형식화하고 사용자에게 표시하십시오 그래서 당신이 뭔가를 사용한다면 Microsoft Excel 또는 Google 시트를 사용하면 기본적으로 테이블 작업을 수행하고 있으며 여기서는 HTML에서 수행하는 작업을 여기 방금 여러 테이블의 이미지를 뽑아 보았는데 이것들은 단지 예일뿐입니다

HTML로 테이블을 만들 때 만들 수있는 것들 중에서이 테이블의 정보를 레이아웃 할 수 있습니다 체재 그래서 우리가 테이블을 만들 수있는 방법은 HTML 테이블 태그를 사용하는 것입니다 이것은 복잡한 태그의 일종입니다 따라서 테이블에 들어가는 모든 구성 요소에주의를 기울이고 싶습니까? 그래서이 테이블 태그를 만들고 그런 다음 엔딩 태그가 필요할 것입니다 그래서 여기서 우리는 우리가 들어가기를 원하는 모든 것을 우리 안에 넣을 수 있습니다

테이블과 테이블의 가장 기본적인 레이아웃은 테이블 행을 정의하는 것입니다 그래서 테이블 행은 테이블의 수평 부분과 같습니다 그것은 테이블에 하나의 항목이고 우리는 테이블 행 태그를 사용하여 테이블 행을 정의 할 수 있습니다 그래서 TR 및 TR의 종료 태그 그래서 이것은 수평 행 하나의 엔트리처럼 표현할 것입니다 우리 테이블에 테이블의 개별 데이터를 정의 할 수 있습니다 다른 말로하면 테이블의 각 열에 대한 개별 데이터는 데이터 표라고하는 것을 사용합니다

그래서 테이블 데이터는 이 태그 안에 들어가서 하나의 데이터를 만들 수 있습니다 이걸 전화 할께 그건 내 테이블에 하나의 열을 나타내는 것입니다 그래서 이것은 하나의 열과 같고 다른 테이블 데이터를 넣으면 테이블의 다른 열과 같을 것입니다 그래서 나는 이것을 복사 할 것이고 우리는 그것을 아래에 붙여 넣을 것이다 이것도 전화 할게 과 나는 똑같은 일을 할거야

우리는 하나 더 할 것이고 우리는 그것을 세 가지라고 부를 것입니다 그래서 지금 내 웹 사이트에 올 때 하나의 정보 행에 세 개의 항목 또는 열이있는 기본 테이블을 가져야합니다 그게 제가 가진 바로 그 것입니다 그래서 나는 단지 1 2와 3을 가지고있다

바로 여기에 내가 할 수있는 것은 내 테이블에 다른 행을 삽입 할 수 있다는 것입니다 초기 테이블 행 바로 여기 내가 원한다면 나는 이것을 복사 할 수 있었고 바로 아래에 붙일 수있다 이제 우리가하는 일은 또 다른 행을 정의하는 것입니다 따라서 페이지를 새로 고치면이 두 행이 있음을 알 수 있습니다

그럼 우리는 이것을 4로 바꾸지 않겠습니까? 5 & ​​6 그리고 테이블의 행이 여기에있는 것처럼 형식화되어 있음을 볼 수 있습니다 이 행이 먼저 지정되었으므로 표에 처음으로 표시됩니다 그런 다음이 행을 지정했는데 이제는 두 번째로 표시됩니다 이것이 테이블에 데이터를 추가하는 기본 사항이지만, 한 걸음 더 나아갈 수 있습니다 따라서 데이터를 정의하는 대신 데이터의 헤더를 정의 할 수 있습니다

그래서 나는 다른 테이블 행을 만들거야 과 여기 테이블 행을 유지할 것입니다 그러나 테이블 데이터를 정의하는 대신 테이블 헤더를 정의 할 것입니다 그래서 TD 대신에, 그것은 일이 될거에요

그리고 저는 이것들을 모두 바꿀 것입니다 이제 테이블을 변경하여 테이블의 각 열의 제목이나 제목처럼 보이게 할 것입니다 그래서 나는 num1 num2와 같이 말할 수있다 과 넘버 3 기본적으로, 그들은 세 개의 숫자를 나열해야합니다 굵게 표시되어 있으므로 서로 다른 열 제목을 알면 여기에 각 열에 대한 정보가 있습니다

테이블에 관한 다른 것들 중 하나는 그들이 실제로 유연하다는 것입니다 그래서 내가 여기에 와서 다른 테이블이나 칼럼에 테이블에 추가하고 싶다면, 내가해야 할 일은 단지 우리가 다른 테이블 데이터 엔트리에 넣을 수있는이 사람을 복사해서 3과 1/2처럼 말할 수 있습니다 이제이 세 가지 외에도 테이블에 다른 항목을 추가 할 것입니다 하지만 우리는이 테이블 헤더와 같은 엔트리를 가질 필요가 없습니다 원하는 항목을 넣을 수 있습니다

그리고 테이블에 대한 또 다른 멋진 점은 스스로 크기를 조정한다는 것입니다 그래서이 창을 작게 만들면 이 표의 텍스트가 당신이 테이블을 압축 할 수 있도록 멋지게 감싸는 것처럼 그리고 당신은 여전히이 모든 것을 가질 것입니다 정보 및 그 아래의 정보가 실제 정보를 수용하기 위해 실제로 움직이는 것을 볼 수 있습니다 그래서 테이블은 실제로 매우 반응적이어서 많은 것을 정의 할 수 있습니다 표 행과 원하는만큼 많은 표 데이터가 있으며 실제로 캡션을 추가 할 수있는 또 다른 기능이 있습니다

자막은 표의 전체 제목과 같습니다 그래서 여기 테이블 태그 밑에, 이것들을 넣을거야 캡션 태그 그리고 이것은 테이블의 제목과 같습니다 숫자 목록 과 이제이 테이블에 멋진 캡션이 생깁니다

그래서 당신은 캡션이 테이블 위의 가운데 오른쪽에 오른쪽처럼 앉아있는 것을 볼 수 있습니다 많은 사람들이 무엇을 할 것인가는 헤더처럼 만들 것이므로 헤더를 만들 수 있습니다 – 과 이제 우리 테이블을위한 멋진 큰 제목이 될 것입니다 그래서 정말 좋아 보인다 이것이 테이블 사용의 기본 사항입니다 사람들이하고 싶은 또 다른 일은 테이블 헤드와 테이블 바디를 정의하는 것입니다

HTML의 표를 읽는 사용자 그래서 예를 들어 지금 당장은 테이블이되어야한다는 것은 명백한 것이 아닙니다 표제와 이것이 테이블의 내용과 같다고 여겨지는 것은 명백하지 않습니다 그래서 두 가지를 분리 할 수 ​​있습니다 표 머리와 표 본문을 지정하여 섹션 실제로 오른쪽 바로 아래에 바로 여기 있습니다

이 자막은 테이블 머리를 정의 할거야 그래서 저는 티 헤드와 그 다음 아래에, 나는 단지 내가이 일이라고 말할거야 과 이제 좀 더 들여다 볼 것입니다 그러면 테이블의 헤더에있는 모든 정보가 될 것입니다 이제 우리는 테이블 몸체라고하는 또 다른 태그를 만들 수 있고 그것은 똑같은 일이 될 것입니다

그냥 말할거야 T 몸과 그런 다음 T 바디를 테이블 아래쪽으로 끝낼 것입니다 과 다시 한번, 나는 이런 것들을 들여 쓰기 만 할 것입니다 그래서보기가 더 쉬워졌습니다 그래서 테이블은 머리와 몸으로 배열되어 있습니다

당신은 테이블이 보이는 방식을 바꾸지 않는다는 것을 알게 될 것입니다 그것을 포맷하고 그것을 조금 더 잘 조직하십시오 이제는 콜 스팬 (call span)이라고 불리는 것으로 제어 할 수있는 테이블로 할 수있는 것이 하나 더 있습니다 통화 스팬은 열 범위를 나타냅니다 그래서 예를 들어, 나는 여기에 이걸 가지고있다 권리? 그리고 이것은 테이블에 있습니다

테이블을 볼 때 테이블에서 정확히 하나의 열을 차지한다는 것을 알 수 있습니다 그래서 그것은 하나의 컬럼을 차지하고 두 번째 컬럼에서는 2와 3을가집니다 하지만 난 실제로 하나 이상의 열을 가져 와서 여기 테이블 데이터에 올 수 있고 말할 수 있습니다 호출 간격은 이러한 따옴표와 동일합니다 정수 값을 넣으면됩니다

예제 2와 이제이 테이블 데이터 조각은 테이블에서 두 개의 열을 차지합니다 그래서 지금 보자 페이지를 새로 고침 할 때 하나를 차지합니다 이제 2 명을 차지하고 있습니다 따라서이 항목은 테이블에서 두 개의 열을 차지하고 다른 모든 항목은 측면으로 푸시됩니다

그래서 나는 또한 3과 이제는 이렇게 세 개의 열을 차지하므로 각 열의 수를 제어 할 수 있습니다 개별 테이블 데이터가 사용되어 테이블의 모든 부분을 제어 할 수 있습니다 이것이 테이블 사용의 기초입니다 올바른 태그를 사용하고 있는지 확인하고 싶습니다 나는 적어도 나를위한 테이블은 언제나 같았다는 것을 의미한다

이런 종류의 태그가 너무 많아서 위력을 발휘하지 못한다 그러나 당신이 그 (것)들을 잘 들여 눕히고 당신이 그 (것)들을 편성 해 유지하는 한 당신은 아무 문제도 있어야하지 않는다 이 튜토리얼에서 HTML에서 컨테이너에 대해 이야기하고 싶습니다 이제 HTML의 컨테이너는 기본적으로 다른 태그를 래핑하는 태그 세트 HTML 요소로 시작 태그와 끝 태그를 정의한 다음 태그 내부에 정의 할 수 있습니다 나는 다른 HTML 엘리먼트들을 넣을 것이다 일반적으로 HTML을 작성할 때 래퍼 태그처럼 HTML 태그를 래핑하는 것이 좋습니다 이것은 기본적으로 모든 HTML을 저장하는 태그 집합과 같습니다

보다 고급 HTML을 사용하기 시작하면 CSS와 같은 것을 보게됩니다 기본적으로 웹 페이지의 스타일을 지정하는 데 사용할 수있는 언어입니다 일반적으로 특정 다양한 요소로 스타일링하면 래퍼 요소와 그 내부의 모든 요소에 적용 할 수 있습니다 그 스타일을 이어받습니다 저는 CSS와 스타일링에 너무 몰두하고 싶지는 않지만, HTML로 많은 것을 알고 있습니다

전체 컨테이너와 같은 요소들로 묶는 것이 좋습니다 이 강의에서는 HTML로 된 두 개의 인기있는 컨테이너에 대해 divs와 span에 대해 이야기하고 싶습니다 그리고 그것들은 컨테이너로 사용할 수있는 HTML 태그의 두 세트입니다 div 또는 span 내부에 다양한 HTML 요소를 넣을 수 있습니다 그리고 나서 당신은 내가 들어 오기 전에 그것들을 감싸는 것과 같을 것입니다

Divs와 범위 나는 너희들에게 여러 가지 방법에 대해 이야기하고 싶다 HTML 요소가 표시되고 이것은 div와 span 사이의 차이를 이해하는 사람들에게 중요한 개념입니다 HTML에 대해 이야기 할 때 일반적으로 중요한 개념 따라서 HTML에는 요소를 표시하고 염두에 두는 두 가지 기본 방법이 있습니다 두 개 이상있다

당신은 다른 여러 가지로 들어갈 수 있습니다 HTML을 알고 싶은지를 알아야하는 두 가지 방법과 같은 두 가지 주요 방법은 블록 및 인라인 따라서 CSS는 블록 요소라고하는 것을 표시 할 수 있으며 인라인으로 표시 할 수 있습니다 요소는 이제 CSS 또는 HTML 블록 요소입니다 페이지의 전체 너비를 차지하는 요소 그래서 그들은 페이지의 블록과 같고 인라인 요소는 그들이 필요로하는만큼의 공간으로 서로 나란히 앉아서 인라인 요소를 가질 수 있습니다 그러나 블록 요소가 페이지의 전체 너비를 차지하므로 블록 요소를 서로 바로 옆에 놓을 수는 없습니다

이제 다른 HTML 태그가 다르게 표시됩니다 그래서 일부 태그는 블록 태그입니다 다른 태그는 인라인 태그입니다 단락 대 링크 따라서 HTML 내부에 두 개의 링크를 만드는 경우 링크 만 만들면됩니다

실제로 아무 것도 연결할 필요가 없습니다 정말로 중요하지 않습니다 링크 1과 여기 다른 링크를 만들거야 나는 이걸 복사 할거야 내 페이지를 새로 고침 할 때이 링크를 2라고 부릅니다

이 링크는 실제로 링크가 실제로 서로 옆에 앉아있는 것을 볼 수 있습니다 그래서 링크 1은 링크 2 바로 옆에 앉아 있는데 이것은 두 개의 인라인 요소의 좋은 예입니다 그래서이 링크들은 단지 많은 것을 차지하기 때문에 서로 옆에 앉을 수 있습니다 오른쪽 링크가 필요한 페이지의 공간은이 공간을 필요로합니다 그래서 내가 텍스트와 링크를 더 길게 만든다면 그것은 단지 많은 공간을 차지할뿐입니다 이제 더 많은 공간을 차지해야 할 것입니다

그러나 우리는 여전히 그 옆에 링크를 붙일 수 있습니다 이것들은 내가 인라인이라고 말한 것과 같다 CSS 요소를 사용하여 서로 나란히 배치하거나 좋은 비유로 같은 줄에 앉을 수 있습니다 이제 두 개의 HTML 단락을 만들겠습니다 그래서 HTML 단락이 블록 요소의 좋은 예일 때, 나는 단락 하나를 만들 것입니다

그럼 여기서 다른 단락을 만들거야 과 사실 이걸 갈거야 그래서 당신이 알아 차릴 수있는 것은이 링크 들과는 달리 그들이 서로 옆에 앉아있는 방식입니다 이 두 단락은 그렇게 할 수 없을거야 그래서 우리는 단락 1을 여기에서 볼 수 있습니다

이 파일에는 2 단락을 기입하기에 충분한 공간이 있지만 거기에 가지 않을거야? 문제가되지 않는 것처럼 제 1 단락을 얼마나 작게 만드는지는 중요하지 않습니다 2 단락을 가기 위해 얼마나 많은 공간이 여기에 있습니까? 이것이 블록 요소이기 때문에 절대로 넘어 가지 않을 것입니다 그래서 블록 요소들 내가 말했듯이, 그들은 페이지의 전체 너비를 차지한다 그래서 그들은 다음 요소로 하여금이 인라인 요소 아래로 가도록합니다 그러지 마

따라서 이러한 인라인 요소를 사용하면 파일에서 바로 옆에 요소를 저장할 수 있습니다 HTML 블록의 두 가지 주요 디스플레이 유형의 차이점은 그 개념을 이해하는 한 인라인 디스플레이는 블록 요소의 개념과 인라인 요소를 사용하면 span과 div가 무엇에 사용되는지 이해할 수 있습니다 따라서 span과 div의 큰 차이는 span이 인라인이라는 것입니다 컨테이너와 div는 블록 컨테이너이므로 스팬을 만들 수 있습니다이 스팬 태그를 사용하면됩니다 그리고 우리는 끝을 낼 수 있습니다

여기에 몇 개의 텍스트를 넣을 수 있습니다 그래서 한 번 스팬을 말한 다음 다른 스팬을 여기 아래로 만듭니다 Span two와주의 할 점은 페이지를 새로 고침 할 때입니다 이 두 기간은 즉,이 두 기간의 요소 또는 텍스트가 서로 바로 옆에 표시됩니다 권리 이 범위는 인라인 컨테이너입니다

두 개의 div를 만들면 div를 만듭니다 과 나는 똑같은 짓을 할 것이다 그래서 여기에 텍스트를 넣을 것입니다 우리는 div 1과 div 2를 말할 수 있습니다 과 이제 페이지를 새로 고침하면이 div가 다른 행에 있음을 알 수 있습니다

따라서 인라인 요소 인 스팬과는 다릅니다 이 div는 블록 요소입니다 따라서 div는 블록이므로 같은 줄에있을 수 없습니다 div 1은 화면의 전체 너비를 차지합니다 그러나이 범위는 줄을 서기 때문에 가능합니다

div와 span의 큰 차이점은 div가 인라인 또는 블라인드 요소는 블록 요소이며 인라인 요소에 걸쳐 있으며 이들은 모두 컨테이너입니다 따라서 span과 div를 컨테이너로 사용할 수 있습니다 그래서 이것들은 텍스트를 보유하거나 CSS에 들어가기 시작할 때 다른 HTML 요소처럼 유지됩니다 실제로 적용 할 수있는 HTML 스타일을 지정하는 방법은 다음과 같습니다 이 기간에도 스타일을 지정합니다

따라서 스핀 div를 사용할 수있는 또 다른 이유는 컨테이너입니다 그러나 div는 블록 요소입니다 그래서 당신이 div에 넣는 것은 페이지의 블록 요소처럼 될 것입니다 이것이 div와 span의 기본 사용법입니다 너는 이것들이 많이 사용 된 것을 볼거야

아마 div가 span보다 약간 더 많이 사용된다고 생각합니다 단지 사촌입니다 span을 사용하는 상황은 div보다 좀 더 구체적입니다 일반적으로 HTML과 같이 전체 컨테이너를 정의하는 경우 HTML로 컨테이너를 사용하는 사람들을 볼 때 div와 많은 시간을 사용하기를 원할뿐입니다 그들은 div에 물건을 포장 할거야

div는 블록 요소라는 것을 기억하십시오 그래서 div 안에 들어가는 것은 화면의 전체 너비를 차지할 것입니다 블록 요소이므로 자체가 너비를 차지합니다 이 튜토리얼에서는 HTML로 입력 태그를 사용하는 것에 대해 이야기하고 싶습니다 이제 입력 태그는 기본적으로 페이지에 요소를 추가 할 수있게합니다

사용자가 정보를 입력 할 수있는 곳 그래서 이들은 텍스트 박스 또는 텍스트 영역과 같은 것들입니다 확인란 라디오 버튼을 사용하면 사용자가 정보를 입력하기 위해 상호 작용할 수있는 사이트의 모든 요소를 ​​알 수 있습니다 이제 HTML에서 이러한 요소를 정의 할 때 catch가 있습니다 우리는 실제로 그것들을 기능화하지 않고 있습니다 그래서 내가 HTML로 정의했기 때문에 내 웹 사이트에서 텍스트 상자처럼 정의했다면 텍스트 상자가 있기 때문에 다른 사람이 입력 할 수 있음을 의미하지는 않습니다

정보와 당신은 그걸로 물건을 할 수있을거야 이 텍스트 상자를 통해 사용자로부터 정보를 얻고 싶습니다 JavaScript라는 언어를 사용해야합니다 하지만이 과정의 범위를 벗어납니다 우리는 단지 HTML을 배우려고 노력하고 있습니다

그래서 저는 여러분에게 실제 HTML을 보여줄 것입니다 텍스트 상자 및 텍스트 영역과 같은 요소를 정의하는 데 사용할 수있는 요소 및 그런 다음 원하는 경우 자바 스크립트를 배우고 그로부터 의견을 얻는 방법을 배울 수 있습니다 그래서 여기 아래로 나는 첫 번째 입력과 대부분의 모든 입력을 정의 할 것이다 같은 태그를 사용할거야

그래서이 입력 태그를 사용하여 입력을 말할 수 있고이 입력 태그를 전달해야합니다 HTML 속성 그래서 나는 그것을 줄 필요가있다 우리가 말할 수있는 정보가 무엇인지 말해 줄 필요가 있습니다 입력하고 싶습니다 HTML로 받아 들일 수있는 다양한 입력 유형 목록이 있습니다

하지만 가장 기본적인 것이 텍스트 일뿐입니다 그래서 이것은 기본적으로 우리를위한 텍스트 상자를 만들 것이며 입력은 하나의 태그 그것은 하나의 태그와 같습니다 그래서 우리는 여기서 끝내고 있습니다 다른 태그가 마음에 들지 않습니다 내 페이지를 새로 고침 할 때 다른 끝 태그가 없습니다

우리는이 텍스트 상자가 여기에 있다는 것을 보게 될 것입니다 그리고 저는 실제로 여기에서 원하는 것을 입력하기 만하면됩니다 기능적인 텍스트 상자가 될 것입니다 내가 할 수있는 또 다른 일은 암호를위한 텍스트 상자를 만드는 것입니다 그래서 웹 사이트에서 실제로 일반적으로 사용되는 것은 사용자가 암호를 입력하도록하는 것입니다

할 수있는 일은 실제로 텍스트 상자에 입력되는 텍스트를 숨길 수 있다는 것입니다 그래서 타입 텍스트를 말하기 대신에 타입 패스워드를 말할 수 있습니다 그러면 제가 여기 올 때 어떻게되는지보실 수 있습니다 나는 이 텍스트 상자에 정상적으로 입력 할 수 있지만 여기에 입력하면 이러한 것들을 다룹니다 그래서 지금은 작은 점들과 같아서 거기에 입력 된 내용을 실제로 볼 수 없습니다

그래서 이것은 텍스트 상자에서 입력을 숨기는 HTML과 비슷합니다 우리가 할 수있는 또 다른 일은이 텍스트 상자 안에 기본 내용을 정의하는 것입니다 value 애트리뷰트를 정의하고 이제는 디폴트 값을 정의 할 수있다 너를 입력해라 사용자 이름? 어쩌면 이것은 사용자 이름 프롬프트와 같을 것이고, 이제이 텍스트가 자동으로 포함되어있는 것을 보게 될 것입니다

아무것도하지 않아도 텍스트 상자 안에 이제 저는 또한 a라는 것을 정의 할 수 있습니다 텍스트 영역과 텍스트 영역은 입력과 비슷하지만 하나의 단일 행을 갖는 대신 우리는 텍스트를 추가 할 수있는 거대한 블록을 가질 수 있습니다 따라서 이것은 기술적으로 입력 태그가 아닙니다 자체 태그 유형을 가지고 있기 때문에 방금 호출되었습니다 텍스트 영역과 여기에 우리는 두 개의 태그를 만들 수 있습니다

따라서 닫는 태그가 필요할 것입니다 이 텍스트 영역은 텍스트를 넣을 수있는 큰 것입니다 이 두 블록과는 달리 이 텍스트 영역은 조금 더 크고 우리는 실제로 크기를 조정하여이 텍스트 영역을 가져 와서 제 페이지에서 훨씬 더 커졌습니다 그런 다음 원하는 내용을 입력 할 수 있습니다 그것은 기본적으로 많은 텍스트를 입력 할 수있는 장소가 될 것입니다

텍스트 영역에 대한 일부 속성을 정의 할 수도 있습니다 그래서 여기에 지정된 수의 행이나 열을 줄 수 있습니다 그래서 여기 로즈는 그리고 이제 우리는 아마 우리가 10 열처럼되기를 원할 수 있다고 말할 수 있습니다 우리는 열 행이 추락하고 있다는 것을 기억하십시오 열 및 우리가 이것을 30 개로 만들지 만, 정말 분명합니다 그리고 이제이 텍스트 영역은 그처럼 크게 커질 것입니다

그래서 가로 세로 30 칸, 세로 10 칸입니다 알다시피, 그곳에서 어떻게 작동하는지보고 싶을뿐 아니라 텍스트 이미지의 기본 텍스트도 정의 할 수 있습니다 그래서 이 두 텍스트 영역 태그 안에는 입력 할 수있는 것이 있습니다 ~에 들어가다 단락을 클릭하면 텍스트가 기본적으로 여기에 표시됩니다 그래서 그 부분은 텍스트 영역이며 꽤 재미 있습니다

다른 커플이있어 우리가 볼 수있는 입력 태그가있어서 받아 들일 수있는 다양한 유형의 입력이 있습니다 그리고 저는이 가치를 실제로 제거 할 것입니다 텍스트와 같은 것을 받아들이는 것 외에도 날짜와 같은 것을 받아 들일 수 있습니다 그래서 많은 시간에 당신은 생일이나 어떤 것을 입력하는 것처럼 누군가를 가질 수 있습니다

그리고 당신은 지금 볼 수 있습니다 브라우저는 우리에게이 작은 날짜 입력과 같이 표시하고 있습니다이 작은 달력 위젯을 얻으면이 모양이 달라집니다 다른 브라우저에서 그러나 대부분이 입력 유형을 사용하는 경우 사용자가 입력 할 내용을 제어 할 수 있습니다 그래서 날짜 이외에 우리는 이메일과 전자 메일은 실제로 텍스트 상자와 매우 비슷합니다

우리는 또한 범위처럼 할 수 있습니다 그래서 이것은 숫자의 범위와 같을 수 있습니다 그리고 당신은 우리가이 작은 슬라이더를 여기에서 볼 수 있습니다 우리는 또한 파일을 할 수 있습니다 따라서 사용자가 파일을 업로드하기를 원하는 웹 사이트에서 많은 시간을 보내고 실제로이 파일이 내 작은 파일을 열어 놓는 것을 볼 수 있습니다 브라우저를 클릭하면 열어 볼 수 있으며 파일의 이름을 가져 오는 것이 좋습니다

자바 스크립트 나 다른 프로그래밍 언어가 없다는 것을 알 것입니다 실제로 이러한 파일을 업로드 할 수는 없지만 실제 입력을 제공 할 수 있음을 지적하십시오 이 파일에 대한 프롬프트를 표시하고 다양한 버튼 유형을 정의하여 에이 체크 박스와 여기 우리는 라디오 박스를 정의 할 수있는 작은 상자를 가지고있다 사실, 저는 여러분에게 체크 박스와 라디오 버튼의 차이점을 보여주고 싶습니다

두 개의 확인란이있는 경우 같은 시간에 둘 다 확인할 수 있습니까? 그래, 두 개의 라디오 버튼이 있다면 그리고 그 이름에 속성이라는 이름을 붙이면 라디오 버튼에 이름을 붙여서 말할 수 있습니다 버튼, 우리가 똑같은 이름을 줄거야 한 번에이 라디오 버튼 중 하나를 실제로 클릭 할 수 있습니다 따라서 이름이 같은 경우 한 번에 하나씩 만 클릭 할 수 있습니다 그래서 체크 박스 그래도 같은 이름을 가진 한 라디오 버튼으로 원하는만큼 클릭 할 수 있습니다

한 번에 하나씩 만 확인할 수 있습니다 다른 버튼을 정의하여 제출 버튼처럼 정의 할 수도 있습니다 HTML 폼과 같은 폼이 있다면 사람들이 가지고있는 인기있는 버튼입니다 제출 버튼을 정의하여 제출을 말할 수 있으며 이제 제출을 위해이 작은 버튼을 얻을 것입니다 실제로 이러한 다양한 입력 유형이 있으며 여기에이 웹 페이지가 열려 있습니다

에 대한 웹 페이지입니다 W3schools 및 기본적으로 그냥 HTML에 대한 모든 입력 형식을 정의합니다 그래서 주소는 wz 학교 통신 네 슬래시 ​​태그 s입니다 / att는 밑줄 문자를 밑줄 쳤다 이 좋은 목록이 있습니다 그리고 여러분이 가질 수있는 다양한 유형의 입력을 모두 나열합니다 그래서 당신은 버튼 체크 박스 색 날짜 파일 텍스트 URL과 같은 것을 볼 수 있습니다

정보를 입력하는 데 사용할 수있는 텍스트 상자 나 단추 또는 작은 요소와 같은 유형을 알고 있습니다 HTML에서는 하나 이상의 HTML 요소에 대해 이야기하고 싶습니다 양식이라고 불리는 양식은 기본적으로 이러한 모든 입력을 저장하는 데 사용되는 요소입니다 그래서 일반적으로이 양식 요소를 사용하는 사람들을 보면 퍼팅 할 것입니다 이 입력 태그는 여기 안에 있습니다

따라서 폼은 사용자 입력을 묶는 래퍼와 비슷합니다 전에 항상 사용자로부터 동의 입력을 받기를 원할 때처럼 말하기 전에 HTML 외에도 다른 언어가 필요할 것입니다 일반적으로 양식이 편리 할 것입니다 양식을 사용하면 웹 서버를 좋아할만한 정보를 제공 할 수 있습니다 그러나 지금 당장 걱정할 필요는 없습니다

양식 태그가 많은 시간을 갖고 있다는 사실을 알고 있으면 이러한 다양한 입력에 대한 래퍼 역할을합니다 잘하면 너희들, 너는 그걸로 뭔가 알아 냈어 이러한 다양한 입력 태그에 대해 약간의 소개를 할 수 있습니다 이제 사용자가 웹 사이트의 스타일을 지정하여 사용자가 정보를 입력 할 수 있습니다 이 튜토리얼에서는 iframe을 다음과 같이 사용하는 방법에 대해 설명 할 것입니다

HTML iframe은 실제로 다른 웹 사이트를 표시 할 수있는 HTML 요소입니다 웹 페이지의 내부에서 완전히 다른 웹 사이트를 자신의 웹 페이지에 효과적으로 포함시킬 수 있습니다 매우 멋집니다 따라서 사이트의 어느 곳에서나 iframe 태그를 만들 수 있으며 그것은 바로 그 프레임입니다 그런 다음이 속성을 전달해야합니다

어떤 출처이고 이것은 당신이 퍼 뜨리기를 원하는 웹 사이트와 같을 것입니다 내 경우에는 왜 우리는 초안 아카데미 웹 사이트를 작성하지 않습니까? 과 이 iframe 태그를 닫을 수 있습니다 닫는 iframe 태그가 필요할 것입니다 따라서 여기에 하나의 태그가 필요할 것입니다 이제이 iframe 태그 내부에 일부 텍스트를 넣을 수 있으며이 텍스트는 귀하의 웹 사이트에있는 사용자가 표시 할 텍스트입니다

iframe을 볼 수 없습니다 그래서 iframe을 지원하지 않는 브라우저가 iframe을 지원하지 않습니다 또는 iframe을 볼 수없는 곳에서 일부 옵션을 토글 한 것일 수도 있습니다 기본적으로이 코드는 볼 수없는 경우에 표시됩니다 이제 내가 여기로 향하면이 페이지를 새로 고칠 수 있고이 작은 창 안쪽에 초안 아카데미 홈페이지가 표시되지만 초소형 원하는 경우 여기로 내려와이 iframe의 크기를 조정하여 너비 특성 및 우리는 그것을 천 가지로 만들 것이고 높이 속성을 부여 할 수도 있습니다 그리고 우리는 이것을 800처럼 만들 수 있습니다

이제이 iframe은 훨씬 더 커야합니다 이제 전체 웹 사이트를 볼 수 있습니다 그래서이 웹 사이트는 문자 그대로 내 웹 사이트에 삽입되어 웹 사이트의 모든 다른 페이지로 이동할 수 있습니다 정상적인 웹 사이트처럼 작동하지만 웹 사이트 내부에 있습니다 당신이 할 수있는 또 다른 일은 경계를 제어 할 수 있다는 것입니다

이 iframe을 여기에서 보면, 조금 닮은 것을 볼 수 있습니다 여기 경계선 이 작은 회색 막대와 같습니다 보기 힘들지 만 그걸 없애고 싶다면 우리가 말할 수있는 또 다른 속성이 있습니다 프레임 테두리는 0과 같아서 이제는이 작은 테두리를 제거합니다

따라서 iframe은 웹 사이트 내부에 더 많이 삽입 된 iframe은 정말 훌륭하며 모든 웹 사이트에 iframe을 사용할 수 있습니다 그러나 많은 웹 사이트가 큰 웹 사이트처럼 많은 일을 할 수 있다는 사실은 다른 웹 사이트를 막을 것입니다 웹 사이트가 자신의 웹 사이트를 iframe으로 사용하지 못하게합니다 내가 이걸 만들려고한다면 Amazon과 같은 iframe, 예를 들어 Amazon com 그런 다음 페이지를 새로 고침하면 아무것도 표시되지 않습니다 맞아, 아마존을 iframe으로 사용할 수 없다

그 이유는 웹 사이트가 iframe으로 사용되지 못하도록 설정되어 있기 때문입니다 좋은 이유가 있습니다 나는 그 문제 중 하나 또는 iframe은 누군가 다른 웹 사이트가 다른 웹 사이트로 그 사람의 웹 사이트 그래서 나는 웹 사이트를 만들 수 있고 단지 내 웹 사이트에 아마존의 웹 사이트의 iframe을 가지고 있고 사람들을 속일 수있다 내 웹 사이트를 방문하면 아마존이라고 생각할 것입니다 그래서 그들은 아마존에있을 것입니다

이것은 멋지다 한편, 그들은 내 웹 사이트에 있으며 자신의 데이터를 갖고 싶거나 그들에게 악의적 인 것을하는 것을 알고 있습니다 그래서 이것이 사람들이 iframe을 갖고 싶어하지 않는 이유 중 하나입니다 하지만 내 경우에는 트래픽 Adam e-comm을 좋아하는데, 사람들에게 내가 허락하는 데 아무런 문제가없는 것처럼 그것이 나에게 유용하다 예, iframe의 기본 사항입니다 내가 말했듯이 너도 알지

크기를 조정하여 주변을 이동할 수 있으며 웹 사이트에서 실제로 유용한 기능이 될 수 있습니다 이 튜토리얼에서는 HTML의 메타 태그에 대해 이야기하고자합니다 그래서 내 웹 사이트의 머리에 여기에이 메타 태그가 있다는 것을 보게 될 것입니다 그리고 이것은 일반적으로 대부분의 메타 태그에 포함되는 메타 태그입니다 HTML 및 문자 세트 바로 내 파일의 문자 집합을 지정하는 중입니다

이 메타 태그 이외에 우리는 또한 다른 것을 정의 할 수있다 메타 태그와 메타 태그는 HTML 파일의 헤드에 있으며 헤드는 기본적으로 파일에 대한 정보 또는 파일과 구성이 다른 것과 같은 메타 태그가 사용됩니다 메타 데이터 따라서 메타 데이터는 데이터에 대한 데이터와 유사하므로 메타 태그를 사용하여이 특정 웹 페이지에 대한 정보를 정의 할 수 있습니다 다른 메타 태그 중 일부를 보여 드리겠습니다 사용 방법, 유용한 이유 등을 이야기하겠습니다

새로운 메타 태그를 만들겠습니다 우리는 이것을 이름, 그래서 이름을 알려 주면 전화 할거야 설명이 이렇게 우리의 웹 사이트에 대한 전체 설명처럼 여기에있을거야 나 입력 할거야 콘텐츠가 메타 태그의 콘텐츠가 될 것이므로 여기에 입력 할 수 있습니다

귀하의 설명 및 대부분의 웹 사이트는 설명이있을 것이며 이것은 예를 들어 검색 엔진에서 사용할 수있는 것입니다 귀하의 웹 사이트가 무엇에 관한 것인지 파악할 수 있도록 도와주세요 그래서 당신이 당신의 웹 사이트가하고있는 것에 대한 좋은 설명을 주면 검색 엔진은 그 정보를 거의 페이지가 어디에 있어야하며 페이지 순위와 물건을 좋아하는지, 그리고 사람들이 일반적으로 말하는 것처럼 보이는 일반적인 규칙을 생각해보십시오 설명을위한 백 육십 오 문자는 좋은 종류와 같습니다 음, 설명이 너무 길어서 같은 설명을 200 자로 말하면 대부분의 검색 엔진이 그냥 무시해 버릴 수도 있고, 심지어 당신의 검색 순위와 마찬가지로 당신을 처벌 할 수도 있습니다

설명은 매우 중요합니다 당신이 그것을 간결하게 유지하는지 확인하십시오 우리가 사용할 수있는 또 다른 메타 태그는 저자를 위해 메타 이름을 말할 수 있고 이것은있을거야 저자 그리고 실제로 나는이 태그를 닫지 않았다고 생각합니다 네, 그럼 이것들을 모두 닫을 수 있습니다

그런 다음 다시 콘텐츠를 정의 할 수 있습니다 그래서 이것은 저자가 누구인지 등고선을 정의 할 것입니다 또한 몇 가지 키워드를 정의 할 수 있습니다 그래서 이게 될거야 키워드 및 다시 내용 그래서 쉼표로 구분 된 목록처럼 키워드를 저장할 수 있도록 당신이 말할 수있는 HTML, 알지? 지도 시간 너는 알고있다

교통 아담은 그런 물건을 먹는다 따라서이 긴 키워드 목록을 정의하는 것입니다 그리고 다시, 검색 엔진이 귀하의 사이트를 돕기 위해 그러한 키워드를 사용할 수있는 것처럼 이 키워드 태그가있는 것들 중 하나가 많은 사람들이 그곳에 여러 개의 키워드를 집어 넣고 그들의 페이지를 Google 또는 Yahoo!에서 순위를 얻으세요 인위적으로 이렇게 모든 페이지가 순위가 매겨 지듯이 그 사이에, 그들은 키워드 꼬리표에 인 키워드와 무관했다 그래서 아마도이 시점에서 대부분의 검색 엔진을 생각합니다 키워드 태그를 보면서 신경 쓰지 마세요

그러나 우리가 사용할 수있는 메타 태그와 다른 메타 태그가 있으면 좋을 수 있습니다 그리고 이것은 실제로 매우 중요하며, 이것은 귀하의 웹 사이트가 어떻게 표시되는지를 제어합니다 우리는 이름과 그냥 뷰포트라고 불리는데 여기에는 몇 가지 복잡한 옵션이 있습니다 그래서 우리는 단지 내용을 말할 수 있고 당신은 타이핑하기를 원합니다 기본적으로 그냥 이렇게 우리가 너비와 너비를 정의하는거야

장치 너비 및 그때 머리 글자 척도 10과 동일 따라서 HTML 파일을 볼 때 HTML 파일에서 볼 수있는 무언가입니다 기본적으로 HTML 파일은 컨트롤입니다 당신은 어떠한가요 웹 사이트가 다른 기기에 표시됩니다 그래서 여기에 여기가 없으면 모바일 장치처럼 웹 사이트를 보러갔습니다

그런 다음 웹 사이트는 데스크톱에서와 같이 표시됩니다 그래서 정말 축소되고 정말로 멀리 떨어져있는 것처럼 보이고 많은 사람들이 자신의 웹 사이트를 디자인 할 것입니다 모바일에서 실제로보기 이 라인업을 여기에 포함시키지 않았다면이 웹 사이트를 모바일 장치에서 실제로보기 좋게 디자인 한 것과 같습니다 그 다음에 휴대 기기에서 웹 사이트를 표시하는 경우 해당 휴대 기기에 웹 사이트가 표시되지 않습니다 데스크톱은 실제로 축소 된 것처럼 보이기 때문에 좋지 않습니다

따라서 장치 너비와 같이 너비를 정의합니다 그래서 그것을보고있는 현재의 장치는 HTML이 스크린의 크기와 비슷한 종류가되도록합니다 그래서 이것은 또 다른 중요한 메타 태그입니다 그래서 이것들은 기본적인 것들입니다 귀하의 웹 사이트에서 사용할 수있는 메타 태그가 있으며, Google 검색 및 일종의 검색을 더 할 수있는 몇 가지 방법이 있습니다 가능한 모든 메타 태그와 마찬가지로 하지만 4 ~ 5 개의 메타 태그가 웹 사이트에서 가장 많이 사용되고 가장 중요하다고 생각합니다

이봐 요, 고마워 동영상을 즐긴 경우 좋아요를 남겨주세요

웹에플리케이션 만들기 – HTML 기본문법

이번시간에는 웹을 위한 언어인 HTML대해서 알아보겠습니다 이 HTML 이라는 것은 웹에서 주인공과 같은 역할을 하는 아주 중요한 언어입니다

그전에 지금까지 계속 살펴봤던 서버와 클라이언트의 관계를 또 한 번 살펴 보죠 이거는 아무리 많이 살펴봐도 부족하지 않을만큼 중요한 내용입니다 웹브라우저에서 웹서버에게 무엇을 하나요? 요청을 하죠 어떤 웹페이지를 원한다라고 요청을 하면 그 웹서버는 웹서버에 저장 되어 있는 웹페이지를 읽어서 그것을 응답합니다 그러면 웹브라우저에는 HTML이 이렇게 전달이 되게 되구요 그 결과 HTML에 적혀 있는 대로 이렇게 내용이 화면에 출력되게 되는 겁니다 그러면 이 HTML이 무엇인가에 대해서 이번 시간부터 집중적으로 살펴 볼 건데요 우선 HTML은 Hypertext Markup Language 의 약자입니다 즉 HTML이라고 하는 것은 Hypertext Markup Language의 약자라는 것이죠 그러면 여기서 첫 번째 등장하는 이 하이퍼 텍스트(Hypertext)라고 하는 것은 무엇일까요? 하이퍼 텍스트(Hypertext)라는 것은 문서와 문서가 링크로 연결 되어있다라는 겁니다 아시다시피 웹페이지는 어떤 링크를 클릭하면 다른 문서로 이동을 하게 되죠 그것은 문서와 문서가 링크로 연결 되어 있다라는 것이고 바로 그런 형태의 문서 시스템을 우리가 하이퍼 텍스트(Hypertext)라고 부릅니다

그리고 그 하이퍼 텍스트(Hypertext)를 고안한 사람이 바로 팀 버너스리라고 하는 이분이 바로 이 하이퍼 텍스트(Hypertext)를 만든 사람인 것이죠 그래서 우리가 HTML이라고 하는 언어의 첫 번째 이름이 하이퍼텍스트(Hypertext)라는 것을 통해서 알 수 있는것은 이 HTML에 있어서 가장 중요한 게 무슨 뜻이겠어요? 바로 하이퍼 텍스트(Hypertext)라는 특징이라는 것이고 다른 말로는 링크라고 볼 수가 있다는 것이죠 그리고 바로 이 링크로 인해서 문서와 문서가 그물망처럼 연결되서 링크로 연결 된 하나의 거대한 정보 덩어리를 만든 것이 바로 웹이라고 할 수 있습니다 그래서 링크는 HTML의 본질이라고 할 수 있는 거에요 그리고 HTML은 이 웹의 중심이라고 할 수가 있기 때문에 이 HTML의 본질이 웹의 본질이라고도 볼 수 있습니다 그만큼 링크라고 하는 것은 굉장히 중요한 것이라는거죠 HTML이 오늘날은 여러 가지 일을 해야 하기 때문에 굉장히 복잡해져있는 상태이긴 합니다 하지만 거기 있는 것들을 우선순위 순으로 이렇게 쳐버리면 마지막까지 남게 되는 것이 바로 링크라는 것이에요 그것은 세월의 변화와는 상관없이 똑같이 링크는 가장 중요한 것으로 남아있는 것입니다 그다음에 HTML은 하이퍼 텍스트(Hypertext) 그리고 마크업 랭귀지(Markup Language)라고 말씀을 드렸죠 그러면 마크업 랭귀지(Markup Language)가 무엇인가를 살펴보겠습니다

여기서 랭귀지(Language) 라는 말이 나오는데요 우리가 랭귀지(Language) 즉 언어가 무엇인가는 이전 시간에서 살펴 봤어요 즉 컴퓨터도 알아들을 수 있고 사람도 알아들을 수 있는 약속이 언어라고 말씀을 드렸죠 여기에서 이 HTML이라고 하는 언어는 좀 더 정확하게는 사람도 알아 들을 수 있고 웹브라우저도 알아들 수 있는 언어라고 이야기를 한다면 좀 더 정확한 표현이 되는 겁니다 그러면 마크업(Markup)이라는게 무엇인가를 지금부터 살펴 보죠 마크업(Markup)을 이해하기 위해서는 태그(Tag)라고 하는 개념을 먼저 이해를 하셔야 됩니다 여러분 태그(Tag)가 뭔가요? 옷을 사면 이런 게 붙어있죠? 바로 여러분이 입고 있는 그 옷을 설명을 하는 정보가 태그(Tag)입니다 즉 옷이라고 하는 것의 원산지 또는 세탁 방법 또는 치수 이런 것들을 기술해서 그 옷에 대해서 자세한 정보를 소비자에게 알려주는 것이 바로 태그(Tag)인데요 HTML의 태그(Tag)도 정확하게 그것과 목적이 같습니다

예를 들어 보죠 여기 ‘안녕하세요 생활코딩입니다’라고 하는 텍스트를 웹페지이에 표현하고 싶다고 생각 해보세요 그런데 '생활코딩'이라는 저 텍스트가 중요한 단어이기 때문에 보는 사람이 저것이 중요하다라는 것을 인식하기 위해서 저렇게 강조표시를 하고 싶다고 하면 그러면 우리가 어떻게 HTML코드를 작성해야 되냐면 바로 이렇게 하시면 됩니다 ‘안녕하세요

생활코딩입니다’ 인데요 그 중에서 <strong> 이라고 하고 꺽쇄로 둘러싸여 있는 코드를 ‘생’자 앞쪽에 위치 시킵니다 그리고 </strong>이라고 하는 코드를 ‘딩’자 뒤에 위치시키게 되면 앞쪽에 있는 시작 태그와 뒤쪽에 있는 끝 태그사이가 바로 strong으로 감싸져있기 때문에 strong의 의미인 중요하다 강조해야 된다라고 하는 의미에 따라서 '생활코딩'이라고 하는 저 텍스트는 중요한 의미를 갖는 텍스트로 사용이 되게 됩니다 바로 이 맥락에서 시작태그와 끝태그 사이에 있는 '생활코딩'을 콘텐츠라고 불러요 그러면 한번 실습을 해 보죠 우리가 직접 이 코드를 작성해서 정말 그렇게 표시되는 지를 살펴 보겠습니다 자 우선 메모장을 엽니다

메모장을 이렇게 열었구요 그리고 이 파일을 저장을 하는데요 어디다 저장을 해야지 웹서버를 통해서 웹브라우저에서 읽을 수 있을까요? 다큐먼트 루트(Document root)에 저장을 해야 겠죠 여기서 htdocs 디렉토리 에다가 저는 ex_html_1html 이라고 입력하겠습니다 파일의 이름은 어떤 것으로 정해도 상관없죠

확장자만 맞추시면 됩니다 다음에 파일 형식은 모든 파일로 하고 그리고 인코딩은 UFT-8이라고 지정을 합니다 그리고 저장버튼을 누릅니다 그 다음에 이렇게 적으세요 <!DOCTYPE html> 이렇게 입력합니다 이게 무엇인지는 지금은 모르셔도 되기 때문에 그냥 여러분들한테는 몰라도 되는 것으로 일단은 재껴 두겠습니다 그 다음에 <html> 그리고 이렇게 </html>은 또 한 번 써 줍니다 그런데 이번에는 앞에 슬래쉬(/)가 있어요

이것도 지금은 모르셔도 되는 내용입니다 곧 알게 되는 부분이니까 너무 궁금해 하지 않으셔도 됩니다 <body>도 마찬가지로 똑같이 적어줍니다 그 다음에 <head>도 이렇게 똑같이 적어 주구요 그리고 저 <head>와 </head>사이에 탭 키를 누르는데 이 탭 키를 누르는 이유는 사람이 보기 좋게 하기 위해서입니다 그리고 <meta charset= 이라고 입력하고, "utf-8"> 이라고 입력합니다

이 내용도 여러분들이 지금 무슨 뜻인지 모르셔도 괜찮습니다 그리고 뒤에는 이렇게 처리를 해 주구요 여기까지는 여러분들이 모르셔도 되는 부분입니다 지금으로서는요 그리고 여기 있는 내용들은 다 여러분들이 다 뒤에서 어떤 의미인지 알게 될 부분입니다 지금은 설명 드리는 지금 이걸 설명 드리는 건 효율적이지 않기 때문에 일단은 모르는 것으로 남겨두세요 그리고 이제 <body>라고 되어 있는 이곳에 우리가 실습할 내용들을 집어 넣도록 할 거에요

여기에다가 '안녕하세요 생활코딩입니다' 라고 제가 이렇게 적었습니다 그리고 여기에다가 '생활코딩' 앞에다가 <strong>, </strong> 이렇게 입력했어요 그리고 이 문서를 제가 브라우저를 통해서 열어 보겠습니다 ex_html_1html 파일이었죠? 보시는것처럼 '안녕하세요

생활코딩입니다'에서 '생활코딩'이라는 이 텍스트가 진하게 표시 된 걸 볼 수 가있어요 아까 우리가 작성했던 이 코드와 비교를 한번 해 보죠 여기 보시는것처럼 '안녕하세요 생활코딩입니다'에서 여기 <strong>과 </strong>으로 감싸져있는 이 '생활코딩'이라는 텍스트가 위에 보시는 것처럼 진하게 표시된 것을 볼 수 있습니다 자 이것을 통해서 알 수 있는 것은 바로 이 <strong>이라는 것과 이 </strong>이라고 하는 것 사이에 있는 것이 strong 즉 강조된다라는 것을 우리가 브라우저에게 명령하고 있는 거에요

그래서 이 strong 꺽쇄로 시작해서 꺽쇄로 닫히는 strong을 태그라고 하고 이것 역시도 태그라고 합니다 그런데 앞에 있는 태그는 태그가 시작됐다라는 뜻에서 열린태그라고 하고요 그리고 뒤에 있는 태그는 이렇게 슬래쉬</>를 붙여서 이것이 닫히는태그라는 것을 의미하게 됩니다 그래서 이런 태그를 보통 끝태그라고 합니다 시작태그와 끝태그 사이에 있는 이 '생활코딩' 이라는 콘텐츠가 중요하다라는 것을 브라우저에게 알려주는 태그를 우리가 사용을 해본 겁니다 그 결과로 브라우저는 중요하다고 표시된 부분 진하게 표시해 주고 있는 것이죠

이것이 태그의 기본적인 HTML의 가장 기본적인 문법인데 사실HTML은 이것보다 훨씬 더 복잡하진 않습니다 여기서 조금만 더 몇 가지를 추가하면 그게 HTML이에요 HTML은 배우기가 매우 쉬운 장점이 있어요

웹에플리케이션 만들기 – HTML 실습1 : 모델링을 HTML로 만들기

이번 시간은 우리가 이전에 배웠던 HTML에 대한 기초적인 어떤 문법적 이해를 바탕으로 해서 HTML을 실제로 적용해 보는 그런 시간을 갖도록 하겠습니다 우리 ~~ 수업에서 하려고 하는 것은 이렇게 생긴 웹사이트를 한 번 만들어 보려고 하는 거예요 이것을 우리가 구축하기 위한 첫 번째 단계는 우리가 구상한 우리가 기획한 저 웹사이트를 바로 정보의 형태로 바꿔줘야 합니다

정보는 뭔가요 HTML이죠 이 HTML로 저 그림을 바꿔주는 작업을 해야 돼요 그러면 제일 먼저 메모장을 열고요 우리 실습 환경을 먼저 세팅을 좀 하죠 이 파일은 어디에 저장하면 되겠어요 다큐먼트 루트에 지정하면 되겠죠 다큐먼트 루트에 indexhtml이라는 확장자의 파일로 저장을 해주세요 저는 메모장에다가 indexhtml이라는 파일을 다큐먼트 루트에 저장을 한 상태입니다

그리고 여기 있는 입력되어 있는 것은 우리가 항상 기본적으로 입력하고 시작하는 기본 탬플릿이구요 그리고 이 body 쪽 에다가 지금부터 제가 설명 드리는 내용들을 하나하나 추가해 나가겠습니다 우리가 만들고 있는 사이트는 이렇게 생겼잖아요 저기에서 저 JavaScript라고 되어있는 부분은 이 페이지에서 가장 큰 틀의 주제라고 할 수 있습니다 그리고 주제를 우리가 다른 말로는 이렇게 얘기할 수 있겠죠 대제목이라고 할 수 있을 건데요 우리가 아직 배우진 않았지만 HTML에서 제목을 나타내는 태그는 H1, 2, 3, 6 이런 태그들이 있습니다 바로 그 태도를 사용을 해서 저 JavaScript라는 것을 태그로 묶어주면 됩니다 실습 환경으로 돌아가 보죠 여기에다가 일단 JavaScript라고 제가 써 볼게요 이것은 이 수업의 제목 이름이예요 그 다음에 이것을 브라우저로 표시를 해보겠습니다

자 ~ localhost/indexhtml 엔터 보시는 것처럼 JavaScript라고 이렇게 떴어요 그리고 여기에다가 h1 이라고 해 볼게요 그리고 화면을 리로드 해보면 보시는 것처럼 h1으로 감싸지면 이 텍스트가 더 진하게 표시됩니다 만약에 제가 여기에다가 h1 h2를 이렇게 해보면 어떻게 될까요? 보시는 것처럼 더 작은 하지만 여전히 두꺼운 그런 텍스트가 만들어 지고요 아무것도 묶지 않은 텍스트와 한 번 비교를 해 보세요 보시는 것처럼 이렇게 아무것도 감싸주지 않으면 이렇게 얇게 이 문자가 표시가 되는 거죠 즉 h1, 2, 3라는 것은 h는 뭐 헤드 뭐 이런 뜻일 테구요 즉 그 문서의 주제어들을 나타내는 것이고 제목들이고 그리고 h1은 가장 큰 제목, h2는 그 다음 제목 이렇게 되는 것이죠

아시겠죠? 그러니까 h1은 이렇게 해주시면 됩니다 이번에 살펴볼 것은 왼쪽에 이 각각에 수업들에 대한 리스트가 표시되는 항목을 HTML화 시킬 건데요 저거는 딱 보시면 뭐처럼 생겼어요 벌써 앞에서 말을 하긴 했는데 바로 리스트 라고 할 수 있겠죠 그럼 저 리스트 어떻게 표현하면 될까요 이건 우리가 배웠던 내용입니다 저기 있는 것들은 순서대로 공부해야 되는 항목이기 때문에 제 생각에는 순서가 있는 리스트로 표현하면 더 좋을 것 같아요 그래서 ol 태그를 써서 각각에 항목들을 li 로 묶어주고 있는 것이죠 코드를 한번 작성해보죠 여기에서 음 ~~ ol 그리고 ol 여러분이 태그 작성할 때는 항상 열리는 태그와 닫히는 태그를 쌍으로 작성을 해 나가셔야지 나중에 까먹는 일이 없습니다 li 그리고 이렇게 제가 미리 입력을 해놨습니다 이렇게 해서 화면을 한 번 표시를 해 볼까요 리로드를 하면 저장을 안했네요 이렇게 이 항목들이 이렇게 리스트로 표현되고 있는 것을 볼 수가 있습니다

물론 우리가 보았던 그 디자인과는 많이 달라요 그런데 지금은 우리는 정보의 의미를 명명백백하게 코드로 태그로 나타나는 단계이고요 다음에 css 수업에서 디자인은 나오게 됩니다 그 때까지는 정보에 집중을 해야 되는 상황, 집중을 해야 되는 거예요 그 다음에 변수와 상수라고 되어있는 저 부분은 이 문서상에서 역시나 제목이지만 조금 더 작은 상대적으로 작은 제목입니다 소제목이라고 할 수가 있겠죠 그러면 소제목은 대제목보다는 작기 때문에 h로 시작하지만 숫자는 2를 붙여서 저것이 h1보다는 작은 제목이 되는 겁니다 그리고 옆에 있는 블랙화이트라고 되어있는 부분은 나중에 자바스크립트 수업 때 설명 드릴 거니까 지금은 이 HTML로 만들지 않겠습니다

그러면 여기에다가 음 ~ h2 변수와 상수라고 이렇게 입력하고 그리고 페이지를 리로드를 해보면 이렇게 나눠 버리는게 낫겠네요 리로드를 해보면 보시는 것처럼 변수와 상수가 화면에 이렇게 표시가 되죠 대신에 JavaScript라는 가장 큰 틀의 제목보다는 작은 크기로 표시되는 것을 볼 수가 있습니다 그 다음에는 변수와 상수에 대한 좀 더 자세한 내용들이 나오는 부분인데요 저기 있는 내용은 사실 뭐 저 안에 리스트도 포함되어있고 하지만 저기 있는 내용은 이 왼쪽에 있는 항목들을 선택하는 어떤 걸 선택하느냐에 따라서 내용은 바뀌는 부분이기 때문에 중요한 부분이라고 할 수는 없지만 어쨌든간에 비워둘 순 없으니까 그냥 무언가를 채워두겠습니다 이렇게 이런 식으로 내용이 추가가 될 것 이라는 것이죠 여기에 제가 미리 준비한 코드를 붙여넣기를 하고 좀 보기 좋게, 이렇게 들여쓰기를 해서 좀 정렬을 시켰어요 그리고 리로드를 해보면 보시는 것 처럼 변수란 이런 것이다라는 내용이 화면에 보시되는 것을 볼 수가 있죠 이렇게 해서 기본적인 HTML 코드화 시키는 작업을 끝냈습니다 이거 따른 말로는 마크업한다 라는 말도 쓰는데 비슷한 뜻이라고 생각하시면 돼요 그런데 이것으로는 조끔 더 이것보다 조금 더 개선할 수 있는 여지가 있어요 그래서 우리 이번 시간은 조금 시간이 지났기 때문에 여기서 끊고 이 다음 영상에서 여기 있는 이 코드를 조금 더 의미론적으로 적합한 형태로 개선하는 작업을 진행하도록 하겠습니다

웹에플리케이션 만들기 – HTML 실습3 : 사이트완성

이번 시간은 HTML 문서의 네비게이션 부분에 링크를 걸어서 그 링크를 클릭하는 것에 따라서 해당되는 정보를 보여주는 완성된 사이트를 만드는 것이 목표입니다 제가 어떻게 하는지를 곧 설명 드리겠지만 일단은 잠깐 멈춰놓고 어떻게 하면 할 수 있는지를 잘 생각해보세요

자 여기보시면 li 태그있죠? li 태그를 어떻게 바꿔줘야 될지? 하나의 파일로 문서를 만들었는데 이 각각의 항목들이 링크가 돼서 클릭하면 다른 페이지로 간다면 하나의 웹페이지로 이것을 할 순 없습니다 여러 개의 웹 페이지가 생겨나게 된다라는 것이죠 그러면 어떻게 해야 될까? 한번 잘 생각해보세요 그리고 이제 제가 설명 드리는 것을 보시고 하나의 완결된 웹사이트를 지금부터 만들어봅시다 자 우선 제일 먼저 할 것은 이 웹사이트의 대문페이지를 하나 만들거에요

자 대문페이지는 보통 indexhtml 이름을 갖습니다 indexhtml 이라는 파일은 특수한 파일이예요 약속되어있는 파일입니다

뭐가 약속되어 있냐면 indexhtml이 대문페이지다 라는 것이 약속되어 있단 말이에요 주소창을 잘 보시고 제가 indexhtml을 지우고 엔터를 쳐보겠습니다 어때요? 화면이 똑같죠? 일단은 이 사이트 전체의 주제인 자바스트립트라는 내용이 있어야겠고요

indexhtml를 입력하고 엔터를 쳐도 화면이 같습니다 그 이유는 indexhtml이 이 웹사이트에서 홈페이지의 정보를 담고 있는 파일이라는 약속이 되어있기 때문에 여러분들이 웹사이트에 접근할 때 이렇게 주소만 입력하게 되면 그 웹사이트의 indexhtml을 우선 찾습니다

indexhtml 파일이 있다면 그것을 전송해주기 때문에 이렇게 화면이 표시가 된거에요 아시겠죠? 그러면 이것은 대문 페이지이기 때문에 대문페이지는 어떤 정보가 있어야 되나요? 일단은 이 사이트 전체의 주제인 자바스트립트라는 내용이 있어야겠고요 자바스크립트란 무엇인지? 변수와 상수 연산자? 이런 네비게이션도 있어야지만 우리가 탐색을 할 수 있겠죠 그런데 사용자가 아직 이 3개 중에서 뭐를 보고 싶다고 클릭한 적은 없기 때문에 본문 영역은 안 보이는게 좋겠죠 자 그러면 그걸 해보자는 거죠

우선 indexhtml을 수정을 하겠습니다 article 영역은 지금은 안보이는게 좋으니까 지워버리고요 여기에 네비게이션에 있는 각각의 항목들은 이제 링크가 돼야 돼요 이걸 클릭하면 자바 스크립트란 무엇인가를 설명하는 문서로 가야 되고 변수와 상수를 클릭하면 또 그거에 해당되는 문서로 가야 되는 거죠 자 그러면 여기 있는 내용은 우리가 링크로 바꿔보죠

a href 링크는 열었으면 닫는 게 좋은 습관이고 자 그러면 클릭했을 때 어디로 가게 하면 될까요? http://localhost 여기에 http 라고 적혀있는 앞에 아무 것도 없는 거는 http가 생략된거예요 그러니까 http를 여러분이 적어주셔야 됩니다 그리고 아직은 만들지 않은 파일이지만 page_htmlhtml 이렇게 내용을 적어보겠습니다 이걸 또 카피해서 여기에 html을 변수와 상수 이건 좀 어려운 단어인데 vc로 할게요

그리고 태그를 닫고 그 다음에 연산자라는 것은 이것도 어려운데 op라고 하겠습니다 자바스크립트가 예제인 이유는 생활코딩을 시작할 때 첫 번째로 만들었던 컨텐츠이기 때문입니다 참고 삼아 알고 계시면 될 것 같아서 자, 이렇게 했어요 리로드를 한번해보죠 링크가 걸렸고 여기에 기본적으로 제가 설명을 드리기 위해서 추가했던 내용은 날라 왔습니다 그리고 이 각각의 링크에 해당되는 HTML파일은 현재 서버에 존재하나요? 존재하지 않죠 그렇기 때문에 클릭하면 보시는 것처럼 Not Found 라는 에러가 뜹니다 그럼 저 파일들을 만들어 가야겠죠? 그런데 이 각각의 페이지마다 여기 있는 내용은 공통적으로 들어가야 돼요 왜냐하면 페이지의 하나만 보여줄게 아니고 거기서 또 다른 데로 이동하기 위해서는 이 정보가 다 필요한거죠

그렇다면 이것은 파일을 다큐멘트 루트에 저장을 하는데 htdocs 디렉토리에 저장을 하는데 파일의 이름은 page_htmlhtml 이라고 하고, 저장 리로드를 해보면 보시는 것처럼 화면이 출력됩니다 그런데 자바스크립트가 무엇인지에 대한 내용은 나와있지 않은 상태죠? 자 그렇다면 article 이렇게 해서 본문을 표현해주고 그리고 제목은 h2 니까 자바스크립트란 h2 하고 자바스크립트는 “웹페이지를 프로그래밍적으로 제어하는 언어입니다” 라고 이렇게 적어주고 리로드 그러면 이렇게 잘 표시가 되죠? 변수와 상수를 클릭해보면 역시나 우리는 page_vc

html 파일을 만들지 않았기 때문에 에러가 뜨는 거죠 그러면 이 내용을 그대로 카피해서 다른 이름으로 저장을 합니다 vc 라고 저장을 하고 여기에다가 내용을 바꾸면 되겠죠? 어떻게 바꾸면 되겠어요? "변수와 상수" 라고 적고 내용은 "변수는 바뀔 수 있는 값이고 상수는 바뀌지 않는 값입니다" 라고 이렇게 입력하고, 리로드 이렇게 변수와 상수가 나오죠 그럼 이제부터는 자바스크립트와 변수와 상수는 클릭해서 이동해도 에러가 나질 않습니다

그렇죠? 연산자도 다른 이름으로 저장을 해서 op 라고 하고 "연산자"라고 하고 "계산을 할 때 사용되는 것입니다" 이렇게 하면 클릭하는 거에 따라서 사이트를 탐색할 수 있게 되죠 그리고 일반적으로 우리가 웹사이트를 만들 때 다시 홈페이지로 돌아갈 때는 보통 가장 큰 제목을 클릭하면 그 제목은 이 모든 페이지를 대표하는 곳으로 이동을 하게 되는 경우가 많은데 그때는 h1 에다가 태그를 달아주면 됩니다 http://localhost 라고 하고 리로드를 해보면 이렇게 돼죠? 그런데 여기 있는 내용을 모든 페이지에 다 갱신해야 돼요갱신해볼까요? op도 바꾸고 vc 에도 추가하고 , 추가했고요

HTML에도 추가를 해야 됩니다 그 다음에 index 파일도 이렇게 수정을 해야겠죠? 됐습니다 그러면 이제 클릭하면 어디든 이동할 수 있고 언제든지 첫 번째 페이지로도 이동할 수 있게 되죠 자 이렇게 해서 우리가 잘 동작하는 하나의 웹사이트를 구축하는 과정을 한번 끝낸 겁니다 자 여기까지 잘 따라오셨으면 너무 고생하셨어요

충분히 중요한 일을 해내신겁니다 근데 여기서 우리가 멈춰있기에는 현재 우리가 알고 있는 웹은 이것보다는 훨씬 복잡하고 또 훨씬 강력하잖아요 그래서 여기서 멈출 수는 없는 것이죠 우리가 지금 3개의 링크를 만들어서 각각의 링크를 클릭할 때 마다 그것에 해당되는 정보가 이렇게 출력되도록 만들었는데요 만약에 링크하나가 더 추가된다면 어떻게 될까요? 각각의 페이지마다 그 링크를 추가해야 될 겁니다

그리고 어느 날 갑자기 링크 100개를 추가하라고 누군가가 여러분들에게 요청을 한다면 점점 그 일은 하기가 어려운 일이 되고 점점 불가능한 일이 되기 시작 할 것입니다 바로 처음에는 이것만으로도 사람들은 행복했어요 왜냐하면 링크라는게 얼마나 환상적이었겠어요 그런데 점점 많은 일들을 웹이 담당하면서 사람들은 점점 절망감에 빠지게 됩니다 그리고 그 절망감 속에서 좌절하는 사람도 있지만 또 한편으로는 그것을 어떻게 하면 해결할 수 있을 것인가에 대한 문제의식을 품고 그것을 해결하려고 노력하는 또 다른 흐름이 존재하겠죠? 그렇게 문제를 해결하는 과정에서 웹은 이 초창기의 모습보다 훨씬 더 복잡한 형태를 띄게 됩니다

덕분에 훨씬 더 강력해지겠지만요 그래서 다음 시간에는 우리가 뭐 어떤 기술을 배운다기보다는 이 공부를 하는 과정에서 우리가 어떤 감수성을 가지고 공부에 임해야 되는가 라는 것을 생각해볼 수 있는 내용을 좀 준비를 해봤습니다

Top 5 Web Design Trends in 2019

안녕하세요 빨간색 스테이플러에 오신 것을 환영합니다

이 비디오의 채널에 대해 이야기 할 것입니다 2019 년의 상위 5 개 웹 디자인 추세는 다음과 같은 굉장한 웹 사이트의 예입니다 그들을 사용하여 그것을 확인하자 비디오 배경은 우리가 볼 수있는 최고의 디자인 동향 중 하나입니다 2019 년에 점점 많은 마케터들이 비디오 배경을 사용하여 방문자에게 첫인상을주고 캡처 한 이유를 현대적으로 보여줍니다

같은 시간에 그들의 관심을 몇 가지 예입니다 그리드 레이아웃은 지난 몇 년 동안 매우 인기가 있었으며 최근까지 웹 디자인을위한 고토 레이아웃이되었습니다 비대칭 레이아웃 또는 깨진 그리드 레이아웃이 트렌드는 여전히 강하게 진행되고 있습니다 우리는 많은 유명 브랜드가 자신의 사이트에서이 브랜드를 사용하기 시작할 것으로 기대하고 있습니다 시차 스크롤링은 수년 전부터 있었지만 최근에는 이 기술을 많은 사람들과 결합시키는 점점 더 창의적인 웹 사이트 굉장한 아이디어는 얼마간 좋았다 약간은 좋아졌다 그럼에도 불구하고 우리는 볼 예정이다 더 많은 웹 사이트가 2019 년에 비 전통적 스크롤을 구현했습니다

당신이 빠른 시차 스크롤 자습서를 찾고 있다면 CSS는 아래의 채널 및 링크에서 자습서 비디오를 확인합니다 우리는 대화 형 콘텐츠가있는 더 많은 웹 사이트를 보게 될 것입니다 애니메이션 및 마우스 제어 가능한 컨텐츠 웹 사이트는 정적이 아닙니다 더 이상 발표가 아니라 그들의 관심을 끌기위한 매체 여기에 내용과 상호 작용하는 것이 좋은 예입니다 미니멀리즘 트 렌은 여전히 ​​강하다

2019 년에는 그런대로 머물러있게 될 것이다 더 빠르고 깨끗한 디자인으로 웹 사이트가 더 빨리로드되고 더 나은 상태를 유지할 수 있습니다 화면 호환성 때문에 사용자에게 우아한 느낌을주는 이유는 여기에 몇 가지 샘플이 있습니다 그래서 그것은이 비디오를위한 것입니다 멋진 CSS 디자인에 관심이 있다면 튜토리얼 주간 자습서 비디오를위한 우리의 채널을 확인하십시오

다음번에 뵈요 안녕히 계세요

웹에플리케이션 만들기 – html, css, js의 활용

그럼 지금 부터는 우리가 지금까지 배운 것들을 활용해서 여러분이 직접 어떤 것을 만드는 것이 아니라 다른 사람 또는 다른 회사에서 만든 이 거대한 기능들을 여러분이 몇 줄의 코드를 붙이는 것을 통해서 여러분의 서비스에 붙일 수 있는 그런 방법들에 대해서 살펴보겠습니다 우리가 진도를 나가는 것도 좋지만 지금까지 우리가 배운 것들을 아주 작게 사용해서 강력한 효과를 얻는 것을 여러분들이 확인하는 것도 공부의 재미를 높이는 중요한 요소라고 저는 생각하거든요

그래서 준비한 수업입니다 하지만 우리 수업의 흐름상에서는 이것은 있어도 좋고 없어도 좋은 것이기 때문에 급하시거나 시간이 없거나 재미없으면 넘어 가셔도 되는 부분입니다 우선 두 가지의 서비스를 붙여 볼 겁니다 첫 번째는 댓글 서비스인데요 지금 보고 계신 이 사이트에 여러분과 다르게 저는 댓글이 있네요

이것은 뭐냐면 DISQUS라고 하는 서비스를 쓰고 있고요 “자바스크립트를 알고 싶어요”라고 이렇게 방문자가 댓글을 달면, 댓글이 달리는 거죠 그렇게 댓글을 달면 그것이 관리자인 여러분에게 이메일로가서 여러분이 이메일로도 확인 할 수 있고 그 이메일에다가 직접 답글을 달면 여기에도 답글이 달리는 그런 기능을 제공을 합니다 특히나 스팸을 차단 한다든지 이런 여러가지 복합적이고 복잡한 기능을 우리가 직접 만드는 것은 대단히 어렵고 까다로운 일인데 그런 것들을 제공하는 기능입니다 또 하나는 여러분 사이트에 방문한 사람들과 채팅을 하고 싶을 수도 있잖아요

그런 경우에 이것을 직접 만드는 건 이것 역시도 엄청나게 힘든 일인데 우리는 몇 줄의 코드만 붙이면 이렇게 생긴 채팅창이 생겨납니다 그러면 여기에다가 여러분이 “안녕하세요? 또 질문이 있습니다“ 라고 입력하고 엔터를 치면 지금 소리 들리시죠 이 소리는 여기서 나는 겁니다 여기서 이것은 여러분이 방문자에게 응답할 수 있는 화면이에요

여기서 참여 버튼을 누르면 이렇게 화면이 뜨고, “말씀하세요” 라고 하고 엔터를 치면 이렇게 방문자에게 "말씀하세요" 라고 하는 문자가 가는 그런 채팅기능입니다 이것을 우리가 장착을 해 볼 것 입니다 채팅기능과 댓글기능 우선 댓글기능부터 살펴보겠습니다

댓글 기능은 저는 DISQUS라고 하는 회사에서 제공하는 서비스를 쓸 건데 이게 아무래도 외국에서 제작된 서비스이기 때문에 DISQUS 말고도 한국에 LiveRe라고하는 좋은 서비스가 있으니까요 이런 서비스도 한 번 살펴보시면 좋겠습니다 저는 DISQUS로 수업을 진행을 하겠습니다 DISQUS에 가셔서 일단은 회원가입을 하셔야 합니다 그리고 여기 보시면 GET STARTED 라고 되어있는 부분을 클릭하면 이 중에서, I want to Install Disqus on my site

라고 되어있는 부분을 클릭하면 이거는 뭐냐면 “DISQUS를 나의 사이트에 설치하고 싶습니다” 란 뜻 입니다 그럼 이렇게 나오죠 그럼 여기에서 웹 사이트 이름으로 "생코웹애플리케이션만들기수업"이라고 이렇게 하고 입력하면 여기 잘 보시면 주소가 자동으로 생성이 되는데 소리 나는 대로 읽어보세요 예 신기할 거예요

한국어죠 그리고 Category는 뭐 적당히 선택하시면 되고요 Language는 Korean으로 하면 한국어로 만들어집니다 Create Site 를 하면 이제 DISQUS에 여러분의 사이트 하나가 등록된 겁니다 무슨 말인지는 조금만 기다려보시면 이해가 됩니다 여기서 Yes, I understand 라고 되어있는 것을 클릭하시고 그리고 그 중에서 여러분이 지금 생성한 댓글을 여러분 사이트에 장착해야 되기 때문에 그 장착하기 위한 코드가 필요합니다

Universal Code 를 클릭합니다 그러면 이렇게 코드가 나오는데 바로 여기 있는 이 코드를 카피해서 (카피 작업 중) 우리의 코드에서 이 <article> 안쪽 즉 여러분이 댓글을 장착하고 싶은 그곳에다가 붙여넣기를 이렇게 합니다 그럼 여기 있는 코드를 잘 보면은 어때요 DISQUS가 우리한테 html코드를 주고 JavaScript코드를 이렇게 주는 것을 볼 수가 있습니다 여기 JavaScript코드가 어떻게 생겼고 어떻게 동작하는지는 중요하지 않습니다

그냥 DISQUS는 이렇게 생긴 코드를 우리의 웹사이트에 다가 붙이면 DISQUS의 기능이 우리 웹사이트에 붙을 것 입니다 라고 우리한테 사용설명서의 안내를 해 준거고 우리는 그 안내에 따라서 그렇게 하면 되는 겁니다 이렇게 한 다음에 그리고 제가 Reload를 해보면 보시는 것처럼 DISQUS에 댓글이 붙은 것을 볼 수가 있습니다 만약에 여기에 간격이 너무 떠 붙어있다 그러면 여러분이 CSS같은 걸을 통해서 이 간격을 조정하면 더 밑으로 내려와서 보기 좋은 형태가 되겠죠 이게 DISQUS입니다

어때요 이렇게 강력한 기능을 이렇게 간단하게 붙일 수 있다는 거 하지만 이게 아무리 간단하다고 하더라도 여러분이 우리가 앞에서 배웠던 html, CSS, JavaScript와 같은 것들에 대한 이해가 없다면 이것을 하는 것은 어려운 일이거나 아니면 이것을 하는 것을 여러분이 아예 엄두를 내지 못할 가능성이 큽니다 우리가 앞에 있는 것들을 배웠기 때문에 이렇게 가능하고 그것만으로도 이렇게 강력한 효과가 나온다 라는 것을 여러분들이 좀 즐거우셨으면 좋겠습니다 한 번 이것 저것 해보세요

그리고 하나만 더 해봅시다 여기다가 채팅기능을 제가 붙여 볼 건데요 tawk(착)이라고 하는 서비스입니다 tawk 이름이 되게 어렵죠 tawk

to 라는 서비스로 들어 가보시면 이렇게 생긴 서비스인데 이 서비스는 이 온라인으로 채팅으로 고객지원을 해주는 그런 기능을 제공하는 서비스이고 아주 강력한 기능을 완전히 무료로 제공하고 있는 그런 서비스입니다 회원가입을 하시면 되겠고요 회원가입이 끝난 다음에는 로그인 버튼을 클릭해서 이렇게 관리자 화면으로 들어가시면 됩니다 위에서 여기 위에 언어를 선택하는 부분에서 한국어를 선택하시면 저처럼 한국어를 볼 수가 있습니다 그리고 여기에 보시면 Admin이라고 되어있는 부분을 클릭해보시면 Property 라고 되어있는 부분의 추가 버튼을 눌러서 사이트를 추가 할 수가 있습니다

즉 여러분이 붙이고 싶은 채팅사이트를 추가하는 거죠 그리고 만들기 버튼을 누르면, 여기 만들기 전에 여기에다가 "생코웹애플리케이션만들기" 라고 적어주시고 사이트 URL은 여러분이 운영하는 사이트를 적으면 되는데 아무거나 적어도 잘 작동하더라구요 저는 o2org 라고 실제로는 없는 사이트죠 그리고 만들기를 누르면 되고 만약에 여러분이 사이트가 없다

그런 경우에는 그냥 페이지를 선택하시면 이 tawk에서 만들어 준 페이지의 채팅기능이 붙기 때문에 여러분이 특별히 웹사이트를 직접 운영하지 않아도 가능합니다 만들기 버튼을 누르겠습니다 그러면 이렇게 생긴 화면이 뜨고요 여기의 오른쪽에 보시면 Widget Code(위젯코드)라는 것이 나옵니다 저기 있는 저 Widget Code를 카피합니다

그리고 이 코드를 어디로 가져가냐 우리의 웹페이지의 <body> 위쪽에 다가 붙여주세요 이 <body> 코드위에 다가 붙여주는 거죠 그리고 사이트로 들어 간 다음에 Reload를 하면 여기에 어떤 변화가 생기는지를 한 번 봅시다 보시는 것처럼 이렇게 생기화면이 뜨죠 그럼 여기에서 클릭하면 상담원이랑 채팅을 할 수 있는 화면이 뜹니다

여기에다가 “안녕하세요? 질문이요” 하고서 엔터를 치면 잠시 후에 우리 관리자화면에서 전화가 걸려와요 그리고 여기 있는 이게 전화가 왔다는 뜻입니다 그걸 클릭하면 이런 화면이 뜨고요 여기에 참여버튼을 누르면 보시는 것처럼 전화를 받는 셈 인거죠 그럼 여기서 “말씀하세요

” 화면을 쪼개봤습니다 “말씀하세요”라고 엔터를 치면 보시는 것처럼 말씀하세요가 뜨고 여기에서 방문자가 “궁금한 건요”이렇게 하면은 보시는 것처럼 방문자가 한 말이 우리의 사이트에 들어오게 되는 것이죠 그럼 여기서 여러 가지 그 방문자들에게 이 도움을 줄 수 있는 그런 활동들을 여기서 하고 그 다음에 작업이 끝나면 여기 있는 끝 버튼을 누르시면 됩니다 그러면 끝나는 거죠 그리고 이렇게 커뮤니케이션했던 이력이나 이런 것들이 이제 우리 여러분의 관리자에 남게 되고 그리고 혼자서 그 뭐죠

응대를 하는 것이 아니라 여러분 사람들이 응대할 수 있는 그런 기능들도 제공하고 있는 아주 강력한 서비스입니다 지금 제가 두 가지의 사례를 보여드렸는데요 이 사례가 중요한 것이 아니고 여러분들이 좀 주목을 해야 될 점은 우리가 코딩을 하는 이유가 무엇인가라는 겁니다 지금 우리가 지금까지 html, CSS, JavaScript 와 같은 것들을 배웠고 그런 것들을 통해서 이것 저것을 만들어봤는데 우리가 만든 것 중에는 보시는 것처럼 이렇게 제목과 같이 어떻게 보면 작은 기능부터 시작해서 여기 있는 저기 뭐죠 DISQUS와 같은 댓글 그리고 tawk과 같은 이 채팅시스템과 같은 말하자면 거대한 기능을 여러분의 애플리케이션에 붙이는 거 까지 가능해 진 것은 바로 코드의 힘이라는 것 즉 코드는 여러분이 만들고자 하는 것에 필요한 것들 제목, 댓글, 채팅 이러한 부품들을 결합하는 결합방법 또는 접착제와 같은 것이다 라는 생각을 좀 가지시면 좋을 것 같습니다 이렇게 해서 조금 실용적인 예제를 좀 보여드리려고 했는데 이러한 예제들을 바탕으로 해서 여러분들이 실제로는 거대한 웹사이트를 성큼성큼 만들어가는 겁니다

여기까지 하겠습니다

Web Design – HTML Basic Class | Hello World

안녕하세요 안녕하세요

오늘의 수업 HTML 기본 수업 처음에는 PC 또는 Computer Setup에 대해 알 수 있습니다 우리는 폴더를 만들었습니다 자, 폴더 안에있는 상단보기를 클릭하십시오 그런 다음 옵션을 클릭하십시오 그런 다음 새 폴더 옵션 탭이 열립니다

다시보기를 클릭하십시오 이제 알려진 파일 형식의 확장명 숨기기 왼쪽에 똑딱 거리는 것은 제거되어야합니다 그런 다음 확인 버튼을 클릭하십시오 당신의 일이 끝났습니다 PC 설정이 완료되었습니다

텍스트 문서에서 새 파일을 만듭니다 이제 이름은 indexhtml입니다 우리의 확장은 이제 쉽게 볼 수 있습니다 왜냐하면, 우리는보기로 이동하기 때문에 확장 숨기기 옵션에서 확장이 제거되었습니다

웹 디자인이란 무엇입니까? 즉, 웹 디자인이란 무엇입니까? 즉, 웹 디자인, 웹 사이트는 어떻게 생겼습니까? 웹 디자이너로서의 당신의 직업 완벽한 웹 사이트 템플릿을 만드십시오 즉, 헤더가 메뉴를 가질 것인지, 사이드 바가 있어야하는지, 꼬리말은 무엇을 의미합니까? 코드 편집기 코드 편집기 란, 어디에서 어떤 코드를 작성해야합니다 즉, 웹 디자인을하기 위해서는 코드를 알고 배우거나 우리는 코드 편집기를 선택했다 비주얼 코드 스튜디오 할 수있는 일이 많이 있습니다

코드 편집기를 사용할 수 있습니다 예를 들면 : Notepad ++ 숭고한 코드 편집기 등 코드 편집기 다운로드 및 설치 HTML이란 무엇입니까? 즉, HTML이란 무엇입니까? HTML은 하이퍼 텍스트 마크 업 언어입니다

그렇지 않으면 웹 디자인을 할 수 없습니다 태그 열기 및 닫기 HTML을 우리에게 쓸 때 태그를 여는 것이 필요합니다 그리고 닫는 태그를 사용하십시오 태그 : 제목 및 단락 우리는 H1에서 H6으로 시작합니다

총 6 개의 표제 태그를 사용할 수 있습니다 첫 번째 태그부터 마지막 ​​태그까지의 제목 태그 연속 쓰기는 계속 작을 것입니다 즉, 내가 H1에서 내려 오 자마자, 텍스트가 작을수록 좋습니다 이 수업은 오늘 여기서 끝날 것입니다 다음 학급에서 다시보세요

Text Animation | HTML and CSS Tutorial | Web Design Tutorial 2019

CSS와 HTML을 사용하여 우리의 비디오를보고 웹 디자인을 배우십시오

좋아, 시작하자 그것은 최고의 텍스트 애니메이션입니다 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서

텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션

웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019

HTML 및 CSS 자습서 텍스트 애니메이션 웹 디자인 2019 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019

최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션

웹 디자인 자습서 2019 Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019

Jquery Text Animation 텍스트 애니메이션 2019 최고의 텍스트 애니메이션 웹 디자인 자습서 2019 Jquery Text Animation

감사합니다 구독하십시오