Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 비디오 넣는 방법에 대해 알아봅시다! 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의 내용이 시작되고 끝나는지 이해 ..

동기 여러분! 안녕하세요. 제가 살고 있는 집에 난방은 히터로 유지를 하고 있습니다. 안 틀면 상당히 추워지고 틀면 상당히 건조해져서 가습기가 반드시 필수예요. 그래서 히터와 가습기를 켰는데... 그거 아시나요 사우나 들어가서 너무 더울 때 바닥에 앉으면 조금 시원한 거... 그렇습니다 찬 공기는 바닥에 깔리죠? ㅋㅋㅋ 발은 히터를 들어도 너무 차가워요 ㅠㅠ 그래서 오늘은 Footer와 Main에 대해 알아봅시다 갑시다? Main and Footer 태그는 태그의 자식 요소로써 말 그대로 안에서 가장 메인이 되는 역할을 할 때 사용합니다. 태그는 와 가 담지 못한 특정한 내용을 담을 수 있습니다. -> 고로 문서 하나에 딱 한 번만 사용해야 합니다. screen readers와 web browsers가 ..

안녕하세요 동기 여러분! 오늘은 Semantic HTML의 첫 번째 시간 Header와 Nav에 대해 알아보려 합니다. 주제에 다가가기 앞서 Semantic HTML이 뭔지 알아봅시다. Semantic HTML 여러분은 방에 있는 책들을 정리 할 때 어떻게 정리를 하시나요? 규칙 없이 마구 잡이로 책을 꽂아 넣는다면 → Non-semantic HTML 적절한 규칙으로 잘 정리한다면 → Semantic HTML입니다ㅎ * 사전에서의 Semantic : 의미의, 의미론적인 Jungle Disk에 Semantic HTML에 대해 잘 정리를 해두었는데 제가 링크한 사이트로 가셔서 스크롤을 내리다가 나오는 첫 번째 그림에서 Non-semantic HTML과 Semantic HTML의 특징을 아주 잘 표현하고 있습..

안녕하세요 동기 여러분! 오늘은 사용자가 개발자가 정해 놓은 패턴의 입력값을 적도록 하는 방법에 대해 알아봅시다. Matching a Pattern 신용카드를 적는 칸에 사용자가 문자를 넣으면 에러가 뜨게 하고 ID를 적는 칸에 한글을 넣으면 에러가 나는 그런 경우를 본 적이 있으실 겁니다. 바로 오늘 알아볼 기능 때문인데요, Matching a Pattern을 하기 전에 개발자라면 반드시 알아야 하는 정규 표현식(regex=regular expression)에 아주 간단히 알아봅시다. 정규 표현식(regex=regular expression) 게임을 하던 웹 사이트를 이용하건 개발자들은 방대한 정보들을 수집합니다. 그 엄청난 정보들 중에 특정한 규칙이 들어 있는 친구들을 찾아내려면 상당히 복잡하고 힘이..

동기 여러분 다들 건강하신가요? 겨울이 다가오고 있습니다. 다들 건강 잘 챙기시길 바랍니다. 오늘은 input의 type="text" 상황에서 사용자가 입력할 수 있는 글자를 제한하는 방법에 대해 알아봅시다. Checking Text Length 생김새 예 사자성어를 맞추는 퀴즈를 내는 코드를 만들어 보았습니다. 비단 위에 꽃을 더한다는 뜻으로 좋은 일에 좋은 일이 더하여짐을 이르는 사자성어는 무엇입니까? 코드 설명 exhtml로 post 방식으로 정보를 보내라 오늘의 문제 타입은 문자로 지정, id는 상위의 label과 짝을 이루기 위해 fourletters로 설정, name는 식별을 쉽게 하기 위해 answer로, 최소 문자 길이를 1로 지정하고 최대 문자 길이를 4로 지정, 반드시 뭔가 적어야 다음..

안녕하세요 동기 여러분! 오늘은 사용자가 숫자를 올리고 내릴 수 있는 도구를 만드는 방법에 대해 알아봅시다! Set a Minimum and Maximum 네이버 쇼핑을 하다 보면 물건을 살 때 수량을 정하는 도구를 보셨을 겁니다. 그렇습니다 input type="number"에 대해 알아봅시다! 생김새 제가 마카롱 가게를 차렸는데 실력이 모자라 딱 10개만 만들었습니다. 그럼 한번 팔아보는 코드를 만들어 보겠습니닼ㅋㅋㅋ 몇개의 마카롱이 필요하세요? 코드 설명 post 방식으로 ex.html에 정보를 보내겠다. 몇 개의 마카롱이 필요하세요? input과 엮어 설명을 붙이기 위한 빌드업 줄 바꿔라! 사용자 input 칸을 넣을 건데 타입은 "number"로 하고 id는 "macaron"으로 하여 위에 있는..