안녕하세요 동기 여러분! 오늘은 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 지난 시간에 만든 저의 첫 테이블입니다. 아주 처참한 모습이죠? 여기에 뼈대를 한번 세워 봐야하지 않겠습니까? 생김새 여기는 내용 여기도 내용 예 이제 한번 테이블 다운 테이블을 한번 만들어 보겠습니다. 요즘 최애 시트콤 '왠만해선 그들을 막을 수 없다'의 노주현 가족들에 대한 테이블을 만..
안녕하세요 동기 여러분! 오늘은 테이블(표) 만들기 첫 번째 시간입니다! Create a Table 테이블을 생성하는 방법입니다. 어때요 증말 쉽죠? Table Rows 요즘 나오는 프로그램들은 대부분 테이블을 아주 쉽게 만들 수 있게 준비가 되어 있는데요, HTML에서는 코드를 통해 다 생성을 해주어야 합니다. Table row(행, 가로)를 만드는 방법입니다. Table Data 이제 테이블은 만들 수 있으니 안에 내용을 넣어 봐야겠죠? 여기에 내용 이기도 내용 예 짱구는 못말려의 짱구 가족에 대한 테이블을 만들어 보겠습니다! 그렇습니다. HTML은 코드를 통해 다 생성해줘야 하는 것이지요. 기본으로 검은색 줄 정도라도 나올 줄 알았는데ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ..
안녕하세요 동기 여러분! 오늘은 코멘트를 다는 방법에 대해 알아봅시다! Comments 지금은 혼자 코드를 만지고 있지만 실제로 일을 하거나 프로젝트를 진행한다면 코드를 공유하거나 넘겨주는 일이 많을 텐데요, 갑자기 엄청나게 긴 코드를 받으면 한눈에 안 들어오는 경우가 비일비재할 것입니다 또는 내가 쓴 코드조차도 왜 이렇게 작성을 했는지 기억이 안날 수 도 있죠. 그럴 때 사용하는 방법이 코멘트 입니다. Python # 이것은 파이썬의 코멘트 입니다! """ 두줄 이상 사용할 때 쓰는 방법 입니다!!! """ #
안녕하세요 동기 여러분! 오늘은 같은 페이지에 있는 정보에 대해 링크를 거는 방법에 대해 알아봅시다! Linking to Same Page 제가 중학교 때 학교 마치고 집에 와서 학원 가기 전에 신라면을 하나 끓여서 짱구를 틀어놓고 먹으면서 시청했던 추억이자 현재도 많이 시청하고 있는 짱구는 못 말려 나무 위키에 들어가 보았습니다. (짱구 엄마가 이제 나보다 동생...) 짱구는 못말려 나무위키 목차 중에 숫자로 된 부분을 누르면(2를 눌러보았습니다), 위 사진과 같이 줄거리에 대한 내용이 웹 페이지에 바로 뜨게 됩니다. 이러한 기능이 없었다면 우리는 항상 스크롤을 내려서 확인을 해야겠죠! 이 기능에 대해 알아봅시다! 생김새 맨 위로 맨 아래로 맨위로 맨 아래로 여기서 집중해야 할 부분은 id의 값입니다...
안녕하세요. 동기 여러분! 오늘은 이미지로 링크에 연결할 수 있는 방법을 알아봅시다! Linking At Will 태그 안에 태그를 넣어 간단하게 이미지로 링크를 넣어줄 수도 있습니다. 생김새 예 동기코딩의 블로그를 연결해주는 이미지 링크를 만들어 보았습니다. href에 동기코딩 블로그 주소를 넣고 target에는 새창으로 실행 src에는 이미지가 위치한 주소를 넣어주고 alt에는 동기코딩이라고 설명을 넣어 주었습니다. 결과를 보도록합시다! 새창에서 잘 실행되는 모습을 확인할 수 있습니다. 오늘의 느낌 운동을 더 하고 싶다!
안녕하세요. 동기 여러분! 오늘은 한 폴더에 있는 웹 페이지들을 링크하는 방법에 대해 알아봅시다! Linking to Relative Page 웹 페이지를 만들 때, 여러 페이지들을 한 폴더에 넣어 놓고 쓰는 경우가 있는데 이럴 때 쓰는 방법입니다. (참고로 이 한 폴더를 root directory 루트 디렉터리라고 합니다.) 사용방법 클릭할 문구 "./파일이름" 은 relative path(상대 경로)인데, 로컬 파일(루트 디렉터리)의 경로를 컴퓨터에게 알려주는 아주 귀엽고 깜찍한 친구입니다. 이와 반대로 "https://www.사이트이름.com"(a Full URL)은 absolute path(절대 경로)인데, 다른 폴더에 저장된 링크를 가져오려는 경우 사용하는 아주 똑똑한 친구입니다. 예 Diabl..
- Total
- Today
- Yesterday
- padding
- function
- CSS 포지션
- method
- javascript
- Object
- CSS
- 객체
- Array
- 동기코딩
- Python
- 함수
- if문
- 타입 좁히기
- 실수
- 반복문
- for문
- 자바스크립트
- Margin
- Typescript
- html
- 메서드
- 타입스크립트
- html table
- 프로그래머스
- em
- Type
- HTML 기본
- css position
- 파이썬
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |