✨ Front-end67 [JavaScript] classList와 jQuery 사용 방법 Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 먼저 bootstrap에서 버튼이나 nav바 등 많은 기능들을 끌어와 사용할 수 있으니 적극적으로 활용하자. 이곳에서 끌어와 사용한 코드가 있을때에는 반드시 아래에 있는 코드들을 해당 head와 body에 적절히 넣어준다. 잘 모르겠다면 그냥 Starter template 을 복붙하자. jQuery 사용시에는 아래 사이트에 들어가 js 코드를 하나 복사한다. https://releases.jquery.com/ jQuery CDN The.. 2023. 2. 19. [JavaScript] getElementById와 addEventListener(이벤트리스너) 자바스크립트란? 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어이다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. HTML과 CSS, JS를 이용해 버튼을 만들어 간단한 alert 기능을 구현해보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 2번째 줄은 document.getElementByID에 있는 id 값을 ~~로 바꾸어라 라는 의미이다. 즉, id값으로 alert로 받아온 css의 style에 display 속성을 block으로 바꾸는 것이다. 이와 같은 방법으로 버튼을 만들어 alert의 열고 닫기를 구현해.. 2023. 2. 12. CSS - 로그인, 게시판, 회원가입 폼 만들어보기 먼저 로그인 html 이다. HTML 삽입 미리보기할 수 없는 소스 padding과 margin에 대해서 추가적으로 공부해보았다. padding은 안쪽 여백을 나타내주며, margin은 바깥 여백을 담당한다. 16번 째 줄의 margin: 0 auto; 라는 코드가 있다. 이것은 상하여백 0 좌우여백 auto라는 태그이다. 25번 째 줄의 border-collapse: collapse;란 이중 실선을 방지해주는 기능을 한다. 다음은 회원가입 html이다. HTML 삽입 미리보기할 수 없는 소스 마지막으로 게시판 html이다. HTML 삽입 미리보기할 수 없는 소스 이렇게 해서 HTML과 CSS로 간단한 기능들을 만들어 보았다. 자바스크립트(JS)를 배워 이 세개로 빨리 연동해서 프로젝트도 빨리 만들어볼 .. 2023. 2. 9. CSS - 자식과 자손 선택자 ( > ) HTML에 코드를쓰고 그때그때마다 style을 적용시키면 가독성이 매우 떨어지고 코딩하기가 매우 어려워진다. CSS를 이용해 HTML에서 사용했던 코드의 주소를 찾아 꾸며주는 역할에 대해 더 알아보자. HTML 삽입 미리보기할 수 없는 소스 첫번 째로, id속성 즉, #div1 > div { } 에 대해서 알아보자. #div1 은 두번 째 div에 있는 id=div1인 div를 가르키며, " > " 표시는 꾸며준다는 것이다. 그리고 뒤에있는 div는 #div1의 자식이라고 생각해보자. 즉, #div1 > div { } 에 속해있는 1과 2는 #div1에서 변경해준 값이 똑같이 적용된다. class속성도 똑같다. 다만, " > " 표시 대신해서 " " 한칸 공백을 사용한다. 따라서 div2의 자식들인 3 .. 2023. 2. 9. CSS - style태그와 태그선택자, div와 class 선택자 CSS 내용은 반드시 style 태그 안에 작성해야한다. 디자인을 변경 하려면 우선적으로 디자인을 변경할 태그를 선택하여 적용할 수 있다. 이러한 태그 선택하는 방법을 '선택자'라고 한다. 태그선택자 : 해당 문서 안의 모든 동일 태그에 디자인 적용. HTML 삽입 미리보기할 수 없는 소스 style은 반드시 html의 안에서 사용해야하며, title밑에 작성해야한다. h1{ } 이라는 태그를 이용하여 body에서 사용했던 h1의 텍스트를 꾸며줄 수 있다. HTML 삽입 미리보기할 수 없는 소스 로 사용된 곳을 꾸며주고 싶다면 style로 들어가 CSS를 적용시켜줄 수 있다. 문법은 id선택자는 #을 이용한다. #frist{ } 와 같이 사용이 가능하며, class선택자는 . 을 이용할 수 있다. .bl.. 2023. 2. 9. HTML - table과 div의 사용법 table과 div태그는 HTML을 하면서 굉장히 많이 볼 친구들이다. 아주 중요한 내용이며 이해해야 코드를 보는데 보다 쉽게 이해할 수 있을 것이라고 생각한다. HTML 삽입 미리보기할 수 없는 소스 위 코드를 실행해보면 아래와 같은 그림이 웹사이트에 만들어진다. 코드는 body다음인 8번째 줄, table부터 시작된다. border="1'을 주어 table의 생김새를 파악해주었다. 9번째 줄, 16번째 줄, 28번째 줄에 있는 thead와 tbody, tfoot은 table의 제목, 본문, 꼬리말을 표현한 태그이지만 사용하지 않아도 무방하다. table은 먼저 이라는 행을 선언하면서 시작된다. 이후 를 이용하여 열을 만들어준다. td대신 제목을 넣을 땐 를 넣어도 무방하다. th를 넣을 시 자동으로 .. 2023. 2. 8. HTML - 이미지, 링크, input, 개행<br>, 문자<p> 기초 HTML은 웹을 개발하는데 있어 가장 기초적인 것이다. HTML 삽입 미리보기할 수 없는 소스 html을 작성할땐 7번째 줄의 부터 31번째 줄의 까지 사용한다. 10번째 줄의 를 통해 첫번째 박스에 보이는 환풍을 입력할 수 있는 텍스트 박스를 만들 수 있다. 11번째 줄의 는 두번째 박스와 같이 비밀번호를 치면 암호화처럼 나타난다. 12번째 줄의 는 오른쪽에 마우스를 가져다대면 위 아래 버튼이 나온다. 클릭시 증가및 감소한다. 13번째 줄의 는 달력이 나오며 날짜를 선택할 수 있다. 14번째 줄의 는 눌러보면 색을 볼 수 있는 창이 만들어진다. 각 줄마다 이라는 태그는 강제 줄 개행이라는 의미이다. 16번째 줄의 이라는 것은 버튼을 생성하여 버튼안의 글씨를 확인으로 채우는 것이다. 17번째 줄의 는 네.. 2023. 2. 8. 이전 1 ··· 3 4 5 6 다음
