웹디자인 & 웹개발 – 그렇게 어렵지 않아요! ( Let's play with Web design & Web development )

안녕하세요, 리플러스입니다 오늘은 UI 디자이너가 웹 디자인과 웹 개발을 배웠을 때 어떤 점이 편리한지를 이야기해보려합니다 사실 웹개발이라는게 엄청 어려워보이는데 간단하게 말하면, 조립식 주택을 짓는 것과 비슷하다고 말할 수 있습니다 이미 만들어진 블럭식 요소들을 이용해 내용을 바꾸거나, 커스터마이징을 해주기만 하면 되기 때문입니다 HTML과 CSS라는 말만 들어도 치를 떠시는 분들이 많으실텐데요 실제로 공부를 해보면 이런 내용이 그렇게 어렵지 않다는 걸 알 수 있습니다 물론, 지금 당장 공부를 고민하고계신 분들이 많으실거라고 생각합니다

개발과 디자인의 영역은 엄연히 난이도가 다른 영역이니까요 제로 대부분의 디자이너들은 개발 공부를 해야한다고 했을때 당장 눈앞에서 개발의 난이도 때문에 의욕을 잃는 경우가 많습니다 그러나 정작 그 개발 도구를 배웠을 때 어떤 세상을 바라보게되는지를 알지 못하는 경우가 많죠 저 역시도 그런 고민을 하던 때가 있었습니다 하지만 정작 정리를 하고, 배워나가는 과정에서 새로운 기술들을 너무 많이 알게됐어요 일단 탬플릿 구조를 다루게되면서부터는 모든 디자인을 굳이 직접 디자인할 필요가 없어지더라구요 마치 조립식 주택을 짓듯이 이미 만들어진 UI 블럭들을 차근차근 쌓아올리고, 연결해주기만 하면 되더군요 실제로 인터넷 상에 널려있는 HTML 탬플릿이나 Codepen 같은 서비스들이 튜토리얼이 굉장히 잘 되어있어요 그래서 이런것들을 금방 따라하실 수가 있습니다 게다가 이런 자료들이 수준이 매우 높은 편이라 따로 수정을 가하지 않고- 그대로 사용해도 좋을만한 규격들이 많이 있습니다 만약 본인이 포트폴리오를 만들거나 습작을 만들 때에도 시안 한두장을 만드는 수준이 아니라

전체 사이트의 탬플릿을 다운받아서 내용을 바꾸고 그 안에서 자신이 원하는 내용을 수정하고, 추가해주기만 하면 사이트 하나가 뚝딱 만들어집니다 작업하다가 모르는 내용이 있다면, MDN (모질라 재단) 공식 튜토리얼을 참고하거나 Codepen같은 HTML / CSS 소스가 그대로 노출되는 사이트들이 많기 때문에 – 이걸 그대로 참고하면 됩니다 게다가 HTML 탬플릿을 어떻게 사용해야할지를 고민하실 필요도 없는게 boiler plate 같은 기본 규격들도 요즘은 쉽게 구할 수 있으니 – 그대로 사용하시면 됩니다 이렇게 오픈되어있는 자료들은 – 반응형 웹 처리도 잘 되어있고 심지어는 간단하게나마 애니메이팅이 들어가있거나 실제 상용화 버전으로 사용할 수 있을만한 퀄리티인 것들이 많습니다 그러니 모든걸 본인이 모든걸 처음부터 만들어야한다는 생각을 버리게 됩니다 탬플릿들을 연결시키고, 짜집기만 해도 아, 이거 상업용으로 쓰거나 내 작업용으로 다른 사람들에게 자랑할 수 있겠다는걸 체감하게됩니다 그렇기때문에 웹개발을 배우는 순간부터 UI 디자이너로서 바라볼 수 있는 눈의 범위가 매우 넓어지게됩니다 자바스크립트같이 어려운 내용은 당장 다루지 못해도 괜찮습니다 HTML과 CSS같은 기초적인 내용을 공부하면서 실제 내 포트폴리오 사이트를 만들어보거나 자신이 공부하고있는 내용 활동하고있는 동아리 외부활동 등을 소개해보는 거 이런것만으로도 충분히 좋은 경험이 되어줍니다 여기서 우리가 해야할 내용은 웹상에서 적당한 HTML 탬플릿을 하나 잡아다가 필요없는 부분은 삭제해버리고 기존 소스코드에서 필요한 내용만 복사 붙여넣기 하거나 – 수정을 해주하면 원하는 내용이 금방 완성됩니다 우리가 복잡하다고 생각하는 사이트들도 CSS를 뜯어내고나면 , 이런 시안처럼 정말 단순한 텍스트들과, 목록 규격들의 반복일 뿐입니다 그러니 고민하지말고, 자신이 만들고싶은 사이트에대한 기획서를 하나 만들어보세요 그리고 그 내용대로 웹사이트를 하나 만들어보면, 그것만으로도 충분합니다 우리가 UI 디자인을 접할 때 다뤘던 APP 디자인은 시안을 만드는 데에서 끝나는 경우가 많죠? 그러나 웹디자인의 경우에는 이 영역을 넘어서서 우리 맘대로, 원하는 내용을 만들 수 있고 완성품을 실제로 다른사람에게 구현해 보여줄 수가 있어요 이렇게, 모든걸 새롭게 만들려고 하기보다 이미 오픈되어있는 자료들을 통해 본인이 원하는 구조를 만들어보고 여기에 약간의 수정을 가해서 – 나만의 디자인을 적용하기도 쉽습니다 저도 직접 웹개발을 공부해보면서, 여러가지 어려움을 겪었는데요 이런 어려움들은 대부분 실제 배우는게 어려워서라기보다 지식 규격이 복잡해서 생긴, 불필요한 – 지식 습득을 방해하는 어려움이 있었어요 대부분의 지식들이 – 개발자 기준으로 정리되어있다보니 디자이너들이 봤을땐 이게 대체 무슨 내용인지 실제로 이게 어떤 맥락을 갖고있고, 이걸 왜써야하는건지 체계적으로 정리된 지식들이 별로 없는거에요 하지만 이걸 직접 정리를 해놓고 보니까 이해하기 어려운 내용도 아니었고 오히려 어떤 자료들이 왜 필요한지 그리고 어떤 것들을 단계별 / 상황별로 써야하는지를 아는것 이 부분만 알아도 작업에 전혀 문제가 없었다는 거죠 결국, 웹디자인과 웹개발을 배우는데 중요했던 내용은 그때그때, 문제를 해결하기위한 키워드를 어떻게 찾아낼 것이고, 어떻게 알고있는가 – 이게 가장 중요했던 겁니다 이건 웹개발을 1도 모르던 제가 직접 체험한 내용이구요 실제로 그 과정을 겪으면서 정리한 게시글들이 있습니다 그래서 그 부분만 쭉 따라오셔도 – 금방 웹개발을 배우실 수 있을겁니다 만약 본인이 웹개발을 고민하고게신 분이라면 해당 내용에 대한 영상 목록도 있고 게시글 링크들을 정리해둘테니

한번 꼭 확인해보시길 바랄게요 실제로 IT 업계에서는 일정 연차가 채워지고나면 UI 디자이너가 앱만 디자인해서는 먹고살기가 힘들어요 하지만 웹개발을 꼭 해야하는 상황이니까 – 라는걸 넘어서서 웹 개발을 배웠을 때 UI 디자이너로서 할 수 있는 규격이나, 웹 구조 설계, UI요소 변경이나 내용 바꿔치기만으로도 굉장히 다양한 구조를 만들어낼 수 있다는거 전 이게 더 중요한 내용이 아닌가 싶어요 앞으로도 리플러스 채널에서는 여러 웹 관련 기술이나 실제 작업방법, 신규 기술등을 소개해드릴 예정입니다 그러니 어렵다고 무조건 덮어두기보다는 알기쉽게 이해할 수 있는 생활코딩의 웹 어플리케이션 만들기 – 같은 영상을 꼭 한번 보시길 추천드립니다 이 내용도 영상 설명 부분에 링크로 정리를 해두겠습니다 제가 꼭 필요한 부분만 간추려서 정리를 해뒀으니 꼭 한번, 확인해보세요 ! 자, 오늘은 여기까지 하겠습니다 다음에 만나요 !

Web Development – Understanding Technology – by CS50 at Harvard

[음악 재생] 데이비드 J 말란 : 웹 개발

그래서 인터넷이 어떻게 작동하는지 알 것입니다 인터넷에 연결된 모든 컴퓨터가 어떻게 든 상호 연결되어 있습니다 그리고 그들은 TCP / IP와 같은 프로토콜을 지원하며 유선과 무선이 있습니다 그래서 우리는 인프라 스트럭처가 있습니다 이를 통해 컴퓨터에서 데이터를 가져 오거나 컴퓨터에서 데이터를 가져올 수 있습니다

클라이언트와 서버로부터 실제로 그것은 우리가가는 관계입니다 오늘 웹 개발을 볼 때, 개발 과정 웹 사이트 그리고 웹은 많은 서비스 중 하나 일뿐입니다 오늘 인터넷이 지원합니다

인터넷은 물론 이메일과 화상 회의를 지원합니다 모든 종류의 다른 응용 프로그램을 지원합니다 그러나 웹 자체는 하나의 특정 응용 프로그램 또는 서비스입니다 인터넷 상단에서 실행됩니다 다시 말해서, 인터넷 A 지점에서 데이터를 얻을 수 있도록 존재합니다

B를 가리키면 그 위에 레이어를 추가할까요? 우리가 클릭하고 탐색 할 수있게 해주는 많은 기능들, 인터넷 상단의 정보를 볼 수 있습니다 따라서 시나리오를 고려해 봅시다 웹 브라우저를 사용하고있는 웹을 탐색하는 경우가 있습니다 그리고 데스크탑이나 랩톱에서 보면 이런 모습이 보일 수도 있습니다 물론 전화기에서는 조금 더 작아 보일 수도 있습니다

그리고 웹 브라우저는 가정용 콘솔, 게임 콘솔, 요즘에는 그러나 우리는 웹 브라우저의 본질이 이런 것이라고 생각할 것입니다 브라우저 상단에는 주소를 입력 할 수있는 공간이 있습니다 또는 URL, 또는 유니폼 리소스 로케이터 일 수있다 그리고 이것은 일반적으로 HTTP, 콜론, 슬래시, 슬래시로 시작하는 것입니다 또는 HTTPS, 콜론, 슬래시, 슬래시

그런 다음 웹 사이트의 주소 또는 도메인 이름 당신이 방문하기를 원하는 곳 그리고 확률은 뒤로 버튼, 어쩌면 앞으로 버튼, 재로드 버튼 및 기타 몇 가지 기능도 제공합니다 하지만 examplecom과 같은 것을 입력 할 때 무엇을하고 있습니까? 또는 Googlecom 또는 Facebook

com 또는 기타 여러 도메인 이름 웹 브라우저에? 컴퓨터에서 요청을 보내고 있습니다 랩톱, 데스크톱 또는 전화, 장치에서 일부 원격 서버, B 점 말하자면 그리고 인생에서 그 서버의 목적은 당신의 요청을 보는 것입니다, 말하자면, 당신이 원하는 것을 파악한 다음 그 요청에 응답하십시오 따라서 실제로, 우리가 인터넷에서 고양이 요청을했을 때, 여기이 사람처럼

우리는 가상 봉투에 어떤 종류의 요청을 보냅니다 그 봉투의 바깥쪽에는 서버의 주소가 있습니다 하지만 Googlecom과 같은 도메인 이름이 아니라 IP 주소와 포트 번호, TCP 포트 번호, 그리고 반환 IP 주소 그리고 그 봉투 안의 내용은 고양이 같은 특정 자원

그리고 나서 서버에서 돌아 오는 봉투에서, 예를 들어 Google 이미지 검색에서 어쩌면 하나, 둘, 셋의 형태로 고양이 그 자체가 될 수 있습니다 모든 패킷이 조각 나고 시퀀싱 된 경우 그러나 구체적으로이 봉투 안은 무엇이며 어디에서 오는 것입니까? 음, 웹 서버 란 무엇입니까? 서버,이 장치는 이런 식으로 보이는 장치입니다 확률은 집에 이것들 중 하나가 없습니까? 가정이나 직장에서 컴퓨터를 사용하는 경우, 더 전통적인 노트북이나 데스크톱입니다 그러나 이것은 또한 컴퓨터입니다 이것은 서버입니다

단지 일종의 평면 일뿐입니다 랙 서버 라 불리는 것입니다 그리고 랙 서버는 CPU와 마더 보드가있는 서버 일뿐입니다 RAM, 하드 드라이브 및 기타 장치도 포함됩니다 그리고 그것은 1

5 인치 (15 인치) 높이, 또는 3 인치 높이, 또는 다른 배수, 일반적으로 15 인치입니다 그리고 문자 그대로 랙으로 밀어 넣어집니다 그리고 이것은 시스템 관리자와 회사가 일반적으로 많은 서버를 하나의 작은 설치 공간으로 집어 넣을 수 있습니다

그래서 식당에있는 쟁반과 같이 다른 밥 위에 하나를 쌓으십시오 그리고 뒤에,이 서버의 뒤에, 전선과 케이블을 연결할 수있는 모든 종류의 항구입니다 이러한 모든 장치를 상호 연결할 수 있습니다 실제로 회사에서 웹 서버를 실행중인 경우, 확률은 이것들 중 하나만 가지고 있지 않다는 것입니다 확률은 데이터 센터 내부에있는 많은 것들 중 하나입니다

또는 어떤 종류의 아마 당신의 장치를 실제로 지키는 와이어 링 클로짓 (wiring closet) 일 것입니다 이것은 특히 깨끗하고 멋진 버전 일 수 있습니다 그리고이 문 뒤에는 수만 개가 있습니다 실제 크기에 따라 수십 개의 서버가 필요합니다 이것이 바로 웹 서버가 실제로 무엇입니까

그러나 당신이이 웹 서버 중 어느 하나에 보내고있는 것은 무엇입니까? 이 봉투 안에 요청을 보내고 있습니다 그리고 어떤 리소스에 대해서도 매우 구체적으로 요청을 보냅니다 네가 신경 쓰는거야 어쩌면 오늘의 뉴스 일 수도 있습니다 검색 결과 일 수도 있습니다

어쩌면 고양이 일 수도 있습니다 그리고이 요청이이 봉투 안에 쓰여지는 언어 HTTP, 하이퍼 텍스트 전송 프로토콜 (Hypertext Transfer Protocol)에있을 것입니다 그리고이 전송 프로토콜은 실제로 단지 하나의 집합입니다 컴퓨터가 말하는 방식을 상기시키는 협약 정보를 요청할 때 다른 컴퓨터에 연결 월드 와이드 웹 그 사이에, 내가 특별히 고양이를 요청하고 싶다면, 내 요청은 대신 다음과 같이 보일 수 있습니다

/catjpeg, 그것이 실제로 파일 이름의 이름이고, 그런데, 나는 HTTP 버전 11을 사용한다 이것이 서버에 보낸 요청의 내용입니다 서버에서 돌아 오는 것은 무엇입니까? 글쎄, 확률은 텍스트 묶음을 포함하고있다

요청 된 메시지의 실제 응답 그래서 구체적으로 말하자면 봉투 안쪽에 Google에서 특정 이미지를 요청하면 희망적으로 말하는 메시지가 될 것입니다 HTTP 슬래시 11은 언어의 반복이다 또는 프로토콜을 말하면 200 OK

200은 문자 그대로 모든 것이 OK 인 반면, 여기에 귀하의 특정 요청에 대한 만족이 있습니다 그래서 우리는 실제로이 메시지를 결코 보지 못합니다 그것이이 봉투 안에 있거나 내부에 쓰여진 것이기 때문에 HTTP 헤더라고합니다 서버가 봉투에 추가하는 작은 줄의 텍스트가 다시 나타납니다 이런 정보가 담긴 너에게

브라우저가 나머지를 표시할지 여부를 알 수 있도록 봉투의 내용을 표시하거나 실제로 어떤 종류의 오류 메시지를 표시 할 수 있습니다 실제로 이러한 소위 HTTP 상태가 많이 있습니다 봉투를 웹 서버에서 다시 가져올 지 여부를 나타내는 코드 참으로 성공적인 응답입니다 200 OK는 거의 보지 못했지만, 왜냐하면 모든 것이 잘되고 그래서 대신에 당신은 실제로 고양이 또는 당신의 수색 결과를 볼 것입니다, 또는 화면의 다른 것 하지만 상태 코드 나 적어도 브라우저가 나타날 수도 있습니다

그 숫자는 301 또는 302이고, 이것들은 귀하의 브라우저가 실제로 당신을 다른 URL로 리다이렉트해야한다는 것, 우리는 그것을 약간 보게 될 것입니다 304 수정되지 않은 것을 볼 수 있습니다 이것은 실제로 영리한 메커니즘입니다 웹 서버는 시간을 절약하고 대역폭, 바이트, 그 고양이에 대한 당신의 요구에 실제로 응답 할 수 있습니다 데비드가 네가이 고양이를 조금 전에 요청했다고 말하면, 고양이는 개조되지 않았어

나는 가지 않을거야 시간을 낭비하고 다시 보내겠습니다 캐시를 확인해야합니다 즉, 브라우저는 파일을 캐시하고 파일의 사본을 보관합니다 요청한 후에 동일한 웹 페이지를 다시 방문하면, 실제로 시간과 바이트를 낭비 할 필요가 없습니다

따라서 서버는이 파일을 다시 요청할 필요가 없음을 나타낼 수 있습니다 사실 수정되지 않았습니다 한편, 뭔가 이상한 일이 생기면, 브라우저가 401 또는 403 응답을 되돌릴 수 있습니다 당신이 허가받지 못했다는 것을 나타냅니다 당신은 자원에 접근하는 것이 금지되어 있습니다

어쩌면 당신은 어떤 메커니즘을 통해 로그인해야 할 것입니다 아니면 그 파일이나 디렉토리에 액세스 할 수 없게되었을 수도 있습니다 자,이 목록에는 적어도 우리 모두가 너무 자주 보았고, 404가 발견되지 않았습니다 당신의 브라우저가 때때로 당신에게 말하는 이유를 궁금해했다면 이것은 상당히 비밀 번호 404입니다 왜냐하면 HTTP를 설계 한 사람들,이 프로토콜, 얼마 전 서버가 브라우저에 그것을 보내는 경우 숫자 404가 결정되었고, 그것은 당신이 요청한 것이 무엇이든 찾을 수없는 숫자 코드와 같습니다

그래서 그 봉투 안에 그 번호를 다시 가져올거야 catjpeg가 서버에 없기 때문에 찾을 수 없습니다 마지막으로, 아마도이 중 최악은 500 내부 서버 오류입니다 이것은 당신의 잘못이 아닙니다

그래서 이것을 본다면, 그것은 당신이 한 일이 아닙니다 그것은 웹 사이트의 프로그래머입니다 그 또는 그녀가 실제로, 웹 사이트를 올바르게 구현하지 않았기 때문입니다 이제 볼 수있는 다른 여러 가지 응답이 있습니다 그들 중 일부는 심지어 이것들보다 조금 더 낮은 레벨입니다

프로그래밍이나 API, 애플리케이션을 사용하는 세계의 사람들 프로그래밍 인터페이스는 실제로 이들보다 많은 상태 코드를 볼 수 있습니다 그러나 이것들은 아마도 가장 일반적인 사용자 지향적 인 것들 일 것입니다 웹 사이트를 방문 할 때 귀하와 내가 볼 수도 있습니다 그럼이 봉투 안은 또 뭐야? 이러한 소위 HTTP 헤더 외에도, 몇 마디로 된 숫자 코드 이 봉투의 상태가 정확히 무엇인지 나타냅니다 이상적으로이 봉투 안쪽에 무엇이 있어야합니까? catjpeg와 같은 고양이 인 경우 문자 그대로 JPEG를 구성하는 바이트 수 브라우저 나 Photoshop에서 열 수있는 모든 0과 0을 묶어서, 또는 다른 그래픽 프로그램

그러나 처음에 웹 페이지에 대한 요청 인 경우, Google의 홈 페이지 또는 cnncom 또는 Facebook 뉴스 피드, 또는 Gmail받은 편지함, 실제로 어디에서 한 가지가 아니라 여러 가지 것을 볼 것으로 기대합니다 많은 텍스트, 많은 그래픽, 즉 적절한 웹 페이지 글쎄, 어떻게이 웹 서버가 적합하게 될 것인가? 그 안에있는 모든 정보는 여기에 있습니까? 일반적으로 이러한 응답의 내부에있는 것으로 밝혀졌습니다 HTTP 상태 코드 아래에, 말하자면, 이것입니다

HTML이라는 언어 그리고 HTML (HyperText Markup Language)은 프로그래밍 언어가 아니며, 왜냐하면 그것은 우리에게 컴퓨터가 일을하도록 명령하는 능력을주지 않기 때문입니다 루프와 조건 같은 제어 흐름이라고하는 것이 없습니다 변수들, 그리고 다른 것들 오히려 그 의미에서 마크 업 언어입니다

그러면 웹 페이지에서 데이터 정보를 마크 업할 수 있습니다 브라우저에게 실제로, 어떻게 표시할지, 그것을 구조화하는 방법, 그것을 포맷하는 방법 따라서 프로그래밍 언어가 아닌 형식 지정 언어와 비슷합니다 그리고 여기 아마도 가장 간단한 웹 페이지 일 것입니다 HTML이라고하는이 언어로 작성할 수 있습니다

그리고 전에는 본 적이 없더라도, 확률은 당신의 눈을 몇 가지 패턴을 통지 수 있습니다 그들이 불렀을 때 나는 각진 괄호를 많이 본다 나는 닫힌 각진 괄호를 많이 본다 HTML의 두 가지 언급, 머리의 두 가지 언급, 몸에 대한 언급이 2 개 있고, 여기에 이걸 덧붙여서 그리고 나는 또한 반복되는 구 "hello world"를 보았습니다

그래서 추측하고 싶다면 아마도 이것에 대해 생각할 것입니다 아주 간단하게 사용자에게 "안녕하세요"라고 말하는 웹 페이지입니다 그런데 왜 그게 사실입니까? 글쎄, 웹 페이지가이 똑같은 표준 형식을 따르는 것으로 밝혀졌습니다 전세계 웹상의 사용자 또는 고객을위한 웹 사이트를 만들고 싶다면, 네가해야할 일은 무엇을 의미 하는가? 글쎄, 당신은 실제로 이런 식으로 HTML을 작성하여 웹 사이트를 구현해야합니다

그리고 당신은 이것을 위해 대부분의 프로그램을 사용할 수 있습니다 Windows에서는 Mac OS에서 메모장을 사용할 수 있으며 Textedit를 사용할 수 있습니다 그러나 현실은 그 프로그램이 실제로는 아닙니다 웹 페이지 제작 용으로 설계되었습니다 그래서 더 좋은 프로그램이 있습니다

Atom 또는 Sublime Text와 같은 프로그램을 사용할 수 있습니다 보다 정교한 텍스트 편집기입니다 그리고 이러한 세부 정보를 숨기는 더 멋진 프로그램이 있습니다 당신을 클릭하고 클릭 만하고 끌어서 놓기 만하면 HTML이 생성됩니다 실제로 이해하지 않고

그러나 우리의 목표는 실제로이 기본 언어를 이해하는 것입니다 그러나 하루가 끝나면 그것은 단지 텍스트 일뿐입니다 따라서 프로그램을 보유하고있는 한 Microsoft Word에서 웹 페이지를 만들 수 있습니까? 이제 Microsoft Word를 사용하지 않을 것입니다 일반적으로 잘못된 형식으로 저장하기 때문에, 그러나 요점은 키보드와 어떤 방법으로 컴퓨터가 필요한 것입니다 텍스트를 타이핑하는 것

자 여기서 무슨 일이 일어나고 있는지 생각해 봅시다 대칭에 유의하십시오 먼저이 문서를 시작합니다 문서 유형 선언, 이는 단지 종류의 것입니다 지금 복사하여 붙여 넣기해야합니다

그리고 그냥 브라우저가 나타납니다 여기 웹 페이지가 있습니다 HTML 버전 5로 작성, 일명 이 특정 언어의 최신 버전 인 HTML 5 그 다음, 아래에, 우리가 그들을 부를 것 인 것에 따라,이 열린 브래킷 중의 1 개다 HTML이라는 단어, HyperText Markup Language, 그 다음에 공백, Lang은 "EN"을 인용 부호로 사용합니다

그게 뭐야? 글쎄, 이것은 브라우저에 대한 표시 일뿐입니다 이 페이지가있는 언어, 인간 언어 쓰여질 예정인 것은 EN이 될 것입니다 영어에 대한 범용 코드입니다 두 자 또는 세 자로 된 코드가 있습니다 세상의 모든 언어에 대해 자 여기, 고시는 열린 대괄호, 머리, 닫는 대괄호입니다

그리고 나서, 저는 이것을 반대라고 부를 것입니다 열린 브래킷, 슬래시, 머리, 닫는 브래킷 여기 대칭의 첫 번째 예가 있습니다 이 태그를 의미로 생각해 봅시다 내 웹 페이지의 머리를 열자

이 태그를 내 웹 페이지의 헤드를 닫는 것으로 생각합시다 또는 시작과 중지, 그러나 그것에 대해 생각하고 싶습니다 그러나 내 웹 페이지의 머리 부분은 분명히 이렇게 될 것입니다 제목, 대괄호, 제목, 대괄호를 닫습니다 그럼 그냥 몇 마디, 안녕하세요 세상이 될 수 있습니다

그리고 나서 대괄호, 슬래시, 제목, 대괄호를여십시오 제목에 대한 열린 태그의 반대입니다 이제 HTML로 시작한 중첩이 있음을 주목하십시오 그 안에는 그의 머리가 들여 쓰기되어 있습니다 그 안의 안쪽에 들여 쓰기가 제목입니다

그리고 그 일에 대해 깔끔하고 친절하게, 여기에 가까운 제목 태그를 같은 줄에 넣었습니다 브라우저는 특별히 신경 쓰지 않습니다 그러나 이것은 짧은 문장이었습니다 나는 한 줄로 그렇게 할 것이라고 느꼈습니다 그러나 나는 제목을 그 자신의 줄에 놓을 수 있었다

그리고 가까운 제목 뿐만 아니라 자체 라인에 그러나 그런 종류의 세부 사항은 조금 더 있습니다 그리고 그것은 머리를위한 것입니다 이제 저는 이른바 내 페이지의 몸, 곧 가까운 몸을 만나게됩니다 그 안에는 안녕하세요 세상이 있습니다

다시 한 번 들여다 보겠습니다 마지막으로 HTML을 닫습니다 따라서 반대 순서로 대칭이 발생합니다 태그를 닫을 때 내가 연다는 첫 번째 태그는 내가 말했던 마지막 태그입니다

그리고 다시 대칭을 주목하십시오 나는 다른 것을 하나씩 만하는 것이 아닙니다 그래서 저는 실제로 이러한 것들을 태그라고 부르기 시작할 것입니다 HTML은 태그 기반 마크 업 언어로서 태그는 일반적으로 열린 대괄호, 일부 단어, 대괄호를 닫습니다 그러나 때로는 이러한 태그에는 특성이라고 부르는 태그가 있습니다

태그의 동작에 영향을 줄 수있는 구성 세부 정보 정렬 그리고이 속성 인 lang은 언어의 약자로 EN과 같습니다 브라우저가 알 수 있도록 페이지 본문 구성입니다 브라우저가 알 수 있도록 페이지 전체가 아니라, 오,이 HTML 파일은 영어로 알려진 인간 언어로 작성되었습니다 이렇게하면 Chrome, Firefox, Edge 및 기타 브라우저 반드시 텍스트의 어떤 것으로부터 추론 할 필요는 없다 페이지에서 어떤 언어인지 확인하십시오

당신이 눈치 챘을지도 모르기 때문에, 오늘 브라우저 때때로 영어를 번역하라는 메시지가 표시 될 수 있습니다 프랑스어 또는 스페인어, 일본어 또는 일부 다른 언어로 웹 페이지가 다른 언어로 있음을 감지하면 너 자신이 말할 수 없을지도 모른다 그래서 이것은 웹 브라우저가 정확히 어떤 언어를 알고 있는지 확인하는 것입니다 이 페이지가 쓰여지려고한다 그게 전부입니다

그러나이 페이지는 결국 실제로 어떻게 될 것입니까? 음, 내 Mac에서 열어 보자 TextEdit이라는 매우 간단한 프로그램입니다 그리고 저는 똑같은 웹 페이지를 문자 그대로 쓰려고합니다 대괄호, 느낌표, 문서 유형, HTML, 대괄호 HTML, lang은 영어와 같습니다 그리고 나서 나는 여기서 나 자신을 앞서 갈 것입니다, 그래서 나는 잊지 않습니다

나는 그 괄호를 닫기 위해 대괄호, 슬래시, HTML을 할 것입니다 그리고 나서 나는 그 안에 들어가서 무엇을 할 것인가? 나는 그 페이지의 머리를 되 새겼다 헤드 태그를 선제 적으로 닫도록하겠습니다 그리고 이제 여기에 제목이 있다는 것을 기억합니다 안녕하세요

이제 제목을 닫습니다 그러나 다시, 내가 정말로 원한다면 나는이 태그를 자신의 줄에 넣을 수있다 그러나 그것은 중요하지 않을 것입니다 그래서 나는 그것을 조금 더 엄격하게 남겨 둘 것입니다 자, 내 페이지의 머리 아래에 뭐가 있었 니? 몸

그래서 나는 내 페이지의 시체를 열어 보겠습니다 내 페이지의 본문을 닫습니다 그리고 나서 그냥 과도하게, 넣어, 안녕하세요 세계, 일종의 표준 메시지 그게 전부입니다, 내가 한 모든 것은 내 컴퓨터에서 텍스트 편집기를 열었습니다 Mac에서는 TextEdit, Windows에서는 Notepad

exe, 또는 임의의 수의 다른 프로그램을 포함 할 수있다 나는 아직 그것을 저장하지 않았지만 요점은이 것이 웹 페이지라는 것이다 저장 만하면됩니다 그럼 파일 저장하고 저장하겠습니다 예를 들어 안녕하세요

내 데스크톱에 저장해 보겠습니다 적어도 Mac에서는 TextEdit이 예상대로 그게 전부이기 때문에 텍스트로 저장하려고합니다 그러나 나는 그걸 무시하고 html로 대체 할 것입니다 또한 공통점은

htm이지만 더 일반적인 것은 html입니다 그리고 지금 가서 파일을 저장하겠습니다 이제 TextEdit은 약간 불쾌해질 것입니다 이름 끝에 확장명

html을 사용했습니다 표준 확장자는 txt입니다 글쎄요, 여기에 이런 식으로 수업을 듣고, 당신은 컴퓨터보다 잘 알아야합니다 애플이 당신을 끌어들이려고 노력하고 있지만 더 일반적인 해결책으로, 아니, 우리는 HTML을 사용하고 싶다

이제는 Windows의 메모장에서 같은 방법으로 메시지를 표시하지 않습니다 그러나 요점은 당신이 더 잘 이해하고 희망적으로, 지금 우리가하려는 것은 무엇인가 당신이 이것을 저장하고 싶어하기 때문에 이것은 웹 페이지입니다 그리고 웹 페이지에 사용할 표준 파일 확장자는 실제로 html이 될 것입니다

그리고 이제, 제가 할 일은 한번보세요 내 바탕 화면에서이 파일을 저장합니다 실제로 hellohtml이라는 파일이 있습니다 나는 계속해서 그것을 두 번 클릭 할 것이다

그리고 당신이 상상할 수있는 가장 흥미롭지 않은 웹 페이지 인 voila 실제로이 문제를 확대하여 정확히 무엇이 진행되고 있는지 살펴 보겠습니다 그리고 몇 가지주의해야 할 점이 있습니다 그래서 하나, 내 브라우저의 탭 상단 모서리에 분명히 웹 페이지의 제목입니다 이것이 웹 페이지를 생각할 수있는 방법입니다

그것은 페이지의 맨 위에있는 머리와, 일반적으로 페이지 내용의 99 %와 같은 본문입니다 그래서 머리는 정말로이 꼭대기 부분 일뿐입니다 최소한 현재로서는 제목이 있습니다 한편 웹 페이지의 본문이 아래에 있습니다 그리고 그것이 내 모든 콘텐츠가 궁극적으로 갈 곳입니다

하지만 지금은 내 유일한 콘텐츠입니다 안녕하세요 이제 여기에 펑키 한 URL이 보입니다 아직 시작하지 않았기 때문에 HTTP 또는 HTTPS로 시작하지 않습니다 앞에서 본 서버와 마찬가지로이 파일을 서버에 저장하십시오

오히려이 파일은 말 그대로 내 랩톱의 바탕 화면에 있습니다 그래서 내 사용자 폴더, J Harvard 폴더에 있습니다 지금 내 사용자 이름입니다 그리고 바탕 화면이고 파일은 hellohtml입니다

그리고 흥미롭게도 URL은 file : ///로 시작합니다 파일이 실제로 내 컴퓨터에 로컬임을 나타냅니다 그래서 저는 웹 페이지를 만들었습니다 하지만 웹 서버에 올려 놓지는 않았습니다 따라서 인터넷상의 어느 누구도이 웹 페이지에 실제로 액세스 할 수 없습니다

그들이 물리적으로 여기 내 Mac으로 걸어 오지 않는 한이 파일을 가져옵니다 그러나 그것은 괜찮습니다 왜냐하면 웹 호스트가 존재하기 때문입니다 우리가 원한다면 우리는 확실히 갈 수 있습니다 궁극적으로 자체 도메인 이름을 구입하십시오

그리고이 파일들을 세계의 다른 서버로 드래그 앤 드롭하십시오 그러나 지금은 로컬 컴퓨터의 웹 개발에 초점을 맞출 것이며, 실제로 코드를 작성하는 코드를 작성합니다 그래서 가장 간단한 웹 페이지입니다 그래서 지금까지 우리는 TextEdit, 아주 간단한 텍스트를 사용 해왔다 HTML을 실제로 작성하기위한 편집기

그러나 웹 페이지를 작성하는 데 필요한 모든 것이 아닙니다 실제로 파일을 저장하려고 할 때 보았던 것처럼, 그것은 또한 우리가 무엇을하려고했는지를 정말로 이해하지 못했습니다 음, 더 나은 소프트웨어가 있다는 것을 알 수 있습니다 여전히 무료입니다 Mac, PC 또는 기타 운영 체제에서 다운로드 할 수 있습니다

그리고 이러한 텍스트 편집기 중 하나를 Atom이라고합니다 그리고 사실, 내가 가서 Atom을 열면, 다운로드 한 후 내 Mac에 설치 한 후, 사실 꽤 비슷한 인터페이스를 보게 될 것입니다 얼핏 보면 좀 더 다채롭고 확실합니다 또한 왼손을 따라 한 번에 여러 파일을 열 수 있습니다 측면, 여기

사실, 오늘 나는 수많은 예제를 준비했다 Julia-Child-style의 일종입니다 그리고 실제로, 여기에 hellohtml이 있습니다 이 다른 프로그램 [? 아담

?] 이제 내가 만든 하나의 다른 변화가 있습니다 그러나 당신은 색깔이 순간에 가장 눈부신 차이임을 보게 될 것입니다 그러나 이것은 파일 그 자체에 없습니다 실제로 브라우저에서이 hellohtml을 열면, 나는이 색들을 보지 못했을 것이다

색상은 나를 위해 여기에, 인간, 이 파일의 다른 기능을 다른 기능과 더 잘 구분할 수 있습니다 예를 들어 모든 태그와 각진 대괄호 Atom이 자체적으로 파란색으로 표시하고있는 것 같습니다 안녕하세요 세상과 안녕하세요 세상 모든 텍스트, 회색으로 표시됩니다 그리고 큰 녹색으로, 내 속성 값, 그래서 그들은 저에게 정말로 뛰어 내립니다 이제이 파일에 다른 하나의 세부 사항이 있습니다

내가 잠시 전에 입력하지 않았던 여기이 라인들이 있습니다 글쎄, HTML은 단지 우리가 페이지를 구조화하기 위해 사용해온 태그, 또한 주석이라고하는 것을 지원합니다 그리고 괄호, 느낌표, 대시, 대시, 그리고 몇 마디 그리고 그 반대는 실제로는 반대가 아닙니다

느낌표가 빠졌으므로 대시, 대시, 꺽쇠 괄호가 없기 때문입니다 실제로 웹 페이지에 다음과 같은 주석을 넣을 수 있습니다 월드 와이드 웹에 안녕하세요 그리고 이것은 정말로 당신에게 의미가 있습니다, 나중에, 이 파일의 내용을 잊어 버리면, 당신을 상기시키는 문장이 있습니다 그러나 더 일반적으로 당신이 가지고있을 동료들을 위해 사용됩니다, 또는 귀하의 코드, HTML 코드, 그래서 그들은 또한이 웹 페이지가하기를 원하는 것을 알고 있습니다

실제 코드 전체를 읽을 필요는 없습니다 따라서이 파일은 브라우저에서 동일하게 열립니다 물론 그것은 실제로 관심이없는 것은 아닙니다 그것이하는 것은 디스플레이, 안녕하세요 세계입니다 그리고 전체 웹은 링크하고 클릭하는 것에 관한 것이며, 요즘 끌고 다니는 것입니다

전 세계로 퍼져 나갔다 우리는 그런 종류의 역 동성을 향해 어떻게 나아갈 수 있습니까? 글쎄, 내가 먼저 가서이 일을하게 해줘 먼저 새 파일을 만들어 보겠습니다 이전과 마찬가지로이 파일을 doc 유형의 HTML로 시작하겠다 HTML을 닫고 HTML을 닫습니다

웹 페이지의 머리를 갖게하고 내 웹 페이지의 머리를 닫으십시오 그리고 이번에는 내 제목, 그리고 이번에는 Atom의 기능 중 주목할 것입니다 그것과 같은 많은 텍스트 편집자가 실제로 시도하는 것입니다 당신의 생각을 끝내는 데 도움이됩니다 그리고 여기에 그것이 나에게 촉구합니다, 당신은 제목을 의미합니까, 실제로 그렇습니다, 입력 할 단어가 자동 완성되도록 할 수 있습니다

하지만 지금은 Hello comma world, close title을 할 것입니다 그리고 실제로 내 생각을 끝내자 이제 여기서 내 웹 페이지의 본문입니다 그리고 저는 앞으로 가서 웹 페이지의 본문을 닫을 것입니다 그리고 얼마 전, 우리는 안녕하세요

그러나 이것은 링크를 포함하는 우리의 첫 번째 예가 될 것입니다 그래서 나는 이것을 다시 표제 할 것입니다 나는이 페이지가 안녕하세요 세상에 말하기를 원하지 않습니다 나는 아주 간단하게 링크를 말하고 싶습니다 그 모든 재미있는 것이 아니라 재미있는 부분, 여기에있을거야

그들의 홈페이지에 대해 하버드의 웹 페이지를 만들고 있다고 가정 해 봅시다 그리고 사용자들이 웹상에서 하버드를 방문하도록 권유하고 싶습니다 나는 웹상의 하버드를 방문하는 것과 같은 말을 할 수있다 자, 물론 이것은 흥미로운 것은 아닙니다 실제로, 브라우저에서이 파일을 열면이 파일이 보일 것입니다

웹상에서 하버드를 방문하십시오 사용자가 무엇을 할 것이므로 흥미로운 것은 아닙니다 확률은 그 또는 그녀가, 지금, 구글을 열고, Harvard를 검색 할 것이고, 웹상에서 하버드를 끌어 올리십시오 그러나 우리가 사용자를 거기에 인도하도록 도울 수 있다면 어떨까요? 그러니 실제로 이것을 바꾸어 놓으십시오 Atom을 다시 열어 보겠습니다

그리고 하버드를 방문하는 방법에 대해 말씀 드리려고 저를 바꾸어 놓겠습니다 하버드는 어떻게 다른 목적지와 연결될 수 있습니까? 글쎄요, 이것들 외에 다른 태그가 있습니다 앵커 태그, 축약 된 a 및 해당 태그가 있습니다 실제로 이런 모습을 보이는 링크를 만듭니다 따라서 앵커 태그를 시작하고 앵커 또는 태그를 닫은 다음 다시 그냥 약어로 사용하십시오

브라우저로 돌아 가면 아무런 차이가 없습니다 실제로, 그것은 여전히 ​​하버드를 방문합니다 웹,하지만 그건 내가 파일을 변경하고 저장했기 때문이며, 하지만 브라우저를 다시로드하지 않았습니다 따라서 Chrome에서 여기를 클릭하고 브라우저에서 다시로드를 클릭하면 당신이 사용할 수도 있고 비슷하게 다시로드 버튼이있을 수도 있습니다 클릭하고 다시로드하십시오

실제로이 페이지는 내 텍스트 파일과 일치하도록 변경되었습니다 하지만 아직 링크가 아닙니다 그리고 제가 말했더라도, 여기에 닻을 놓으십시오 실제로이 텍스트를 앵커 할 위치를 브라우저에 알려줘야합니다 그래서 그것은 밝혀졌습니다

그리고 당신은 수업에서 이것을 알 것입니다 또는 책 또는 일부 온라인 참조를 읽는 것, 앵커 태그는 모든 속성 집합을 취합니다 그리고, 실제로, Atom은 저의 생각을 여기서 끝내려고합니다 그리고 저는 실제로 앞으로 나아갈 것입니다 제안의 두 번째, 하이퍼 참조 용 href

그리고 저는 계속 진행하여 이것을 같게 지정하고, 인용 부호를 인용하지 않으며, "http://wwwharvardedu/, 저장하십시오 그래서, 지금 주목해라, 나는 아직도 꼬리표를 가지고있다 열렸고 닫았습니다

실제로, 이전과 마찬가지로 지금은 속성이 있습니다 그래서 좋은 측정을 위해서, 나 지금 당장 가게 해줘 이것이 내 페이지의 영어 버전이라는 것을 세계가 알고 있는지 확인하십시오 이제 페이지에 두 가지 특성이 있습니다 첫 번째는 HTML 태그를 수정하고, 두 번째는 HTML 태그를 수정합니다

앵커 태그를 수정합니다 이제이 속성에는 실제 URL 인 하이퍼 참조가 있습니다 그리고 브라우저를 다시로드하면됩니다 아마도 친숙한, 날짜가 있으면 파란색 텍스트도 있음을 알 수 있습니다 밑줄이 그어서, 시각적으로, 다른 페이지로 연결되는 링크입니다

그리고 확실히 충분히, 그리고 이것은 조금 작아 보일 것입니다 이 커서를 내 커서 위로 가져 가면 여기에 유의하십시오 당신은 당신의 브라우저의 왼편 구석에서, 아마, Chrome이든 다른 것이 든, 도착 URL, 이 링크를 클릭하면 연결됩니다 해 보자 3, 2, 1, 클릭하십시오

그리고 짜잔! 나는 지금 하버드의 홈페이지에있다 실제로 URL은 정확하게 변경되었습니다 물론, 내가 뒤로 물러 서면, 나는 원래 있던 곳으로 돌아 간다 그러나 나는 지금 웹 페이지를 가지고있다 그것은 여전히 ​​인터넷 상에 있지 않다

그것은 여전히 ​​내 자신의 Mac에서만 살아 있습니다 그러나 이것이 우리가 실제 인터넷상의 웹 사이트에 링크 할 수 없다는 것을 의미하지는 않습니다 우리가 그랬던 것처럼 하지만 여기서 뭐하는거야? 보라색이되었다 그건 좀 이상해 보입니다

그것은 파랗고, 이제 그것은 보라색입니다 그게 무슨 뜻 이죠? 글쎄, 이것은 일반적인 기본 컨벤션이다 브라우저에 의해 당신, 인간, 이미이 링크를 방문하셨습니다 특히 웹의 초기에는 페이지가 움큼하고 링크가 뭉친 형식으로되어 있어야하며, 꽤 지루하고 꽤 기억하기 힘들다 어떤 것들을 방문 했습니까? 오늘날 검색 엔진과 심지어 우리 자신의 작은 웹 사이트, 시각적으로 링크의 색을 바꿀 수도 있습니다

당신에게 당신이 실제로 보았던 사람들 이러한 클릭 수를 추적하는 것은 브라우저입니다 그래서 제쳐두고 흥미로운 프라이버시 관련 함이 있습니다 맞습니다 브라우저는 현재 방문한 링크를 추적합니다

우리는 그들을 보라색으로 만들 수 있습니다 그것은 다른 어떤 인간, 잠재적으로, 컴퓨터에 앉을 수 있습니다 캐시를 지우거나 말하고 브라우저를 재설정하지 않은 경우, 확률은 그 정보의 일부입니다 여전히 액세스 할 수 있습니다 다른 예를 들어 봅시다

그리고 이것을 처음부터 입력하는 대신, 내가 먼저 가서 imagehtml을여십시오 여기에 미리 넣어 둬 이제 맨 꼭대기에 스포일러가 있습니다 이것은 심술 궂은 고양이입니다

더 학문적으로, 이것은 이미지를 보여줍니다 실제로 웹은 텍스트뿐만 아니라 웹 페이지의 이미지로 가득 차 있습니다 그럼 여기서 다른 점은 무엇입니까? 이 예제와 함께 댓글 상단은 확실히 다릅니다 그러나 HTML 태그는 같아 보이고 머리는 같습니다

제목은 조금 다르다 단지 이미지, 그러나 그것은 그렇게 흥미로운 것이 아닙니다 그러나 몸에는 두 가지 새로운 것이 있습니다 하나는 어두운 회색으로 표시되어 다른 설명이됩니다 그리고 그것은 저의 귀속입니다

그래서 저는 세계 전역에 걸쳐 내 표창장을 알고있어, 네가 뭘보고 있는지 알았어 그리고 아래에 그 이미지 태그, 열린 대괄호, IMG가 있습니다 다시 한번, 웹 저자는 초기에 꽤 간결했습니다 그래서 앵커를위한 것처럼 이미지를위한 IMG가 있습니다 모든 것을 철자하고 싶지는 않지만 여전히 이미지를 말할 수 있습니다

열린 브래킷, 이미지, Alt equals Grumpy Cat – 한 번에 더 많은 것 – 소스는 catjpeg와 같습니다 그리고이 호기심에 주목하십시오 슬래시, 닫는 브래킷 그래서 우리가 지금까지 본 다른 모든 태그는 열린 대괄호를 가지고 있지만, 어떤 단어, 닫는 괄호, 그런 다음 몇 가지 물건, 다음 괄호, 슬래시, 그 같은 단어, 대괄호

이 이미지 태그는 어떤 의미에서는 비어있는 것 같습니다 그것은 단지 시작 태그를 가지고 있지만 일종의 태그 안에는 종료 태그가 있습니다 모두 하나로 그리고 이것은 실제로 고의적입니다 왜냐하면 머리와 제목, 몸의 의미와는 달리, 헤이 브라우저, 여기 내 페이지의 머리가 온다 헤이 브라우저, 여기 내 페이지의 제목이 나온다

헤이 브라우저, 여기 내 페이지의 시체가 온다 모두 결국 멈출 수 있습니다 안녕하세요, 브라우저 제목입니다 헤이 브라우저, 바로 그거야 안녕하세요 브라우저, 그건 내 웹 페이지의 본문입니다

이미지는 종류가 있거나 존재하지 않습니다 당신이 말할 수있는 것처럼 그것은 브라우저가 아닙니다 여기 이미지가 있습니다 한 번에 모든 것이 존재하거나 전혀 존재하지 않을 것입니다 정말로 시작과 멈춤에 대한 개념이 없습니다

이 다른 태그들도 마찬가지입니다 정보의 여러 부분을 포함 할 수 있습니다, 또는 여러 단어 또는 여러 문자를 포함 할 수 있습니다 그래서 우리는 앞으로 나아갈 것이고, 좋은 측정을 위해서 그 이미지 태그를 닫을 것입니다 엄격하게 필요한 것은 아니지만 열린 태그 안에 슬래시를 넣음으로써 이제 당신은 아마 이것이 궁극적으로, 파일 이름이 cat

jpeg 인 고양이 그리고 그것은 내가이 URL에서 미리 다운로드 한 파일 일 것입니다 여기에 다음이 파일과 같은 폴더에 넣어, imagehtml, 그냥 내 하드 드라이브에 드래그하여 내가 원하는 곳으로 HTML에서 나는이 이미지 src의 소스를 지정하고 있습니다

소스에 대한 짧은 파일 이름은 catjpeg입니다 그 고양이가 다른 곳에 살면, 그 안에있는 폴더의 이름을 넣을 수 있습니다 또는 그것이있는 폴더 웹 자체에 있다면 http : // something, 실제로 그것에 대한 완전한 경로를 제공합니다

하지만이 고양이의 복사본을 만들어서 같은 폴더에 넣으십시오 그래서 저는 그 이름으로 설명 할 수 있습니다 한편 알트는 접근성 측면에서 좋은 점이다 웹 페이지를 방문하는 사람들은 물리적으로 할 수 없기 때문에 시력이 부족한 고양이를 보아라, 그들은 최소한, 스크린 리더와 같은 기술을 사용합니다 페이지에있는 단어를 그들에게 읽어주십시오

우리는 그들에게 대체 버전을 설명 할 수있다 이 이미지는 문자 그대로 Grumpy Cat이므로 해당 소프트웨어가 구어체로, 그들에게 암송 해 그래서, 비록 그들도, 실망하게 될 것입니다 그들이 내 슈퍼 간단한 페이지를 방문했을 때보고있는 것, 그들은 대체 텍스트를 기반으로 거기에 무엇이 있는지 최소한 알게 될 것입니다 그래서 우리는 나란히 둘 수 있습니다

그래서 우리는 여기에 우리가 무엇을 포함하고 있는지 알아야합니다 그래서, 겁탈 자, 심술 궂은 고양이 좀 보자 저의 폴더에 들어가서 imagehtml을여십시오 그리고 짜잔, 아주 심술 궂은 고양이가있어

아마도 매우 실망한 인간들에게 좋아, 이제 우리는 전체 무리를 보았다 기본 태그 (예 : 본문, HTML, 머리 및 제목 등) 우리는 닻을 보았고, 우리는 이미지, 즉 IMG를 보았습니다 둘 다 몇 가지 필수 속성이 있습니다 HTML로 할 수있는 다른 것들은 무엇입니까? 이 예제를 보겠습니다

여기 – paragraphshtml– 겉으로보기에는 [들리지 않는] 무리가 있습니다 내가 방금 휘젓은 텍스트 그리고 세 단락의 텍스트가 있음을 주목하십시오이 세 단락 모두 꽤 길다

그리고 책처럼, 나는 형식을 꽤 멋지게 꾸몄다 Enter를 두 번 치고 들여 쓰기를하면됩니다 책의 한 장과 같이 읽도록하십시오 다시 한번, 이것은 paragraphshtml입니다

하지만이 페이지를 열면 실제로이 긴 텍스트가 나옵니다 사실 여기에 라틴어 또는 가짜 라틴 문자와 같은 텍스트가 있다는 점을 감안할 때, 단락이 어디에 있어야하는지는 분명하지 않습니다 하지만 그들이 3 살이라는 것을 알고 있습니다 그럼에도 불구하고 이것은 단지 하나의 텍스트 글로블입니다 실제로 줄 바꿈이 없습니다 그래서 온전한 검사

대부분의 브라우저에서는 소스를 볼 수 있습니다 브라우저 자체의 코드 텍스트 편집기가 필요하지 않습니다 이 방법으로는 변경할 수 없지만 적어도 볼 수는 있습니다 따라서 일반적으로 웹 페이지를 마우스 오른쪽 버튼으로 클릭하거나 제어 할 수 있습니다

그리고 다음과 같은 것을 선택하십시오 실제 HTML을 보여줄 것입니다 그러자 그리고 확실하게, 여기이 크롬 페이지는이 웹 페이지의 소스 코드를 보여줍니다 그리고 멋진 들여 쓰기와 줄 바꿈을 볼 수 있습니다

사실 여기에 줄 사이에 이러한 틈이 있다는 사실은 실제로 파일에 있습니다 페이지의 실제 렌더링을 브라우저로 돌아 가면, 모든 줄 바꿈은 무시됩니다 무슨 일 이니? 음, HTML은 꽤 문자 적 ​​언어입니다 그것은 단지 당신이하기를 지시 한대로 할 것입니다 또는 실제로 브라우저는 HTML이 지시하는 대로만 수행합니다

그래서 제가 말하지 않았다면, 브라우저, 여기에 단락을 넣으십시오 그것은 내가 원하는 것을 정말로 알지 못할 것입니다 실제로 우리는이 인간 관습을 보았습니다 나 같은, 캐리지 리턴을 많이 가지고, 또는 새로운 라인과 파일, 또는 많은 들여 쓰기가 필요합니다 정말로, 페이지를 예쁜 인쇄물로 유지하기 위해서 말했듯이, 멋지게 형식화되었습니다

그래서 그것은 매우 인간이 읽을 수 있습니다 그러나 컴퓨터는 코드가 실제로 얼마나 깔끔한 지 신경 쓰지 않습니다 그들은 단지 위에서 아래로, 왼쪽에서 오른쪽으로, 그들이해야 할 일 안녕하세요, 여기 웹 페이지가 있습니다 헤이 브라우저, 여기에 머리가 온다

안녕하세요, 여기에 제목이 있습니다 그들은 HTML 태그의 형태로 명령이나 명령을 필요로합니다 그래서 실제로 태그와 HTML이 있습니다 우리가이 문제를 해결하도록 허락 해주십시오 우리는 브라우저에 대해보다 명확하게 설명해야합니다

그리고 실제로 저는 앞으로 나아가고 여기에서 할 일은 열려 있습니다 단락 태그, 대괄호, p 그리고 들여 쓰기 그리고 저는 앞으로 가서 단락을 닫을 것입니다, 그게 단락을위한 브라우저입니다 그러면 나는 앞으로 나아가서 다른 것을 넣을 것입니다, 그 안에 코드 블록을 들여 쓰기합니다

정말로 물건을 깔끔하게 유지하는 것 그리고 나서 저는이 것을 닫을 것입니다 그런 다음 저는 한 번 더 열어 볼 것입니다 이 마지막 단락 들여 쓰기 그리고 여기 아래로 나가서 이것을 닫을 것입니다

페이지의 내용이 변경되지 않은 경우에도 마찬가지입니다 나는 여전히 정확한 3 단락 만 가지고있다 그리고 나는 그들 사이에 시각적 인 공간을 가지고 있습니다 이제 저는 좀 더 강조적이고 의미 론적 인 명령을 받았습니다 이러한 p 태그의 형태로, 헤이 브라우저, 단락 시작, 단락을 끝내라

안녕하세요, 브라우저, 새 단락 시작, 단락 끝내기 등등 이제 브라우저로 돌아가서이 같은 페이지를 새로 고치면, 이제 실제로 의도 한 세 단락을 얻습니다 그래서 한 편으로 HTML은 공백과 탭에 매우 관대합니다 그리고 성격 – 탭 문자 등을 코드의 가독성을 높여 준다 그러나 물론, 그것은 의미에서 사물을 복잡하게합니다

우리는 브라우저에 익숙해 지도록 조심해야합니다 우리가 원하는 것을 말하십시오 이제 포맷팅은 어떻게해야할까요? 제 말은,이 페이지는 이전보다 더 흥미롭지가 않습니다 음, 예를 들어 설명해 보겠습니다 나는 headings

html이라는 이름으로 사전에 만들었습니다 Dot 이것은 많은 단어를 가지고 있지는 않지만 더 많은 태그를 가지고 있습니다 그것에는 H1 꼬리표, H2 꼬리표, H3, H4, H5 및 H6가있다, 제 611 호에서 제 1 호까지이다 이제, 몇 년 전에 브라우저가 나타났습니다 표제에 대한 표준 태그가있을 것이라고 결정했습니다

페이지의 챕터 나 책의 섹션 또는 하위 섹션과 마찬가지로, 또는 하위 하위 섹션 각각은 일반적으로 여전히 탁월하고 대담한 종류이며, 일반적으로 기본적으로 그러나 조금 작아지고, 조금 작아지고, 조금 작아 그리고 실제로, 당신에게 이런 것들이 어떻게 생겼는지에 대한 감각을 줄 수 있습니다 브라우저에서 열어 보겠습니다 Headings

html, 그리고 확실히, 1, 2, 3, 4, 5, 6 여전히 대담하고, 당신은 여전히 ​​여섯 가지 단어를 모두 보았습니다 그러나 그들은 점점 작아진다 아이디어는 일반적으로 헤더에 전달된다는 것입니다 텍스트 상단, 책이나 챕터 등에서

이제 도구 키트에 포함 된 도구가 있습니다 글쎄, 우리가 할 수있는 또 다른 것? 내가 listhtml을 열면, 브라우저는 자동 목록도 지원합니다 그래서 만약 내가 순서가 정해지지 않은 목록을 원한다면 컨벤션에서와 같이 총알이 나왔다면 UL, 닫는 괄호를 열 수 있습니다 그런 다음 목록 항목 전체 또는 LI 태그 목록 항목을 가질 수 있습니다

Foo, bar 및 baz, foo, bar 및 baz는 어리석은 단어입니다 컴퓨터 과학자들은 자리 표시 자 단어 만 필요할 때 사용하는 경향이 있습니다 대수학 에서처럼 x, y, z를가집니다 그래서이 목록 항목들을 닫습니다 정렬되지 않은 목록을 닫습니다

어떻게 생겼는지 보자 앞서 브라우저에서 열면 listhtml, 나는 foo를 보았을 것이다 bar, baz 그러나 브라우저는 나에게 매우 멋지게 3 개의 총알을 줬다

하지만 알다시피, 정렬되지 않은 목록 일종의 세계에 다른 유형의 목록이 있어야한다고 제안합니다 주문 목록처럼 그리고 필자가 텍스트 편집기로 돌아가 UL을 OL로 변경하면, 내 파일을 다시 저장하고, 브라우저로 돌아가서 페이지를 다시로드하고, 아마 어떤 일이 일어날 지 짐작할 수 있습니까? 정렬되지 않은 목록에서 정렬 된 목록으로 이동했습니다 내가 다시 가서 재 장전하자 아하! 브라우저가 나를 위해 번호 매기기를 처리했습니다

그래서 조금씩 좋은 기능이지만 지금은 나는 지금 생각할 필요가 없다 왜냐하면 이제는 나를 위해 번호를 매기는 것이기 때문이다 좋아, 그럼 웹 페이지에서 내가 뭘 할 수 있을까? 음, tablehtml을 열어 보겠습니다 언뜻보기에는 조금 더 압도적으로 보입니다

이제 데이터를 표 형식으로 레이아웃하는 것이 웹에서 매우 일반적이라는 것이 드러났습니다 스프레드 시트와 같은 행과 열이 있습니다 그럼, 어떻게하는거야? 그것은 겉보기에 그렇게 복잡한 레이아웃이기 때문입니다 다행히 우리는 우리 몸에 테이블 태그를 붙일 수 있습니다 실제로 의미하는 또 다른 태그

TR, 젠장, 우리는 비밀 태그로 돌아 왔어 테이블 행에 대한 TR 쓰는 것보다 간결하게, 테이블 행 TD, 테이블 데이터 그런 다음 여기, 테이블 행을 닫고 테이블을 닫습니다

그리고 그 안에는 닫힌 테이블 데이터도 있습니다 그래서,이 일이 무엇이고, 어떻게? 테이블이 무엇인지 생각하면, 그것은 행의 전체 낱단, 하나씩, 하나는 위쪽에, 다른 하나는 아래쪽에 있습니다 표 데이터는 페이지의 열 또는 실제 셀과 같습니다 여기 브라우저가 있습니다 여기 테이블이 있습니다

이봐, 브라우저, 여기 테이블의 첫 번째 행이 온다 안녕하세요, 여기 브라우저가 있습니다 안녕하세요, 여기 브라우저가 있습니다 안녕하세요, 여기 브라우저가 있습니다 안녕하세요, 첫 번째 행에 대한 브라우저입니다

이것이 하나, 둘, 셋의 데이터입니다 또는 첫 번째 행에는 실제로 하나, 둘, 셋 열 또는 셀이 있습니다 이봐, 브라우저, 여기에 두 번째 줄, 점, 점, 점이 온다 이봐, 브라우저, 여기에 세 번째 줄, 점, 점, 점이 온다 이봐, 브라우저, 네 번째 줄, 점, 점, 점

그리고 주목해라, 나는 각 행이 세 개의 테이블 데이터가 있으므로 모든 것이 의도 한대로 정렬됩니다 그리고 주목해라, 단지 재미로, 나는 중앙에 약간의 수를 뒀다 별표를 더한 다음 0을 입력하고 날카로운 기호를 입력하십시오 그리고 지금 HTML을 테이블 점으로 열어 보겠습니다 그리고 짜잔! 전화 키패드 중 가장 단순한 것을보고 매우 실망 할 것입니다

요즘 집 전화 나 휴대 전화에 가지고있을 수도 있습니다 그러나 모든 것이 행과 열로 깔끔하게 정리되어 있습니다 그리고 그것은 하나의 숫자 일뿐입니다 더 흥미로운 일을하십시오 실제로 단어, 구 및 복잡성은 여전히 ​​있습니다

그러나 내 맙소사, 이것은 아직도 너무나 실망 스럽습니다 내 말은, 우리는 단지 안녕하세요 세상에서 시작했고, 우리는 우리는 하버드 edu에 대한 링크를 줬다 그리고 우리는 심술 궂은 고양이와 함께 일을 더욱 늘렸다 그런 다음 우리는 이러한 추가 태그 중 일부의 잡초에 빠져 들었습니다

그래서 우리는 지금 더 많은 어휘를 가지고 있습니다 툴킷의 도구 더보기 그러나 실제로 웹 사이트를 좀 더 역동적으로 만드는 방법은 무엇입니까? 실제로 사용자로부터 입력을받을 수 있습니까? 글쎄, 이걸로 먼저 알아 내려고하자 googlecom 자체가 어떻게 작동하는지 그리고 우리가 조금씩 구글을 다시 구현할 수 없는지 확인하십시오

Googlecom으로 이동하여 입력하십시오 그리고 몇 가지 점에 유의하십시오 하나, 상단에, 내가 Googlecom에서 본적이 아니라, 그 자체로, 나는 www

googlecom에있다 아직 정확한 사이트가 아닙니다 https : //를 통해 wwwgoogle

com에 있습니다 하지만 https : //를 입력하지 않았습니다 나는 www를 입력하지 않았다 방금 googlecom을 입력했습니다

그래서 실제로 거기에 무슨 일이 일어나고있는 걸까요? 글쎄, 전세계 웹이 완전한 형식의 URL을 사용해야한다는 사실이 밝혀졌습니다 당신을 올바른 장소로 데려 오기 위해 HTTP로 시작하든, HTTPS 또는 심지어 file : // 브라우저는 오늘날까지도 꽤 많이 월드 와이드 웹을 검색하는 데 사용되는 몇 가지 자유가 걸립니다 따라서 googlecom을 입력하면 대부분의 브라우저가 http://google

com을 원한다고 가정합니다 HTTP는 다시 브라우저가 사용하는 프로토콜이기 때문에 그 서버와 대화 할 것입니다 이메일 프로토콜, 화상 회의 또는 채팅 프로토콜과는 달리, 또는 뭔가 다른, 브라우저는 단지 예기치 않게,하지만 꽤 합리적으로, 의도적으로 어떤 프로토콜을 원하는지 추측하고 있습니다 또한 일부 브라우저는 이 접두어 www가 여전히 하위 도메인으로 매우 일반적입니다 또는 웹 사이트의 호스트 이름

단지 Google뿐 아니라 wwwgooglecom이기도합니다 일부 기술적 인 목적을 위해 브랜딩 목적을 위해 실제로, 일부 개인 정보 보호 목적으로 그러나 실제로 그것은 단지 관례 일뿐입니다

인간이 www라는 접두어로 웹 사이트를 시작하면 월드 와이드 웹이됩니다 그러나 꼭 필요한 것은 아닙니다 그러나 브라우저는 googlecom과 같은 경우가 있습니다 어딘가로 이끌지 않았고, 아마 당신 앞에 www가 선다

또는 서버 자체가 mm, mm, Googlecom에 가지 말고, wwwgooglecom으로 이동하십시오 그래서 실제로 다음과 같이 실제로이 모호성을 모두 볼 수 있습니다

여기, 나는이 흑백 창문에 터미널 창을 가지고있다 내 Mac에서 그리고 Windows, Linux 및 기타 운영 체제에도 이러한 기능이 있습니다 그리고 커맨드 라인 프로그램을 운영 할 것입니다 여기에서는 cURL이라고하는 우리의 목적을 위해 계몽적인 것입니다

정말 브라우저 인 척하는 프로그램입니다 실제로 가상 봉투 중 하나에서 문자 메시지를 보내고, 서버에 그리고 그것은 우리에게 원시 형태로 돌아 오는 것을 보여줍니다 브라우저가 아니므로 입력 할 수있는 URL 표시 줄이 없습니다 이 흑백 창만 입력 할 수 있습니다

하지만 그것은 서버에 봉투를 보내도록 할 것입니다 그리고 응답 봉투를 돌려 받고 실제로 그 안에 무엇이 있는지 확인하십시오 실제로 웹 페이지를 렌더링하지 않아도됩니다 그래서 저는 이것을 다음과 같이 할 것입니다 계속하겠습니다

Googlecom, Enter를 누르십시오 그리고 다음 HTML이 돌아온 것을 볼 수 있습니다 우리가 지금까지 본 것조차도 그렇게 좋아하지 않습니다 실제로 대문자로되어 있습니다

사실 약간 날짜가 맞았습니다 지금은 괜찮지 만 너는 알 수 있겠지 – 이상 하네 구글이 움직였다

그러나 301이 이전에 그 상태 코드 중 하나였던 것을 기억하십시오 브라우저가 다른 URL을 다시 방문해야한다는 뜻입니다 실제로이 문서는 http : //와 wwwgooglecom으로 이동했습니다

명시 적 접두어 게다가, 내가이 일을하게 해줘 대시, 대문자 I, 명령, 라인 인수로이 명령을 다시 실행 시키십시오 이것은 응답의 본문이 아니라는 것을 보여줍니다 그러나 오히려, HTTP 헤더

그래서 다른 점에 주목하십시오 이것은 궁극적으로 봉투 안쪽에있는 것입니다 Google에서 돌아 왔습니다 그것은 궁극적으로 우리가 신경 쓰는 것입니다 그러나이 봉투 안에는 하나 이상의 HTTP 헤더입니다

그 중에는 200 OK 또는 301과 같은 상태 코드가 있습니다 여기서 보았 듯이 영구적으로 이동했습니다 그래서 같은 명령을 다시 실행하면 대시 I로 된 cURL, 나는 봉투 안을 정말로 깊게 볼 수 있습니다 이러한 모든 HTTP 헤더가 무엇인지와 마찬가지로, 왜냐하면 그들은 브라우저를위한 것이기 때문입니다 그러나 그들은 그들을보고, 우리가 무슨 일이 일어나는지 이해하도록 도와줍니다

그러면 Google의 봉투에 다시 들어가는 헤더는 무엇입니까? 글쎄, HTTP 11, 301 영구히 옮겼다 흥미로운 점은 구글이 가지고있는 것, 포장 된 것, 다른 곳으로 갔다는 것입니다 하지만 어디? 위치로 따라서 두 번째 줄은 두 번째 HTTP 헤더입니다

그건 내 브라우저에서 그 봉투 어딘가에 자리 잡고있어 그리고 브라우저에,이 URL로 이동하십시오 Googlecom으로 이동하지 않고 HTTP를 사용하여 wwwgoogle

com으로 이동하십시오 왜? Google이 그렇게 말했기 때문입니다 Google의 직원이 서버를 구성했습니다 www가있는 URL로 사용자를 리디렉션하는 것입니다 아마 부분적으로 마케팅적인 이유로, 기술적 인 이유로 부분적으로, 그러나 그것은 서버가 말하는 것입니다

다른 정보도 있습니다 이 메시지의 내용 유형은 텍스트, 슬래시, HTML입니다 이 경우에는 UTF 8 또는 유니 코드라는 것을 사용합니다 ASCII의 상위 집합 이 요청을 보낸 정확한 날짜와 시간, 응답이 만료되면 사실, 구글은 우리가 이 응답을 한 달 동안 우리의 컴퓨터 RAM에있는 우리의 기억에 보관할 수 있습니다

그리고 나서 한 달 동안 다시이 질문을하지 마십시오 구글은 똑같은 말을 계속해서 할 것이다 그리고 몇 가지 더 낮은 수준의 기술이 있습니다 더 많은 기술적인 HTTP 헤더가 있습니다 우리는 이제 손을 흔드는 것입니다

하지만 내 브라우저가 도움이 될만한 사람을 찾을 수 있습니다 좋습니다 그렇다면 Google이 문자 그대로 영구히 이사 왔다고 말하면, 301 상태 코드마다 그리고 새로운 위치는 여기에있는 URL입니다 글쎄, 그 URL로 가자

계속해서 다시 시작하고 cURL하십시오 http://wwwgooglecom, Enter 흥미 롭 군

이제 전체적인 긴 웹 페이지를 보았습니다 그게 포함되어있는 것 같은데, 나는 뭘 모르겠다 그래서, 이것은 우리가보고있는 HTML 전자 메일이 아닙니다 여기 화면 하단에 있습니다 이것은 자바 스크립트라는 프로그래밍 언어입니다

실제로 HTML과 CSS와 함께 사용할 수 있습니다 함께, 웹 페이지를 만들 수 있습니다 그러나 내가 충분히 높은쪽으로 스크롤하면, 당신은 결국 볼 것입니다, 아! 흥미 롭 군 페이지에서 실제 HTML을 볼 수 있습니다 그리고 실제로, 만약 내가 지금 같은 명령을 재실행한다면, 대쉬로, 대문자 I, 그래서 나는 헤더를 얻는다

공지 사항, 아, 이번에는 200 OK입니다 그리고 서버가 실제로 리디렉션하지 않고 응답했습니다 어딘가에 좋아요, 그렇게 봉투의 깊숙한 곳입니다 이 HTTP 헤더

이제 실제 브라우저로 돌아가 보겠습니다 그것은 이러한 요청을하고 있습니다 그리고 어떤 URL이 요청되는지, 그리고 가장 먼저 GET 요청이 무엇인지 확인하십시오 나를 보내서 좋아하는 고양이를 찾아 보자 그러면 URL 상단의 상단에 표시됩니다

꽤 긴 일련의 문자로 변경되었습니다 그리고 솔직히, 나는이 문자들의 대부분이 의미하거나하는 것조차 모른다 그것을 이해하는 것은 Google에게 달려 있습니다 그러나 나는 고양이를 찾고 있다는 것을 알고 있으며 솔직히, 때때로 나는 호기심이 생기고 웹 사이트를 샅샅이 뒤질 것입니다 나는 무슨 일이 일어나는지 이해할 수 있는지 알아보기 위해 땜질하기 시작할지도 모른다

이제 URL을 대부분 삭제하겠습니다 그런 다음 더 많은 URL을 삭제하십시오 여기에이 내용을 https://wwwgooglecom/search에서 바로보실 수 있습니다

실제로 Chrome이 여기에서 나를 리디렉션 한 것으로 보입니다 HTTPS에 연결하여 연결이 안전하도록해야합니다 우리는 커맨드 라인 버전의 cURL에서 볼 수 없었습니다 슬래시, 검색, 물음표 q는 고양이와 같습니다 내가 Enter를 치자

정확히 같은 검색 결과처럼 보입니다 그래서 흥미롭게도, 고양이를 검색 할 때 Google은 이전에 슈퍼 긴 URL을 사용했지만, 내가 이해하지 못했던 많은 것들이 그것이 꼭 필요한 것은 아닌 것처럼 보입니다 충분한 정보가있는 것처럼 보입니다 고양이의 검색 결과를 얻으려면 이처럼 보이는 URL이 없어야합니다 이제이 정보를 사용하기 때문에 유용합니다

내 자신의 검색 엔진을 만들기 위해 내가 먼저 가서 시작하자 Atom에서 파일을 만들자 그것은 궁극적으로 searchhtml입니다

나는 보통 doc 타입으로 시작하겠습니다 그런 다음 HTML 페이지와 함께 본문 인 웹 페이지를 시작하겠습니다 머리를 숙이고 머리를 닫으십시오 그리고 여기에 제목이 있습니다 그리고 저는 이것을 찾아서 검색 할 것입니다

그래서 어느 페이지가 어떤 것인지 기억하고 있습니다 여기에 내 몸, 가까운 몸이 될 것입니다 이제 새로운 태그를 도입해야합니다 이것은 HTML 형식입니다 어떤 종류의 텍스트 상자, 아마도 체크 박스, 버튼, 라디오 버튼, 내가 실제로 정보를 제출할 수 있도록 내 페이지를 Google에 남겨주세요

연습에서 form이 action 속성을 취한다는 것을 알았습니다 이 경우 어느 쪽이 될 것인가, 나는 사지에 나갈 것이다 여기, wwwgooglecom, 검색을 수행하십시오

그리고 그게 다야 그리고 저는 GET이라는 메서드를 사용할 것입니다 다른 유형이 있다는 것이 밝혀졌습니다 웹 페이지로 만들 수있는 요청 수 기본값과 GET이 가장 일반적입니다 그리고 우리는 이전에 키워드를 문자 그대로 보았습니다

여기서는 소문자로 쓰여 있습니다 그러나 다른 문맥에서는 대문자로 쓰여 있습니다 HTTP 11을 우리가 본 최초의 메시지였습니다 그래서 여기에서, 나는 그 방법을 사용하는 것에 대한 반복을 봅니다

그리고 이것은 post, put, and patch, delete와는 대조적입니다 또한 지원되지만 일반적으로 사용되지는 않습니다 인간도 같은 방식으로 이 양식의 내부에는 input이라는 다른 태그 하나를 도입 할 예정입니다 저는이 입력에 q의 이름을 부여 할 것입니다 그리고이 입력의 유형은 텍스트가 될 것입니다

그리고 그게 다야 전 태그를 열고 닫을 것입니다 이 입력의 내부에는 아무 것도 없을 것이기 때문에 급감했다 정의에 의해 한편, 나는 다른 하나의 입력 유형을 갖게 될 것이지만, 이것은 제출 유형이 될 것입니다

그리고 가치, 또는 그것에 대한 레이블은 단지 검색 일뿐입니다 따라서 이전에 이러한 태그 중 일부는 보지 못했습니다 그러나 당신은 아마 일어날 일을 추측 할 수 있습니다 여기 브라우저가 있습니다 여기 양식이 있습니다

안녕하세요, 브라우저에서 입력 텍스트를 입력 해주세요 안녕하세요, 브라우저에서 유형 제출 입력을주세요 그리고 관례 상이 버튼은 하나의 버튼이 될 것입니다 그래서이게 나에게 줄 것 같니? searchhtml을 열면 이걸 보면 나에게 줄 것 같습니다

와우, 나는 그것을보기 위해 정상에서 줄곧 위로 향해야한다 슈퍼 간단한 텍스트 상자, 슈퍼 간단한 검색 버튼, 그리고 그게 전부 야 그러나이 예에 관해서는 마술 적입니다 HTML의 일부를 알고 있기 때문에 지금 할 수있는 일을 주목하십시오 계속해서 축소하고 고양이를 검색 한 다음 검색을 클릭 할 수 있습니다

그리고 데이터베이스를 구현하지는 않았지만 웹 서버는 말할 것도없고, 혼자서 웹 검색 엔진은 말할 것도없고, 나는 그 세부 사항을 Google에 전달하십시오 그리고 사용자에게 Google로 보내는 한, 나는 그들에게 고양이를 줄 수있다 그리고 당신은 이것이 일종의 미리 만들어 졌다고 생각하지 않도록하겠습니다 고양이뿐만 아니라 개를 찾기 시작하십시오 그리고 내 동일한 형태가 다른 동물을 위해 작동하는지 확인하십시오

그리고 실제로, 돌아 오는 가장 귀엽다 개가 또한있다 그리고 무슨 일이 일어나고 있는지 주목하십시오 내 Mac에서 실행되는 웹 페이지는 HTML로 작성되며, 액션 속성과 특정 메소드가있는 HTML 양식을 사용하고 있습니다 그리고 브라우저는 HTML 양식을 충분한 정보로 사용하고 있습니다 URL을 조합합니다

사용자에게 보내는 입력 텍스트 상자에 입력 할 때, 해당 제출 단추를 클릭하십시오 실제로 Googlecom 슬래시 검색, 물음표, q는 개와 같습니다 물음표가 의미하는 바는 브라우저, 오히려 서버, 여기에 내 HTTP 매개 변수가옵니다 이러한 키와 값, q와 같은 이름, 키 및 개 값

그래서 내 질문 q는 개와 같습니다 여러 매개 변수가있을 수 있습니다 따라서 앰퍼샌드가 나타날 수도 있습니다 앞에서봤을 때와 같이, 내가 그들을 지우기 전에 그러나 오늘 우리의 목적을 위해서, 우리는 단지이 하나의 매개 변수만을 필요로합니다

따라서 실제 검색 엔진을 구현하는 데 집중하지 않을 것입니다 지금 당장은 다른 누군가가 우리를 위해 그것을 만들 것이라고 가정합니다 그러나 적어도 우리 웹 페이지를 조금 더 예쁘게 만들 수 있는지 보자 또는 적어도 우리의 웹 사이트를보다 잘 설계 할 수있는 길을 열어 놓으십시오 어떻게하는지

저를 css0html을여십시오 이제는 마지막 일련의 예제 중 첫 번째입니다 여전히 다른 언어를 소개합니다 우리는 HTML, HyperText Markup Language에 초점을 맞추어 왔습니다

이 모든 태그와 속성입니다 그리고 그것은 우리가 우리 웹 페이지를 구조화 할 수있게 해줍니다 문자 그대로 웹 페이지에 정보를 표시합니다 그래서 우리는 무엇이 어디로 가고 어떻게 표시하는지 알게됩니다 그러나 우리는 브라우저의 기본 스타일이 다소 불편하다는 것을 알았습니다

흑백, 배경 및 텍스트와 같습니다 표제는 크고 굵게, 작고 굵게 표시됩니다 그리고 정말로 그 모든 흥미로운 것은 아닙니다 내 말은, 세상에, 글꼴은 기본적으로 Times New Roman과 같습니다 더 잘할 수 없나요? 글쎄, 할 수있어

실제로 현대 웹 개발을 통해 HTML뿐만 아니라, CSS, Cascading Style Sheets, 웹 페이지에서 마지막 마일 스타일링을 할 수 있습니다 웹 페이지에서이 구조를 가져 오려면, 그것을 더 예쁘게 보이도록 조정하십시오 원하는대로 정확하게 레이아웃되어 있습니다 브라우저가 기본적으로 레이아웃을 지정하는 방법 그럼 우리가 어떻게해야합니까? 다음은 CSS 제로입니다

그리고 몇 가지 새로운 태그, 머리글, 기본 및 바닥 글을 보게 될 것입니다 웹 페이지의 상단 부분 인 머리와 혼동하지 마십시오 머리말은 의미 론적으로 몸의 맨 위에있는 부분입니다 메인은 몸의 주요 부분입니다 바닥 글은 본문의 맨 아래 부분입니다

그러나 우리는 이러한 태그를 사용할 필요가 없으며 다른 이름을 사용할 수도 있습니다 참조 또는 온라인 리소스에서 찾을 수 있습니다 그러나 나는이 페이지의 세 부분, 머리글, 주 및 바닥 글을 가지고 있습니다 그 중 첫 번째는 존 하버드 (John Harvard) 내 홈페이지에 오신 것을 환영합니다 마지막으로 내 저작권 기호입니다

페이지에 작은 꼬리말로 그러나 내가 한 일에 주목하십시오 나는 그 태그들, 헤더, 메인, 꼬리말을 각각 추가했다 스타일 속성 우리는 전에 보지 못했던 곳입니다 그리고 제 스타일 속성은 녹색으로 여기에 많은 속성이 있습니다

우리가 전화 할게 이러한 속성은 기술적으로 HTML이 아니며, 이러한 속성은 모두 다른 언어입니다 고맙게도 영어와 비슷하지만 형식을 알 수 있습니다 또 하나의 핵심 가치 쌍 패러다임입니다 따라서 우리는 URL에서 q equal 검색과 같은 HTTP 매개 변수를 보았습니다

또는 q는 고양이와 같거나 q는 개와 같습니다 비슷하게, CSS뿐만 아니라 HTTP도이 개념을 가지고 있습니까? 키와 값, 키와 값 그러나 구문은 다릅니다 이번에는 콜론과 세미콜론을 사용하여 항목을 구분합니다 그래서 CSS라는 언어로 불리는 속성이 있습니다

글꼴 대시 크기 그 후에 콜론을 넣습니다 그 다음에는 원하는 글꼴 크기를 지정합니다 CSS (이 언어)는 크고 작은, 그리고 몇 가지 다른 단어들도 있습니다 또는 말 그대로 16 포인트, 태평양 표준시를 넣을 수 있습니다

또는 픽셀 당 24 픽셀 그리고 몇 가지 다른 측정 시스템도 있습니다 그러나 나는 앞으로 나아갈 것이고 여전히 약간의 친척을 남겨 둘 것입니다 브라우저로 하여금 큰 것을 알아 내도록하십시오 텍스트 대시가 콜론 센터를 정렬하면 텍스트를 중앙에 배치합니다

그리고이 속성들을 세미콜론으로 구분했습니다 그리고이 마지막 하나는 꼭 필요한 것은 아니지만, 하지만 나중에 더 추가 할 경우를 대비해서 거기에 넣습니다 한편, 내 웹 페이지의 주요 부분은 중간 크기의 글꼴이어야하며, 또한 가운데 정렬 그리고 나서 내 웹 페이지의 꼬리말은 작고 센터 정렬되어야합니다 그래서 내가 지금 가서 css0

html을 열면 보자, 알았어, 아직도 꽤 못생긴데, 거기 가네 제가 의도 한대로 지금은 중심에 있고,이 글꼴은 이것보다 조금 큽니다 이것보다 그래서 그런 식으로 계층 적으로 배치됩니다

그러나주의하십시오, 나는 최선의 방법으로 이것을 실제로하지 않았습니다 중복성이 많은 것처럼 보입니다 글꼴 크기는 다양합니다 그러나 변화가없는 것은 무엇입니까? 예, 텍스트 정렬 센터, 텍스트 정렬 센터, 텍스트 정렬 센터와 같습니다 그것은 내가 복사하고 붙여 넣은 것 같은 종류의 절름발이입니다

그 곳 곳곳에, 정말로 내가 레버리지를 사용하지 않을 때 HTML의 계층 적 특성 캐스 케이 딩 스타일 시트가 캐스 캐 이드 여러 가지 방법으로 하나, 실제로 여러 개의 CSS 파일을 가질 수 있습니다 그 중 하나는 곧 볼 수 있습니다 다른 파일을 덮어 쓸 수있는 파일 등이 있습니다 그러나 주목할 것은, 그들은 또한 계층 구조의 일부 개념을 지원한다는 것입니다

따라서 머리글, 주 및 바닥 글을 원한다면 태그는 모두 텍스트 정렬 중심으로 정렬됩니다 음, 공통 조상을 갖습니까? 말하자면 가계도와 같은 웹 페이지를 생각하면, 트리의 뿌리가 HTML이고 두 개의 자식, 머리 및 몸이 있습니다 실제로, 우리는 이것을 볼 수 있습니다 이 HTML을 고려해보십시오

가장 간단한 웹 페이지였습니다 우리가 시작했을 때, 당신은 실제로 이것이 친절하다고 생각할 수 있습니다 다음과 같이 가계도와 같습니다 전체 문서를이 노드로 생각하면 말하십시오 아래에는 HTML 태그 또는 요소가 있습니다

일반적으로 HTML 요소에는 head와 body라는 두 개의 자식이 있습니다 그리고 그들은 심지어 아이들이라는 의미에서 심지어 두 가지 모두 HTML 태그 내부에 있지만 둘 다 같은 수준에 있습니다 머리는 몸의 옆에 종류, 몸은 머리의 안쪽에 없다 그래서 우리는 개념적으로 같은 차원에서 그릴 수 있습니다 한편, 페이지의 머리에는 제목 하위가 있습니다

제목 태그에는 내부에 hello world 문자열이 있습니다 그 사이에, 몸에는 그것의 자신의 끈, 안녕 세계가있다 그리고 나는 이것들을 다른 모양으로 그렸습니다 그들이 각각 조금씩 다르다는 것을 전한다 문서가 특별하며 전체 파일을 참조합니다

그러나 HTML, head, title 및 body는 모두 HTML 태그입니다 그리고이 타원들, 여기, 안녕하세요 세상, 안녕하세요 세상은 단지 텍스트 노드 일뿐입니다 그리고 실제로 이것은 컴퓨터 과학자가 나무라고 부르는 것입니다 가계도와 다르지 않습니다 그리고 나무에는 노드가 있습니다

그리고이 경우 브라우저가 웹을 수신 할 때 페이지를 가상 봉투 중 하나에 넣고 위에서 아래로 읽습니다 왼쪽에서 오른쪽으로 후드 아래에서 실제로 무엇을하는지는 프로그래밍 코드 덕분입니다 프로그래머들은 구글, 마이크로 소프트, 그리고 다른 사람들은 컴퓨터의 메모리 또는 RAM에 treelike 데이터 구조, 당신이 그것을 그려야한다면, 이것과 같이 조금 생겼습니다 여기에 주목하십시오

머리는 HTML의 자식입니다 그의 시체는 HTML의 자식이며 제목입니다 똑같은 방식으로 머리의 자식이다 그래서 우리가 손에 들고있는 예제로 돌아 가면 헤더와 메인을 알아 차리고, 이 약간 더 복잡한 예제에서는 바닥 글과 바닥 글, 모든 요소의 자식입니다 그들은 모두 몸이라는 동일한 부모의 내부에 있습니다

이것은 말하기를 배제 할 수있는 기회를 제안합니다 이 모든 것들에 공통적 인 CSS 속성 그리고 그것을 부모 엘리먼트에 놓으십시오 그래서 아래로 떨어지게됩니다 그 모든 요소 꼭대기에

그리고 우리는 그것을 여기에서 볼 수 있습니다 이것은 css1html입니다 조금 더 좁은 것을 제외하면 거의 동일합니다 그 텍스트 정렬 센터를 모두 제거하고 넣었으므로 어디서? 몸에 자체 스타일 태그가 붙어 있습니다

그래서 이것은 좋다 그리고 실제로 이것은 이제 한 페이지를 다른 페이지와 구별하는 것입니다 더 좋든 나 빠지 든 설계되었습니다 두 가지 모두 정확합니다 둘 다 정확히 같은 목표를 달성합니다

그러나 솔직히, 이것은 유지하기가 조금 더 쉽습니다 왜? 왜냐하면 내가 여기에서 css1html을 열면, 당신은 내가 중심에서 텍스트의 전체 무리를 볼 것을 알 수 있습니다 하지만 내가 그걸 바꾸고 싶다면 너는 무엇을 알아, 그냥 한 곳에서 텍스트를 왼쪽으로 정렬하고, 페이지를 다시로드하십시오 그리고 지금, 그것은 왼쪽에있는 모든 방법입니다

에디터로 돌아가서 지금 오른쪽으로 변경하면 페이지를 새로 고침하십시오 우 그것이 웹 페이지에서 정렬이 바뀌는 것처럼 들리네 지금은 오른쪽에 있습니다 핵심 테이크 어웨이는, 내가 한 곳에서 그것을 바꿀 수 있다는 것이다

3 개의 장소 대신에 그리고 확실히, 이것은 꽤 간단한 웹 페이지입니다 거기에 그다지 많은 내용이 없습니다 그러나 인터넷상의 실제 웹 페이지에는 거기에 있습니다 많은, 많은, 더 많은 코드 라인

그래서 이러한 종류의 디자인 결정이 훨씬 더 합리적입니다 그리고 더 많은 시간을 절약하십시오 사실 이제는 대안적인 접근 방식을 고려해 보겠습니다 바로 여기에있는 나쁜 원리는 이것입니다 내 웹 페이지의 콘텐츠를 프리젠 테이션과 함께 사용 그것의 미학

그리고 이것은 컴퓨터 과학과 프로그래밍에서, 특히, 일반적으로 눈살을 찌푸리게됩니다 존 하버드 (John Harvard)와 같은 데이터를 내 홈페이지에 오도록 환영하려면, 관심있는 실제 콘텐츠, 혼합 된 콘텐츠 모두 같은 파일에 있고, 같은 줄은 말할 것도 없다 그 데이터의 양식화와 함께 가운데 정렬하거나, 글꼴을 크게 또는 중간으로 또는 작게, 그것은 조금 엉성한 것입니다 또한 협업하기가 더 어려워집니다 당신이 웹 디자인에 정말로 좋지 않다면, 그것의 미학은, 그러나 당신은 확실히 HTML을 만들 수 있고, 당신은 웹 페이지, 아마도 다른 언어로 HTML을 생성 할 수있는 프로그래머 일 것입니다

글쎄, 당신이 가진 누군가와 협력하고 싶다면 더 많은 예술적 눈을 갖게되고, 그 또는 그녀는 귀하의 CSS를 모두 기꺼이 처리하게됩니다 그리고 최종 마일을 웹 사이트에 가져 가면, 그걸 가져 가야합니다 또는 일부 구조적 형태의 그녀 글쎄, 솔직히 말해서 모든 CSS를 한 곳에 담는 것이 좋을 것입니다 그 또는 그녀는 당신과 독립적으로 일할 수 있습니다

따라서 문자 그대로 동일한 코드 행을 변경하지 않아도됩니다 그래서 css2html에서 우리는 그것을 향한 한 걸음을 내딛었습니다 이 줄의 style 속성을 바꾼 것을 보자 여기에 class라는 새 속성이 추가되었습니다

그리고 수업, 나는 임의로 생각해 냈지만, 합리적으로 세 가지 핵심 단어, 크게, 보통, 작은 나는 그것을 foo, bar, bar라고 부를 수 있었다 x, y 및 z 그러나 나는 종류의 종류를 기술하는 낱말을 선택하고있다 이 HTML 요소들, 헤더, 메인, 및 바닥 글

실제로, 내가 위로 스크롤하면, 지금 여기에 무엇이 있는지를 알아 차려라 스타일을 속성으로 사용하는 대신 스타일 속성에 대한 호기심을 사용하는 대신, 스타일 태그로도 존재한다는 것입니다 스타일 태그가 있으면 웹 페이지의 머리 부분에 있어야합니다 그래서 내가 여기까지 스크롤 했어 이제 몇 가지 다른 일을 수행했음을 알게되었습니다

여기에 몇 가지 키워드를 넣었습니다 중심, 대형, 중형 및 소형 각자 나는 고의적으로 점으로 시작했다 종류는 오타처럼 보이지만 그렇지 않습니다 웹 개발에서 컨벤션을 끄면 점을 사용하는 것이지만, 그리고 나서 단어, 당신이 당신 자신의 클래스를 정의하기를 원할 때, 웹 페이지를 양식화하기위한 고유 한 속성 집합

그래서 나는 임의로, 그러나 다시 꽤 합리적으로, 내 생각에, 중심 단어, 중형 문자, 중형 문자, 작은 단어를 생각해 내십시오 그리고 그것들 앞에 점들을 넣어 수업들이되도록하세요 그것들은 이제 브라우저의 어휘에 추가됩니다 특히, 내가 중심에있는 클래스를 사용한다면, 그것은 중심에 정렬 된 텍스트에 적용되는 모든 것을 만들 것입니다 큰 수업을 사용하면 그 내용의 폰트 크기가 크다; 매체, 매체; 작고 작다

그래서 나 자신에게 새로운 퍼즐 조각을 주었다 일종의, 더 잘 설계된 웹을 만들기 위해 사용할 수있는 새로운 빌딩 블록 페이지 내가 그 태그들뿐 아니라 몸 속에서도 한 일을 주목하기 때문에, 나는 이제 몸의 클래스가 중심에 위치하도록 지정했습니다 가운데 맞춤과 관련된 모든 속성을 사용하십시오 헤더는 클래스 클수록, 관련된 모든 프로퍼티를 사용한다

클래스가 크다 중소형, 똑같은 솔직히 말해서 최종 결과는 놀랍지 않습니다 그것은 똑같은 것처럼 보이지만,이 시점에서 더 잘 설계되었습니다 이제는 예를 들어 동료가 자신의 작업을 격리 할 수 ​​있기 때문에 나는 파일의 맨 꼭대기까지, 나는 바닥에서 일한다

솔직히 말해서, 어떤 문제를 일으키는 것 같아요 우리는 그렇게 할 필요가 없습니다 실제로, 우리는 곧 이것을 별도의 파일로 분해 할 수 있음을 알게 될 것입니다 그러나 여러분도 알다시피, 이것은 더 깨끗하게 할 수 있습니다 내가 css3

html을 보여 드리겠습니다 그리고 오, 세상에, 무슨 일이 일어 났는지 알아봐 이제는 HTML 코드를 본질적으로 축소했습니다 저는 이것이 지금은 훨씬 더 읽기 쉽다고 주장 할 것입니다 머리글, 기본, 바닥 글, 시각적 인 산만 함이 없음 속성, 또는 클래스 속성을 포함 할 수 있습니다

내 텍스트는 회색으로, 존 하버드, 내 홈 페이지에 오신 것을 환영합니다 등등은 정말로 나에게 뛰어 내린다 그리고 나는 더 적은 문자를 사용하고 있습니다 그래서 그것의 가독성을 넘어선, 그것을 쓰는 데 더 적은 노력을 기울였습니다 그러나 나는 무엇을 다르게했을까요? 글쎄, 꼭대기에서 이것을 주목해라

CSS와 HTML은 클래스를 지원하지만, 나는 이러한 맥락에서 기술적으로 그들을 필요로하지 않는다 클래스는 스타일을 재사용하는 큰 웹 페이지에 특히 유용합니다 당신이 그들을 사용할 수 있도록 그들에게 이름을주고 싶습니다 당신의 자신의 웹 페이지에 성분으로 어쩌면 그 CSS 수업이나 재료를 다른 사람들과 공유 할 수도 있습니다

하지만 여기서는 텍스트의 중심을 내 페이지 본문에 맞추기 만하면됩니다 헤더의 글꼴 크기를 크게하고 싶습니다 주 글꼴 크기 매체 및 꼬리말 글꼴 크기가 작습니다 그리고이 단어 앞에 어떤 마침표도 없다는 것을 알아 차 립니다 내 웹 페이지의 실제 태그 또는 요소를 이름으로 지정할 수도 있습니다

나는 수업을 추가하는 데 어려움을 겪을 필요가 없다 그게 나에게 도움이되지 않는다면 나는 이것을 단지 이것으로 증류 할 수있다 그리고 선택자를 사용하여 웹 페이지의 미학을 수정하십시오 라는

그리고 실제로, 제가 이것을 열면, css3html도 역시 동일하게 보입니다 하지만 이제는 최종 단계에서 한 단계 더 나아갈 것입니다 css4html에서이 파일을 본질적으로 정리했습니다

여기 스타일 태그에 대한 언급이 없다는 것을 알아 두십시오 내 웹 페이지의 헤더에 오히려, 내 웹 페이지의 머리 부분에서, 우리가 항상 보았던 것처럼 제목 만이, 및 또한 연결 꼬리표 혼란스럽게 이름 지어진, 할 일이없는 파란색 링크를 클릭하면 웹 페이지를 클릭 할 수 있으며 다시 앵커가됩니다 그러나 오히려 href를 연결합니다 따라서 불행히도 속성이 있습니다

똑같은 이름을 지었다 그러나 href css4css는 동일한 폴더에있는 파일의 이름이되고, 그 관계는 그것이 스타일 시트라는 것, 그 태그를 닫을거야 그래서, 여기에 주목해라 나는 나의 웹 페이지의 머리 부분에서 브라우저를 지정하고있다

css4css라는 다른 파일로 링크하십시오 스타일 시트의 관계가 있습니다 다시 말하면 브라우저입니다 제 스타일 시트는 css4

css입니다 그리고 그 파일에 무엇이 있습니까? 말 그대로, 페이지에 있던 것과 똑같은 일 그래서 나는 HTML 파일에서 모든 줄을 추출했다 그리고 그들 자신의 것으로 써라 몇 가지 이유로 유용합니다

하나, 이제는 내 동료가 자기 자신을 벗어날 수 있습니다 그 파일에 전적으로 초점을 맞 춥니 다 어떻게 든 나에게 최후의 버전을 보내라 우리는 함께 작업을 병합 할 것입니다 그러나 둘, 여러 웹 페이지에서 동일한 설정을 사용하려면, 오픈 소스 소프트웨어로 자유롭게 사용할 수있게하려는 경우, 이제 모든 속성, 미학, 하나의 파일로

회사 나 세계의 다른 모든 사람들과 공유하십시오 나는 다른 주제를 가질 수도 있습니다 사실, 소프트웨어, 워드 프레스 또는 다른 종류의 소프트웨어를 사용한 적이 있다면 기본적인 기능을 제공하는 블로깅 소프트웨어 귀하의 계정과 함께,하지만 그것은 또한 당신이 미학을 변경할 수 있습니다 어쩌면 당신은 녹색 테마, 또는 파란색 테마를 가지고, 또는 미니멀리스트 테마 또는 매우 3D 테마, 또는 여러 가지 미학적 변화가있을 수 있습니다 그것들은 일반적으로 다른 스타일 시트의 형태로 구현됩니다

따라서 WordPress와 같은 웹 사이트에는이 중 하나가있을 수 있습니다 모두가 동일한 미학을 사용해야하는 경우 또는 이들 중 2 개, 또는 이들 중 10 개 또는 임의의 수, 또는 어쩌면 그들은 심지어 당신이 맞춤 스타일을 만들도록 해줄 것입니다 귀하의 사이트 또는 귀하의 블로그가 당신과 정확하게 보이도록 구성하는 시트, 너 자신, 의도 해 따라서 CSS를 사용하면 이러한 종류의 맞춤 설정을 할 수 있습니다

하루가 끝나면 웹 개발 코드 작성에 관한 내용입니다 HTML, HyperText Markup Language, 웹 페이지의 구조에 관한 것입니다 머리는 무엇이고, 몸은 무엇이며, 몸은 무엇입니까? 하지만 CSS, Cascading Style Sheets, 웹 페이지를 미세 조정하고 실제로 미학을 제어 할 수 있습니다 그리고 나는 여기에서 가장 예쁜 웹 사이트를 만들지 않았습니다 그러나 이제는 당신이이 빌딩 블록을 가지고 있음이 밝혀졌습니다

당신은 태그가 무엇인지, 속성이 무엇인지, 당신은 그 몇 가지 예를 보았습니다 웹에 대해 더 많은 것을 배울 수있는 실력을 갖추고 있습니다 스스로 개발하십시오 현재 온라인 리소스 또는 자습서 또는 서적 수에 관계없이 당신은 당신의 어휘력을 구축하기 만하면됩니다 다른 태그가 무엇인지 알아야합니다

이러한 태그에 대해 어떤 다른 속성이 존재하는지, 그리고 나서 당신은 벗어나 실행 중입니다 실제로 중요한 것은 궁극적으로 이러한 개념입니다 웹 페이지가 텍스트 파일에 지나지 않는다는 사실 CSS로 작성, 그리고 HTML, 그리고 어쩌면 일부 자바 스크립트 그리고 그 파일은 오늘날 대부분의 사람들이 제 맥에 살았습니다 확실히 드래그 앤 드롭하거나 서버에 업로드 할 수 있습니다

그래서 그것은 file : /// slash가 아니라 http 나 https : //에 있습니다 그리고 인터넷에서 내 웹 사이트를 얻으려면, 그 서버 중 하나만 가지고 있는지 확인해야합니다 그리고 우리 대부분은 나가서 멋진 랙 서버를 구입하지 않습니다 우리 자신의 데이터 센터를 가질 필요는 없습니다 오히려 우리는 무료로 가입하거나, 한 달에 몇 달러를 지불합니다

말하자면, 웹 호스트는 그런 데이터 센터를 가지고 있습니다 누가 그런 서버를 가지고 있습니다 그리고 그들이 나를 위해 만드는 것은 사용자 이름과 암호입니다 그리고 그들은 결국, 정말로 폴더 만 제공합니다 모든 파일을 저장할 수있는 오늘의

html, css, jpep 등 그래서 이제는 내 작품을 넣을 수 있습니다 인터넷상의 특정 URL에서 그리고 내가 도메인 이름을 사야하는 문제에 또한 가면, 1 년에 몇 달러, 또는 몇 년에 몇 달러 씩

그리고 나는 그 도메인 이름을 알기 위해 알아낼 수 있습니다 그 웹 게시물, IP 주소 또는 IP 주소가 가리키는 주소입니다 이제 내 맞춤 도메인 이름을 사용할 수 있습니까? 그래서 지금 나는 전 세계적으로 웹에 나와 있습니다 그래서 필요한 것은 이러한 빌딩 블록입니다 그것이 취하는 모든 것은 HTTP에 대한 이해와 이것이 인터넷의 최상위에서 어떻게 실행 되는가입니다

궁극적으로 인터넷에서 일부 페이지 만 가져올 수는 없습니다 당신 자신이 거기에 둘 수 있습니다

Top 5 Web Design Trends in 2019

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

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

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

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

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

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

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

감사합니다 구독하십시오