INTP의 멋대로 개발 세상

웹페이지를 만들 때 기본적으로 폴더세팅은 이렇게 하는 것이 깔끔하다!! 위 처럼 CSS와 JavaScript를 폴더 안에 파일로 따로 정리해두면 HTML 페이지에 링크를 걸어 불러와 주어야 적용이 된다. index라는 이름의 html은 웹페이지를 열었을 때, 가장 먼저 띄워지는 페이지이다. 그렇기 때문에 마지막 주소에 index.html 부분을 지워도 동일 페이지가 출력된다. 홈페이지 배포하기 배포란? 쉽게 말해서 나 말고 다른 사람도 같이 볼 수 있게 하는 것!! Github Pages를 사용하여 쉽게 배포할 수 있다. 깃허브 프로필 사진을 눌러서 Settings에 들어가 Repository 탭의 디폴트 브랜치명을 master로 바꾸자. (크게 상관은 없음) 우선 배포를 위한 레파지토리를 생성하고 푸쉬..

🔸CSS의 형태 1. HTML 파일에서 - 이동 새 창으로 이동 5. 문자열 속성 선택자 class* = "my" *을 이용해 my라는 글자가 있는 클래스명을 모두 선택함 div[class="my"] -> my라는 속성이 클래스 명인 경우 (my) div[class*="my"] -> my라는 문자열이 class 속성값 중 일부일 경우(my-data , my) - 클래스명에 "my"라는 글자가 들어간 태그는 모두 글자색을 red로 적용함 6. 일치 선택자 - 여러 선택자가 일치할 때 p태그인데 red라는 클래스가 있고 id가 name인 것은 p.red#name 인 것! p.red{ color:red; } 7. 그룹 선택자 - 같은 스타일을 여러 선택자에게 먹이고 싶을 때 쉼표(,)로 구분한다 p, #tit..

🔸table 태그의 속성 - 표를 생성한다. - 테이블의 행을 정의한다. - 태그 안에 또는 태그를 포함하여 테이블의 각 셀을 구성함. - 일반적으로 테이블의 각 데이터 행을 나타내며, 이러한 행들이 여러 개로 구성되어 전체 테이블을 형성함. - 테이블의 헤더 셀을 정의한다. - 일반적으로 테이블의 첫 번째 행()이나 첫 번째 열()에 위치하여 해당 열 또는 행의 제목을 나타냄. - 일반적으로 굵은 텍스트 스타일로 표시되며, 기본적으로 가운데 정렬됨. - 테이블의 데이터 셀을 정의한다. - 테이블의 각 행()에서 실제 데이터 값을 포함하는 셀로 사용됨. - 텍스트나 이미지 등을 포함할 수 있으며, 기본적으로 왼쪽 정렬됨. 번호 상품명 1 콜라 2 사이다 - 와 는 테이블을 구성하는 두 가지 섹션을 나타내..

기본적으로, 제어판에서 VSCode 프로그램을 삭제한 뒤, 해당 경로에 접속한다. C:\Users\alsdu\AppData\Roaming 위 주소를 복사해서 들어가도 되고, 직접 폴더를 찾아 들어가도 되는데 AppData 폴더는 숨겨져 있기 때문에 보기 탭에서 숨김 항목을 체크해야 볼 수 있다!! 윈도우 버전마다 조금 생긴게 다를 수도 있지만 비슷비슷하다. 폴더 옵션에 들어가서 해당 버튼이 체크되어 있는지도 확인한다. 이렇게 해서 Roaming 폴더로 들어가면 Code라는 폴더가 있을텐데 통째로 삭제해 준다. 끝~😎 VSCode 설치할 때 모두 체크해주면 편하다고 함. (취향껏..!)

🔸 마크다운 문법 제목 적을 때는 #의 개수로 제목 크기 조절하기 글씨에 효과 주기 ** 을 양 끝에 추가 (bold효과) 내용 ~을 양 끝에 추가 (줄 긋기) 내용 *을 양 끝에 추가 (기울이기 효과) 내용 ` (백틱) 3개 ⇒ 코드창 ```html Hello World! ``` 이런 식으로 작성! 🔸HTML (Hyper Text Merkup Language) - 크롬/엣지 같은 브라우저가 html, css, js 등을 해석해서 사이트처럼 보이게 만들어 주는 인터프리터. - 즉, html, css, js는 스크립트 언어이다. 브라우저 위에서 돌아가는 언어. Hyper Text 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup Language 논문 용도 태그 등을 이용해서 문서나 데이터의..

3-4단계에서는 유효성 체크를 세세하게 하지 않아서, 아무렇게나 가입이 가능했다. 이번 포스팅에서는 이전에 상품명 중복확인 한 걸 회원가입에도 적용해 보고 3부분 다 글자 사이 공백은 허용하지 않도록, 아이디는 영어만 쓰도록, 이메일 형식을 지키도록 만들어 보려고 한다! 사실 input 태그에 required(붙이면 공백 불가) 를 붙이거나 type을 지정해 놓으면 어느 정도의 유효성 체크는 된다. 하지만 required는 전체 공백을 막아주는 것이지 글자 사이의 공백을 막는 것은 아니며, type 속성에 영어만 쓰도록 하는 것은 없기 때문에! 이 부분을 자바스크립트로 처리해 보자!😋 (기록용으로 작성했다. 이 포스팅의 코드들은 뒤에서 대부분 다 수정되므로 직접 사용하지는 말자!!) 📺 화면 설계📺 jo..