Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 테이블(표) 만들기 첫 번째 시간입니다! Create a Table 테이블을 생성하는 방법입니다. 어때요 증말 쉽죠? Table Rows 요즘 나오는 프로그램들은 대부분 테이블을 아주 쉽게 만들 수 있게 준비가 되어 있는데요, HTML에서는 코드를 통해 다 생성을 해주어야 합니다. Table row(행, 가로)를 만드는 방법입니다. Table Data 이제 테이블은 만들 수 있으니 안에 내용을 넣어 봐야겠죠? 여기에 내용 이기도 내용 예 짱구는 못말려의 짱구 가족에 대한 테이블을 만들어 보겠습니다! 그렇습니다. HTML은 코드를 통해 다 생성해줘야 하는 것이지요. 기본으로 검은색 줄 정도라도 나올 줄 알았는데ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..

안녕하세요 동기 여러분! 오늘은 코멘트를 다는 방법에 대해 알아봅시다! Comments 지금은 혼자 코드를 만지고 있지만 실제로 일을 하거나 프로젝트를 진행한다면 코드를 공유하거나 넘겨주는 일이 많을 텐데요, 갑자기 엄청나게 긴 코드를 받으면 한눈에 안 들어오는 경우가 비일비재할 것입니다 또는 내가 쓴 코드조차도 왜 이렇게 작성을 했는지 기억이 안날 수 도 있죠. 그럴 때 사용하는 방법이 코멘트 입니다. Python # 이것은 파이썬의 코멘트 입니다! """ 두줄 이상 사용할 때 쓰는 방법 입니다!!! """ #

안녕하세요 동기 여러분! 오늘은 같은 페이지에 있는 정보에 대해 링크를 거는 방법에 대해 알아봅시다! Linking to Same Page 제가 중학교 때 학교 마치고 집에 와서 학원 가기 전에 신라면을 하나 끓여서 짱구를 틀어놓고 먹으면서 시청했던 추억이자 현재도 많이 시청하고 있는 짱구는 못 말려 나무 위키에 들어가 보았습니다. (짱구 엄마가 이제 나보다 동생...) 짱구는 못말려 나무위키 목차 중에 숫자로 된 부분을 누르면(2를 눌러보았습니다), 위 사진과 같이 줄거리에 대한 내용이 웹 페이지에 바로 뜨게 됩니다. 이러한 기능이 없었다면 우리는 항상 스크롤을 내려서 확인을 해야겠죠! 이 기능에 대해 알아봅시다! 생김새 맨 위로 맨 아래로 맨위로 맨 아래로 여기서 집중해야 할 부분은 id의 값입니다...

안녕하세요. 동기 여러분! 오늘은 이미지로 링크에 연결할 수 있는 방법을 알아봅시다! Linking At Will 태그 안에 태그를 넣어 간단하게 이미지로 링크를 넣어줄 수도 있습니다. 생김새 예 동기코딩의 블로그를 연결해주는 이미지 링크를 만들어 보았습니다. href에 동기코딩 블로그 주소를 넣고 target에는 새창으로 실행 src에는 이미지가 위치한 주소를 넣어주고 alt에는 동기코딩이라고 설명을 넣어 주었습니다. 결과를 보도록합시다! 새창에서 잘 실행되는 모습을 확인할 수 있습니다. 오늘의 느낌 운동을 더 하고 싶다!

안녕하세요. 동기 여러분! 오늘은 한 폴더에 있는 웹 페이지들을 링크하는 방법에 대해 알아봅시다! Linking to Relative Page 웹 페이지를 만들 때, 여러 페이지들을 한 폴더에 넣어 놓고 쓰는 경우가 있는데 이럴 때 쓰는 방법입니다. (참고로 이 한 폴더를 root directory 루트 디렉터리라고 합니다.) 사용방법 클릭할 문구 "./파일이름" 은 relative path(상대 경로)인데, 로컬 파일(루트 디렉터리)의 경로를 컴퓨터에게 알려주는 아주 귀엽고 깜찍한 친구입니다. 이와 반대로 "https://www.사이트이름.com"(a Full URL)은 absolute path(절대 경로)인데, 다른 폴더에 저장된 링크를 가져오려는 경우 사용하는 아주 똑똑한 친구입니다. 예 Diabl..

