Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 List를 복습하고 Div에 CSS를 연결해주는 연습을 해보고 메타데이터를 알아보도록 합시다. List 복습 리스트 종류는 두가지가 있었는데 1부터 순차적으로 순서가 정해지는 ordered list와 앞에 점이 생기며 순서대로 나오는 unordered list가 있었습니다. 혹시 기억이 가물가물 하신 분들은 제 포스팅을 참고해주시면 감사하겠습니다. https://dongi-coding.tistory.com/75 [HTML] Ordered/Unordered Lists 안녕하세요. 동기 여러분! 오늘 저녁을 맛있는 버섯 전골을 먹고 디저트를 몹시 먹고 싶었지만 꾹 참고 프로틴 바를 먹고 분노의 풀업을 한후에 포스팅 중 입니다. 하하하하하하하하하하하하하 dongi-coding...

안녕하세요 동기 여러분! 오늘도 복습한다 생각하고 이미지와 비디오 추가 방법 빠르게 알아봅시다! Image Video 예 이미지 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 기본 HTML에서 배운 모든 것을 때려 박아 넣었습니다. 태그를 사용해 이미지를 분리시켜주고 태그를 태그로 감싸서 이미지의 설명으로 붙게 만들었습니다. alt도 잊지 않고 사용해주어 사용자들이 검색을 할 때 SEO에 걸리게끔 유도하여 검색 노출빈도를 올려 주었습니다. 가모라 사진을 가져올 때 크기가 너무 커서 style을 적용하여 크기를 적당하게 줄여 주었습니다. 아래는 실행 화면입니다. 비디오 비디오는 위에 소개한 방법보다 아래의 방법을 더 많이 씁니다. (Youtube 기준) ..

안녕하세요 동기 여러분! 오늘은 문단(Paragraph)과 링크 다는 방법(Anchor)에 대해 알아봅시다! 복습하는 의미로 빠르게 갑시다! Paragraph 문단입니다. 생김새 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 아래는 실행 화면입니다. Anchor 태그로 링크를 걸어줄 수 있습니다. href = Hypertext REFerence를 속성으로 넣어서 주소를 넣어주면 됩니다. 태그 사이에는 클릭이 가능한 문구를 넣어줄 수 있습니다. 마블 코믹스 유니버스 1.히어로 가모라 개리슨 케인 갬빗 게이트웨이 건틀릿 고스트 라이더 그래비티 아래는 실행 화면입니다. 아래는 정보 출처인 나무 위키의 모습입니다. 링크 : 클릭 어때요? 정말 쉽죠? 오늘의 느..

안녕하세요 동기 여러분! 오늘은 헤딩(Heading)에 대해 알아봅시다. HTML의 기본을 다 배우신 분들이면 아는 내용이긴 하지만 복습한다고 생각하고 가봅시다! Add a Heading HTML에서 아주 자주 쓰이는 요소가 바아로 Heading입니다. 종류는 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이게 뭔가 싶으신 분들은 웬그막 시청 바랍니다. 링크 : https://www.youtube.com/watch?v=YRuqsIiexgc 대체적으로 은 한페이지에 딱 한 번만 사용하길 권장하는데 2개 넣는다고 오류가 나지는 않습니다. 예 마블 코믹스 유니버스 1.히어로 1.1 히어로 팀 1.2 사이드 킥 2.빌런 2.1 닥터 스트레인지의 주요 악당들 2.2 스파이더맨의 주요 악당들: 시니스터 식스, 스파이더맨 리벤지 스쿼드 ..

안녕하세요 동기 여러분! HTML의 기본기들을 다 알아봤으니 HTML이 어떤 구조를 가지고 있는지 차근차근 알아보도록 합시다! Anatomy of an HTML Element 마블 히어로 HTML의 모든 요소들은 앞 태그(opening tag)로 시작해야 합니다. (예 : , ) 거의 모든 요소들은 뒷 태그(closing tag)가 필요로 하는데 태그의 이름 앞에 /(slash)를 넣어줍니다.. (예 : , ) 사용자들은 태그 사이에 있는 내용만 볼 수 있습니다. 오늘의 느낌 오늘은 여기까지! 다음에 봐요~~~

