Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 체크박스 만드는 방법에 대해 알아봅시다! Checkbox Input 이제 우리는 감이 옵니다. 감이 와! type="checkbox"를 하면 나오겠지 뭐 ㅋㅋㅋㅋ 사용자에게 여러 가지의 옵션을 전달받고 싶은 경우 체크박스를 사용해주면 됩니다. 생김새 좋아하는 라면에 체크 하시오! 신라면 진라면 매운맛 너구리 불닭 볶음면 안성탕면 label의 for와 input의 id는 역시나 같아야 합니다. name은 ramen으로 모두 통일 하였는데 이는 모든 체크박스를 그룹화한 것입니다. (name을 아무렇게나 정한다면 나중에 form을 받아서 데이터를 정리할 때 뭐가 뭔지 헷갈려서 일이 진행이 안됨) value는 체크박스 각각과 값(한글로 된 부분)으로 연결이 되어 있는데, 체크박스..

안녕하세요 동기 여러분! 오늘은 사용자가 범위를 조절하여 입력한 내용을 받아내는 아주 귀엽고 깜찍한 방법에 대해 알아봅시다! Range Input 제한된 숫자를 선택하도록 사용자를 유도하는 방법에는 number 보다는 range 가 탁월한 선택일 것입니다. 생김새 넌 잘생겼니? Yes 모르겠는데 No 또 또 또 역시 이전과 마찬가지로 의 for의 값과 의 값은 같아야 합니다. type="range"를 해주어야하고 최소(min)와 최대(max) 값을 설정해줄 수 있습니다. 여기서 step은 마우스나 키보드로 범위를 설정할 때 얼마만큼 가게 할지 선택하는 것입니다. 위의 코드를 실행해보면 이런 화면이 나타나는데 마우스 또는 키보드로 두 칸 움직여보면 두칸 움직였더니 못생겨지는 대참사가 발생합니다... 새로운..

안녕하세요 동기 여러분! 오늘은 숫자만 넣을 수 있는 빈칸을 만드는 법에 대해 알아봅시다! Number Input 속성에 type="text"를 지난 시간까지 알아보았는데, 여기에 "number"를 넣는다면 어떤 일이 벌어질까요? 그렇게 된다면, 숫자만 사용할 수 있는 빈칸이 만들어지는데 이 빈칸에는 마이너스(-), 플러스(+), 점(.)도 사용이 가능합니다. 그리고 type 옆에 step 속성을 넣으면 다음과 같은 화살표 버튼이 만들어집니다. 생김새 마 니 몇살이고? 이전에 했던 방법과 마찬가지로 의 for와 의 id는 같은 값을 가져야 합니다. step="1"은 화살표를 누를 때 마다 더해지거나 빼지는 숫자를 의미합니다. (step="3"이면 숫자가 3씩 더해지거나 빼 짐) 응? 그게 다예요... ㅋ..

안녕하세요 동기 여러분~~~ 감기 조심하세요~~~ 오늘은 패스워드를 넣는 칸을 만들어 보도록 하겠습니다. Password Input 비밀번호! 생김새 너의 비밀번호는 무엇인고? 에 type을 "password"로만 바꾸어주면 된다. 그럼 비밀번호를 타이핑할 때 다음과 같은 화면이 나온다. 물론 을 안에 넣어 버려서 코드를 짧게 쓸 수도 있다. 너의 비밀번호는 무엇인고? 또다시 물론 form이 보내어질 때 userpassword="사용자가 적은 비밀번호"가 보내어지게 된다! 오늘의 느낌 오늘의 느낌은 Adding a Label 편에 올려두었다ㅋㅋㅋㅋㅋㅋ 궁금하지 않으신가

안녕하세요 동기 여러분! 오늘은 라벨(Label 뤠이블)을 넣는 방법에 알아봅시닼ㅋㅋ Adding a Label 라벨(Label)이 무엇인가 하니 인풋 빈칸 옆에 부연 설명을 해주는 친구입니다. 예를 들어, 야후 로그인 창을 켜보면 아이디를 적어 놓는 빈칸 위에 "사용자 이름, 이메일 또는 무선 기기"라고 설명이 쓰여 있는 게 보이시나요? 얘가 바로 라벨(Label)입니다. 생김새 너의 아이디는 무엇인고? 이 코드를 실행하면, 이런 창이 뜨게 됩니다. 과 이 연관되게 작동시키기 위해서 은 id 속성이 필요합니다. 그런 다음 의 id 값을 의 for 값과 같게 만들어 주어야합니다. 위의 설명이 귀찮다면, 중첩을 시켜 한방에 해결하는 방법도 있습니다. 너의 아이디는 무엇인고? 태그 안에 을 넣어 버림으로써 ..