안녕하세요. 동기 여러분! 오늘은 웹 페이지를 링크하는 방법과 링크한 웹 페이지를 새로운 창에 띄우는 방법에 대해 알아봅시다! Linking to Other Web Pages 앵커(Anchor) 요소를 사용해 다른 웹 페이지의 주소를 따올 수 있습니다. 생김새 클릭하시오 a는 Anchor의 줄임말입니다. href는 Hyperlink Reference(참조한 웹 페이지)의 줄임말입니다. 예 잘 작동하는지 한번 클릭해 보겠습니다! Opening Links in a New Window 앞서 작동해본 예를 보면 링크를 클릭하니 본래의 창(window)에서 동기 코딩의 블로그 페이지가 나왔습니다. 여기서 타깃(Target) 속성을 사용한다면 다른 방식으로 링크를 열 수 있게 됩니다. 생김새 클릭하시오 위의 "열고..

Hola! 동기 여러분! 오늘은 페이지 제목에 대해 알아보도록 하겠습니다. Page Titles 페이지 제목이 무엇인가? 크롬 상단에 탭 버튼에 적혀 있는 이 친구들이 페이지 제목입니다. 코드상에서 태그는 항상 예 비주얼 스튜디오 코드로 떡볶이를 먹고 싶은 마음을 페이지 제목에 담아 보았습니다. 오늘의 느낌 점점 겨울이 다가오고 있어서 그런가 요즘은 운동을 갔다가 오면 너무 피곤함.. 먹고 싶은 거도 너무 많고 이러다 살찌것엌ㅋㅋㅋ

안녕하세요. 동기 여러분 오늘은 태그와 태그에 대해 알아봅시다! The Tag HTML에서 구조(Structure)와 내용(Content)을 만들어 내기 위해서는 반드시 태그를 뒤에 넣어 주어야 합니다. 과 사이에 들어가는 모든 내용들은 HTML 코드로써 컴퓨터가 해석을 하고 태그가 없거나 밖으로 나와있는 코드에 대해서는 컴퓨터가 오류를 내거나 잘못된 해석을 할 가능성이 높습니다. The head 지난 시간에 비주얼 스튜디오의 HTML 문서 자동완성 기능을 사용한 예를 사진으로 다시 보겠습니다. 는 웹 페이지의 속성정보(Metadata)를 나타내 주는 기능을 담당합니다. 메타데이터(Metadata)는 웹 페이지에 직접적으로 보여지지 않는 정보들을 담고 있습니다. 더욱 자세한 내용은 다음시간에 알아보도록 ..

안녕하십니까? 동기 여러분! 오늘은 HTML 문서에 대해 알아보도록 합시다! Preparing for HTML 예전에 풀 스택 강의를 보면서 HTML 문서 틀을 한방에 자동 완성해주는 익스텐션을 다운로드하여 비주얼 스튜디오 코드에서 사용한 적이 있는데, 그 강의는 HTML에 관한 강의가 아니라서 뭔지도 모르고 사용했는데, 지금 와서 보니 아 그때 자동 완성 해준 뭔가 모를 많은 내용들이 이거구나! 하면서 생각이 들더라고요. 위 그림의 빨간 밑줄이 쳐진 은 명령문이자 HTML 문서에 가장 첫 번째 줄에 와야 합니다. 이 친구는 브라우저가 어떤 타입의 HTML 문서가 오는지 예상하고 어떤 버전의 HTML이 사용되었는지 파악하는데 도움이 됩니다. 은 HTML5(버전)과 연관이 되어이 있고 현재 널리 쓰이는 명..

안녕하세요. 동기 여러분! 오늘은 Video 넣는 방법에 대해 알아봅시다! Videos HTML에서는 동영상도 지원을 하는데요, 저번 시간에 알아본 이미지와는 태그가 조금 다릅니다. 사용 방법 동영상이 재생이 안될시 띄울 문구 이미지 태그와 달리 동영상에서는 뒷 태그(closing tag)가 있어야 합니다. 위에서 src= "URL"에는 동영상을 가져올 주소를 넣어주고 width는 동영상의 가로 크기, height는 세로 크기를 나타냅니다. 최적에 동영상 크기를 알아보고 싶다면, 구글에 동영상 크기라고 검색하면 상세히 나와 있습니다. controls 속성은 재생, 일시정지, 스킵과 같은 일반적인 동영상 플레이어 기능이 들어가 있습니다. 요즘은 너튜브가 대세인데? 위의 방식대로 만약에 유튜브 영상을 가지고..