wisePocket

HTML, CSS 기초 배운점: HTML, CSS과 Bootstrap 활용을 빠르게 복습 어려운 점: 태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화해야 한다. 블로그 링크 : https://ohnyong.tistory.com/3 https://ohnyong.tistory.com/4 CSS 활용 배운점: linear-gradient 를 사용하여 이미지를 어둡게 보정 division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬 백그라운드 색상 제거 (투명화) transprent 추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가 어려운 점: 기초적인 CSS 꾸미는 태그, 속성 사용법 익혀야 한다. 부트스트랩을 활용하더라도..

linear-gradient 를 사용하여 이미지를 어둡게 보정 할 수 있다. 보통 은은하고 Dark한 느낌을 좋아하다 보니.. background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg"); division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬하는 4줄 코드이다. 프로토타입 페이지 구성할때 그냥 외워서(ctrl c+v) 사용할 코드. 자주 사용될 것 같다. 이전에 text-align... block.. 등 생각보다 내 마음대..

구글에서 지원해주는 폰트를 적용할 수 있다. 1. Google Fonts 페이지 방문 해당 페이지에서 Google이 제공하는 다양한 폰트를 확인 할 수 있다. https://fonts.google.com/?subset=korean Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 원하는 폰트 선택 원하는 폰트 종류(Font-Family)를 선택한 이후 하단에 나열되는 폰트 세부 형태를 결정하고 "Select"를 클릭하면 우측 세부정보 창이 나타난다. 3. 폰트 참조 링크 복사 세부정보 창에서 copy code 탭의 "@import"를 선택하면 ..

1. 메인 페이지의 코드를 간소화 시킴 2. 협업 시 분리 작업 가능 3. 프로젝트 관리 편리 head태그 내에서 링크태그를 통해 태그 내 꾸밈 코드들을 분리 할 수 있다. index.html의 에 추가된 내용 index.html의 style태그 코드는 모두 주석(삭제) 처리 되었다. /* style.css로 모듈화 시킴 */ new file으로 style.css 파일 생성 style 태그 내에 있던 코드를 해당 파일로 옮김 * { font-family: "Gowun Dodum", sans-serif; } .mytitle { width: 100%; height: 250px; background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0,..

아이디와 패스워드 input 속성인 type="text"와 type="password"를 활용 추후에 form태그로 감싸고 method 속성을 통해 통신해야 한다. head태그에서 style태그를 통해 클래스, 아이디 등 선택자를 지정하여 다양한 style을 적용 시킬 수 있다. DOCTYPE html> Document .mytitle { color:red; font-size:40px; } .mybtn { font-size: 12px; background-color: green; color: white; } .mytxt { color: green; } 로그인 페이지 ID : PASS : 로그인 하기 해당 스터디는 아래 깃을 통해 업데이트 되고 있습니다. https://github.com/yzpocket/..