Dongi_coding 동기_코딩

안녕하세요. 동기 여러분! 오늘은 한 폴더에 있는 웹 페이지들을 링크하는 방법에 대해 알아봅시다! 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 속성은 재생, 일시정지, 스킵과 같은 일반적인 동영상 플레이어 기능이 들어가 있습니다. 요즘은 너튜브가 대세인데? 위의 방식대로 만약에 유튜브 영상을 가지고..

안녕하세요. 동기 여러분! 오늘은 Alts 속성에 대해 알아보겠습니다. Image Alts alt 속성은 Alternative text에 줄임말입니다. Alternative가 대체 가능한, 대안이 되는 이라는 뜻이 되니까 Image Alts라고 하면 이미지의 대체 가능한 텍스트라는 말이 되겠습니다. 사용 목적 웹 페이지를 로드하는 중에 가끔 이미지가 안 뜨는 경우가 있는데, 이럴 경우 이미지가 있어야 하는 곳에 마우스 커서를 올리면 alt에 작성된 내용이 뜨게 되고 사용자가 읽을 수 있게 됩니다. 시각 장애가 있는 사용자가 화면에 뜨는 내용들을 읽어주는 소프트웨어를 사용할 경우, alt를 통해 이미지도 읽어줄 수 있습니다. alt는 Search Engine Optimization(SEO)에서도 상당히 중..

Сайн байна уу? 샌-배-노? 동기 여러분! 오늘은 몽골어로 인사를 준비해봤습니다ㅋㅋㅋ 제가 러시아어를 뜻은 잘 모르지만 읽을 줄은 아는데요, 몰랐었는데 몽골어를 러시아 철자로 쓰는 게 참 신기하네요! 오늘은 이미지 넣는 법에 대해 알아봅시다. 아마 마크다운을 배우신분들은 눈치를 채셨을 건데 HTML과 마크다운은 상당히 비슷합니다! 갑시다! Images 이미지는 다른 태그들과 달리 뒷 태그(Closing tag)가 따로 없고 앞 태그(Opening tag)에서 마무리를 짓는데 >로 닫기 전에 / (Slash)를 넣어줍니다. 아래와 같습니다. 이미지 태그는 항상 src라는 속성을 지니게 되는데요, src에는 반드시 이미지의 소스나 위치가 지정되어야 합니다. 보통 URL(Uniform resourc..

안녕하세요. 동기 여러분! 오늘 저녁을 맛있는 버섯 전골을 먹고 디저트를 몹시 먹고 싶었지만 꾹 참고 프로틴 바를 먹고 분노의 풀업을 한후에 포스팅 중 입니다. 하하하하하하하하하하하하하하하하하ㅏ하핳. 순서가 있는 리스트와 없는 리스트 작성법에 대해 알아봅시다... Ordered Lists 순서를 1부터 자동으로 지정해주는 태그에 대해 알아봅시다. 사용방법 첫 번째 두 번째 세 번째 ... Ordered list의 준말 태그와 List의 준말 를 사용하는데, 을 부모 요소로 사용하고 그 안에 자식 요소로 를 적어주시면 됩니다. 예 Unordered Lists 숫자로 된 순서가 없는 리스트를 만들 때 사용합니다. 사용방법 순서 필요 없음 디저트 먹고싶다 하지만 난 먹지 않지! ... Unordered lis..

안녕하세요. 동기 여러분! 오늘 알아볼 내용은 진짜 별거 없기 때문에 빨리 갑시다! Line Breaks 줄 바꿈 기능입니다. 개당 한 줄을 바꿉니다. 생김새 닫는 태그는 없어도 됩니다. 예제 디아블로 2의 궁극의 무기, 패이즈 블레이드작 슬픔(구 깊은 고뇌)에 대해 적어 보았습니다. 문장이 끝나는 지점에 을 넣어 줄 바꿈을 해주고 빨간 체크가 있는 부분에는 을 두개를 넣어 두 번 줄 바꿈을 했습니다. 만약 이 없다면 어떻게 될까요? 오늘의 느낌 오늘 저녁은 버섯 전골이다!