A Joyful AI Research Journey🌳😊

a 태그 페이지의 이동, 페이지 내의 다른 영역으로의 이동 등 상호작용이 필요할 경우 사용된다. button 태그 단순 클릭 이벤트, form요소에 입력된 내용을 서버로 전송할 때 사용된다. A button is meant to submit information and will not necessarily redirect the user to an entirely new web page. A button tag can have a variety of behaviors, such as submitting a form, opening a link, or performing a JavaScript function when clicked. A regular tag does not have this built-i..

230206 Mon 230207 Tue 테이블 레이아웃 만들 때 1. display: table 2. display: table-row 3. display: table-cell 순서대로 한다. 참고: https://www.codingfactory.net/10776 table 말 그대로 table 형식으로 보여지게 만듭니다. table-row는 tr의 기능을 하고 table-cell은 td의 기능을 합니다. 참고: https://mondaymonday2.tistory.com/245 [CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row) A B C D A B C D table 말 그대로 table형식으로 보여지게 만듭니다. table-row 는 tr의 기능을하고 ta..

230127 메뉴 만들 때 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초 p. 261 참고하기) HTML5 로그인 회원가입 CSS #login { display: table-cell; width: 200px; /*너비*/ height: 10px; /*네비게이션 영역 높이 */ border: dotted red; } #login ul{text-align:center;} #login ul li{display:inline;} #login ul li a{text-decoration:none; color:navy;}

230203 If you want two classes on one element, do it this way: Reference it in css like so: .social.first {} 참고: http://jsfiddle.net/jyAyX/ 예시) HTML CSS .foo{ border-left: 1px solid gray; } .foo.bar{ border-top: 1px solid gray; } .foo .bar{ border-right: 1px solid gray; width:25px; height:25px; background-color:lightgray; } div{ margin:20px; height:50px; width:50px; background-color:beige; } 결과)

::after (:after) 참고: https://developer.mozilla.org/ko/docs/Web/CSS/::after CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용한다. 기본값은 인라인이다. (CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다.) /* 링크 뒤에 화살표 추가 */ a::after { content: "→"; } HTML 적당히 평범하고 심심한 글입니다. 지루하지도 흥미진진하지도 않은 글입니다. MDN 기여는 쉽고 재밌습니다. CSS .exciting-text::after { content: "

230130 과 값을 일치시킬 경우 편리하게 이용할 수 있다. for의 값과 id값을 hahaha라는 임의의 값으로 일치시킨 경우, 당신은 밥을 먹었습니까?라는 텍스트 부분을 클릭해도 checkbox 부분에 클릭이 된다. 당신은 밥을 먹었습니까?

230130 화면 하단에 푸터를 고정하려면 아래 코드를 쓴다. :) 참고 /*푸터*/ footer{ position:fixed; /*이 부분을 고정*/ bottom:0; /*하단에 여백 없다.*/ width: 100%; /*너비:가로 사이즈를 브라우저에 가득 채운다.*/ height: 50px; /*높이*/ }

230130 radio를 쓸 때 name을 동일한 값으로 지정하면 중복 방지 가능하다. 회원 탈퇴 시까지 5년 3년 1년 name is the name that is used when the value is passed (in the URL or in the posted data). id is used to uniquely identify the element for CSS styling and JavaScript.

[230206~] 첫 번째 개인 프로젝트 하면서 새로 알게 된 것 모음 새로 알게 된 것뿐만 아니라 이전에 이론 공부 했던 것들 중에 다시 상기하게 된 것도 포함했다. 프로젝트를 만드는 과정에서 배웠던 이론들을 직접 적용하니 머릿속에 더 남는 것 같다. :) 상대적으로 길이가 긴 내용은 개별 글로 옮겼다. (230329 ~ ) 230208 Wed autofocus="autofocus" The autofocus attribute is a boolean attribute. When present, it specifies that the element should automatically get focus when the page loads. 비밀번호 /* 회원 로그인 */ $('#btnSignIn').on(..

230102 Mon 4th class Ch. 3 HTML5 멀티미디어 & 입력양식 진도: p. 66 ~ (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국) HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고 HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에 product.kyobobook.co.kr 오늘 배운 것 중 기억할 것을 정리했다. 지난 수업 때 배운 것 중 다시 기억할 것 : (a non-breaking space) 공백 한 테이블의 하나의 행만 div..

221230 Fri 3rd class Ch. 2 HTML5 기본 요소 진도: p. 26 ~ p. 64 내외 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국) HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고 HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에 product.kyobobook.co.kr 오늘 배운 것 중 기억할 것을 정리했다. How to save: Ctrl + S (Save) Ch. 2 HTML5 기본 요소 책의 목차 -이번 장의 목표 -텍스트..

221229 Thu 2nd class Ch. 1 기초사항 Ch. 2 HTML5 기본 요소 (주제별로 묶기 위해 윗글로 글 내용 옮김.) 진도: ~ p. 61 (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국) 아래는 교재 6개 중 첫 번째 사용 교재이다. :) 배우는 도중 아래 최신 버전이 나왔는데 그 책으로 아래 이미지를 첨부했다. HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고 HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 웹프로그래밍 초보자도 쉽게 배우는 웹 개발 지침서!이 책은 웹프로그래밍을 처음 배우는 초보자들을 위해 기초부터 차근차근 설명한다. 1~3장에 product.kyobobo..

221228 Wed 1st class 언어 이름만 봤을 땐 각 언어들이 어떤 용도로 사용하는지 구분이 안 갔는데, 수업에서 아래 설명을 듣고 명확한 구분이 가능했다. 구조, 설계도(자동차): HTML5, 흑백, 스타일 ↓ 뼈대, 도장: CSS3, 고정, 넓이 넓어짐, 내용 문서의 스타일을 지정한다. ex) (자동차 도장, 페인트), 영원한 색, 움직임 X 스타일 ↓ 동작: Javascript, 움직임O, 없었다가 나옴, 동작 ex) 비밀번호 입력해 주세요. ex) 라이트: 사용자 명령으로 오션 블루 등 여러 색으로 변함 비전공자 테스트 중 헷갈렸던 것: 변수(Variable): 프로그램에서 일시적으로 데이터를 저장하는 공간 A variable is a named container for a particu..