안녕하세요 동기 여러분! 오늘은 비디오 넣는 방법에 대해 알아봅시다! Video 태그와 쓸 수 있는 속성들 controls : 재생/일시정지 버튼이 생기고 소리 크게 작게 버튼과 전체 화면 버튼이 생김 autoplay : 사용자가 페이지를 로드하면 바아로 빠구 없이 재생이 시작됨 loop : 반복 재생됨 생김새 영상이 안나오시는군요? src 에는 동영상 파일 이름 또는 URL 넣어 주면 됩니다. controls는 속성입니다. 태그 사이에는 동영사이 나오지 않을 시 뜨는 문구를 설정해줄 수 있습니다. Embed 태그는 HTML5부터 공식적으로 지원하고 있는 태그입니다. 그래서 적용이 안 되는 브라우저가 있을 수 있습니다. 이 친구의 기능은 모든 미디어를 끌어올 수 있다는 장점이 있습니다. (예 : vide..

안녕하세요 동기 여러분 오늘은 태그와 그에 따른 기능들에 대해 알아보도록 합시다! Audio and Attributes 태그를 사용하여 오디오 파일을 넣어줘서 재생을 시켜 줄 수 있습니다. 생김새 먼저 보도록 합시다. 생김새 오디오 파일의 자식 태그로 태그를 넣어 주어서 src(소스의 위치나 파일명)을 넣어주면 됩니다. controls가 바로 태그의 속성(Attributes)들 중 하나입니다. controls에는 유저가 오디오를 조절할 수 있는 기본 기능들이 들어가 있습니다. 더욱 다양한 오디오 속성이 궁금하신 분들은 아래의 링크로 들어가서 확인해보시면 됩니다. 한국어 버전도 있습니다. 링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aud..

안녕하세요 동기 여러분! 오늘은 이미지를 감싸는 태그에 대해 알아봅시다! Figure and Figcaption 추가 정보를 넣기 위해 저번 시간에 태그에 대해서 배웠습니다. 그런데 만약 이미지나 일러스트를 넣고 싶을 때는 어떻게 해야할까요? 태그 안에는 이미지나 일러스트, 다이어그램, 코드 블럭 등등이 들어갑니다. 의 생김새 태그는 이미지의 설명을 붙여주기 위한 요소입니다. 이미지의 설명을 로 적어놨다면 의 위치를 옮겨야 할 때 가 나오지 않는 경우가 발생할 수 있습니다. 하지만 태그를 사용해 이미지 설명을 붙여 놓는다면 붙었기 때문에 따라갑니닿ㅎ 의 생김새 여기에 이미지 설명 태그 속으로 넣어주시면 됩니다! 예 동기 코딩 홈 목록 연락처 동기 코딩은 운동을 좋아하려고 매일 하는 사람 요리를 살기위해 ..

안녕하세요 동기 여러분! 오늘은 태그에 대해 알아보도록 합시다! The Aside Element 태그는 추가 정보를 표시하기 위해 사용하는데 이것은 다른 요소를 향상하는 역할을 합니다. 하지만 이 추가 정보는 반드시 메인 내용(main content)과 연관될 필요는 없습니다. 그리고 과 태그의 옆에 사용할 수 있습니다. 보통 태그는 참고문헌 (Bibliography) 주 (Endnote) 논평 (Comment) 그래픽 디자인으로 들어와 있는 인용문 (Pull quote) Editorial sidebars 추가 정보 에 사용됩니다. 생김새 말하지 않으면 모른다. 홈 목록 연락처 자존심 때문에 사회 생활을 하다가 보면 하고 싶어도 할 수 없는 말들이 많죠. 내가 생각하고 있는 모든 것을 말할 순 없을 것입..

안녕하세요 동기 여러분! 오늘은 Article과 Section에 대해 알아봅시다. Article and Section 은 문서에 있는 요소들의 경계를 나타냅니다. 예를 들어 챕터나, 헤딩, 같은 테마인 문서의 다른 부분들이 그에 해당합니다. -> 말이 어렵죠? 제가 적어 놓고도 어렵네욬ㅋㅋ 그냥 독립적인 구역을 정의할 때 씁니다. 보통 같은 제목들을 포함합니다. 도 문서의 있는 요소들의 경계를 나타냅니다. 과 다른 점이 있다면 같지 않은 테마에 사용이 가능하다는 것. -> 역시 말이 어렵습니다. 그냥 역시 독립적인 구역을 정의할 때 쓰는데 이 비슷한 애들을 모은다면 은 다양한 애들을 모읍니다. 한 가지 더 을 사용하게 되면 screen reader가 어디서 article의 내용이 시작되고 끝나는지 이해 ..