Dongi_coding 동기_코딩

동기 여러분! 안녕하세요. 제가 살고 있는 집에 난방은 히터로 유지를 하고 있습니다. 안 틀면 상당히 추워지고 틀면 상당히 건조해져서 가습기가 반드시 필수예요. 그래서 히터와 가습기를 켰는데... 그거 아시나요 사우나 들어가서 너무 더울 때 바닥에 앉으면 조금 시원한 거... 그렇습니다 찬 공기는 바닥에 깔리죠? ㅋㅋㅋ 발은 히터를 들어도 너무 차가워요 ㅠㅠ 그래서 오늘은 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"으로 하여 위에 있는..

안녕하세요 동기 여러분! 오늘은 필수 입력란을 만드는 방법에 대해 알아봅시다. Requiring an Input 회원 가입 같은 거 할 때 반드시 적어야 하는 필수 사항들이 있습니다. 아이디, 비밀번호, 이메일, 이름 등등이 있는데요, 적지 않고 가입을 누르면 적으라고 경고문이 뜨게 됩니다. 오늘은 그것을 만드는 방법을 배워 봅시다! 생김새 성명을 입력해주십시오. 아무것도 입력 하지 않고 제출을 하면 이렇게 오류가 뜨면서 화면이 넘어가지 않습니다. 코드 설명 main.html 파일에 post 방식으로 내용을 보내겠다. 성명을 입력해주십시오. 빈칸에 대한 설명 줄바꿈 label의 for 값과 input의 id의 값은 짝을 지어주기 위해 통일, name은 식별을 위해 name으로 적어주고 빈칸에 여기 입력해..

안녕하세요 동기 여러분! 오늘은 How a form works부터 지금까지 우리가 알아본 모든 것을 보내는 버튼을 만드는 방법에 대해 알아봅시다. Submit Form Form을 보내는 버튼을 만들어봅시다! 생김새 고객님의 서비스 경험을 적어주세요! 저번 시간에 배운 Textarea태그 밑에 넣은 한 줄이 오늘 우리가 알아보는 버튼 코드입니다. input 태그 안에 type은 submit으로 정해주고 value는 버튼 안에 넣을 말을 써주시면 됩니다. 다음은 실행 화면입니다. 어때요 정말 쉽죠? 오늘의 느낌 HTML도 거의 다 끝나 갑니다! 아자 아자

에ㅔㅔㅔㅔ이 하유두인 브로?(캐나다 친구들이랑 하던 인사) 동기 여러분! 오늘은 Textarea를 넣는 방법에 대해 알아봅시다. Textarea element 문자 구역(Textarea)은 뭘까요? 보통 어떤 회사의 제품 리뷰를 보내거나 의견을 보낼 때 이런 칸이 있죠? 자세한 설명 부탁드립니다. 가 있는 칸이 바로 문자 구역(Textarea)입니다. 코드를 뜯어보면 아래와 같습니다. 우리가 알아볼 내용은 밑줄 친 부분입니다! 코드 설명 문자 구역(textarea)의 태그 id는 혹시 태그와 같이 쓰게 된다면 연결하기 위해 사용될 수 있습니다 name는 식별을 위해 id와 같은 값을 적어주면 좋습니다. rows는 가로 크기 cols는 columns의 줄임말로 세로 크기입니다. placeholder는 문자..

안녕하세요 동기 여러분! 오늘은 데이터 리스트 넣는 방법에 대해 알아봅시다! Datalist Input 인터넷 서비스를 이용하려 할 때, 제일 먼저 해야 하는 일은 회원가입을 하는 것일 겁니다. 다음 사진의 지마켓 회원가입 화면에 이메일을 작성하는 부분이 데이터 리스트로 만들어져 있습니다. 이것을 만드는 방법을 알아봅시다! 생김새 코드 설명 의 list의 값과 의 id의 값은 같아야 합니다. (for와 id가 같아야 하는 다른 인풋들과는 다르죠?) 지금까지 배운 value의 값들은 사용자들에게는 보이지 않는 값이었지만 여기서는 value의 값이 사용자에게 보여 집니다. (위의 사진에 naver.com, daum.net, hotmail.com 등등이 value 값에 해당함) 그렇다면 여기서 의문이 생깁니다..

안녕하세요 동기 여러분! 오늘은 라디오 버튼 넣는 방법에 대해 알아봅시다! Radio Button Input 사용자에게 여러 가지의 옵션을 주고 하나 고르게 하고 싶을 때 쓰는 방법입니다. 생김새 1. 1963년 국내에 첫 출시하여 대한민국의 모든 인스턴트 라면의 원조이며 햄맛을 국물 베이스로 사용하고 있는 이 라면은 무엇인가? 1. 신라면 2. 진라면 3. 안성탕면 4. 수타면 5. 삼양라면 위의 코드를 출력하면 이렇게 라디오 버튼을 가지고 있는 문항들이 생겨납니다. 코드 분석 이전과 마찬가지로 의 for의 값과 의 값은 같아야 합니다. name은 "answer"로 모두 같게 설정을 해주는데 이유는 그룹화하기 위함입니다. 값은 식별이 용이하게 label의 내용과 연관있는 단어나 문장을 써서 넣어줍니다...