안녕하세요 동기 여러분! 오늘은 Text Input을 넣는 방법에 대해 알아보도록 합시다! Text Input 요소는 type 속성을 가지고 있는데 이는 어떠한 웹 페이지를 나타내고 데이터를 받아들일 수 있는지를 결정합니다. 우리가 알아볼 타입은 바로 "text" 타입입니다. type="text" 요소와 type="text"이 함께 오면 사용자들은 빈 공간에 텍스트를 넣을 수 있게 됩니다. (항상 기본 type은 text입니다) 여기서 중요한점은 요소에 name 속성 없이 실행하면 이 HTTP request에 의해 보내어질 때 에 있는 정보들은 전달이 되지 않습니다. 생김새 이 코드를 실행하면 다음과 같은 화면이 나옵니다. 동작 원리 사용자가 위의 사진과 같은 빈칸에 문자를 써서 넣으면 컴퓨터는 어떻게 ..

안녕하세요 동기 여러분! 오늘은 Form Works에 대해 알아보도록 합시다 갑시다! How a Form Works 인터넷은 컴퓨터 간의 상호작용 또는 커뮤니케이션이라고 할 수 있는데요, 정보를 보내고 받기 위해서는 HTTP requests를 사용해야 합니다. 혹시 HTTP requests에서 자세하게 궁금하신분들은 아래의 링크로 들어가셔서 확인해보시길 바랍니다. HTTP requests : https://www.codecademy.com/articles/http-requests Rest(HTTP 동사 관련 설명있음) : https://dongi-coding.tistory.com/7 HTTP Requests | Codecademy Understand the basics of how your web bro..

안녕하세요 동기 여러분! 저번 시간에 테이블 바디에 이어서 테이블 헤드와 테이블 풋에 대해 알아봅시다! Table Head 섹션을 나누는 두 번째 방법이 테이블 헤드입니다. 생김새 여기에 제목 여기도 제목 여기에 내용 여기도 내용 테이블 헤드에 해당하는 부분을 감싸주면 됩니다. Table Foot 섹션을 나누는 세 번째 방법은 테이블 풋입니다. 테이블 풋은 보통 합계나 결과나 결론들을 묶습니다. 생김새 여기에 제목 여기도 제목 여기에 내용 여기도 내용 마무리 내용 여기도 마무리 내용 톡특한 예 테이블 풋은 중간에 껴 넣어도 항상 마지막 부분에 오게 됩니다. 실행을 해도? 네, 역시나 실행을 해도 테이블 풋에 해당하는 부분은 제일 아래로 내려옵니다. 오늘의 느낌 요즘 유럽에서 코로나19 감염이 증가하고 있..

안녕하세요 동기 여러분! 오늘은 열을 뚫는 방법과 테이블 바디에 대해 알아봅시다! Spanning Columns 저번 시간에 이어서 열(Columns), 세로줄을 박살내서 뚫어 버리는 방법에 대해 알아보겠습니다. 생김새 여기는 내용 여기도 내용 역시 내용 colspan은 column span의 줄임말입니다. span은 걸치다 [포괄하다], 가로지르다 이런 뜻이 있습니다. 예 디아블로2의 인기 캐릭터의 장비에 대해 표를 만들어 봤습니다. 성기사(팔라딘) 성기사(팔라딘) 원소술사(소서리스) 원소술사(소서리스) 강령술사(네크로맨서) 육성 유형 해머딘 슴딘 파볼오브소서 체라소서 조폭넥 헬멧 유닉 샤코 70올레 유닉 기라 탈라샤 뚜껑 탈라샤 뚜껑 유닉 샤코 무기 오크의 심장 패이즈작 마소 탈라샤 봉 탈라샤 봉 야..

안녕하세요 동기 여러분! 오늘은 테이블의 테두리를 만드는 방법과 셀과 셀 사이를 가로막는 선을 박살 내는 아주 전투적인 기능에 대해 알아보겠습니다! (저는 모든 내용을 Codecademy라는 사이트에서 영어로 공부를 하고 있는데 테이블부터 아주 막히는 겁니다... 영어 실력이 아주 박살이 나서 그런가 했는데 그냥 테이블 자체가 HTML에서 가장 어렵다고 라더라구욬ㅋㅋㅋㅋㅋㅋㅋ 난 또 ㅋㅋㅋㅋ) Table Borders 지난 시간에 만든 저의 첫 테이블입니다. 아주 처참한 모습이죠? 여기에 뼈대를 한번 세워 봐야하지 않겠습니까? 생김새 여기는 내용 여기도 내용 예 이제 한번 테이블 다운 테이블을 한번 만들어 보겠습니다. 요즘 최애 시트콤 '왠만해선 그들을 막을 수 없다'의 노주현 가족들에 대한 테이블을 만..