wisePocket

주말이라 좀 쉬면서 웹서핑을 하는데 내 블로그를 보니 흔한 테마로 사용했더니 너무 심심해보였다. 뭔가 추가 해볼만한 것이 없을까 생각되서 메뉴 헤더 부분에 이미지, Github 이미지와 링크를 연결하는데, 나의 티스토리 테마는 반응형으로 구현되어 있었다. 매번 백엔드에만 관심이 있었지만 프론트엔드의 반응형 웹이 변화하는 것이 항상 궁금하긴 했었다. 내가 원하는건 Most Used Languages 위젯의 크기가 커서, 반응형으로 브라우저 크기를 조절하면 메뉴가 삐져나오거나 한쪽으로 치우치고해서 꼴보기 싫었다. 아무리 티스토리 테마로 만들었다해도 HTML, CSS 수정이 가능하기 때문에 한번 수리할겸 프론트엔드는 어떤 코드를 쓰는지 살펴보았다. 우선 내가 아는 프론트엔드? 라고하기에도 기초적인 CSS 지식..

새로운 앨범 너무 멋져요!개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)fan/templates/index.html Body는 Container(Wrap)내 Header / Content / Footer 로 구분 Header : 웹 페이지 타이틀 현재 기온을 나타내주는 부분 #temp 현재 날짜 #date 가수의 노래 오늘 순위 #rank 해당 노래의 순위 변동 #rankdiff Content : (Input form) 응원 댓글을 기록하는 양식은 다음과 같다. 닉네임 (#name)을 input 태그를 통해 value 획득 응원 댓글..

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)bucket/templates/index.html Body는 Header / Content 로 구분 Header : 타이틀(title), 백그라운드 이미지 Content : input(#bucket) 텍스트 입력 박스 / 기록하기 버튼 onclick "save_bucket()" 함수 호출 div(#bucket-list)>li*n 형태로 에 추후 save_bucket() 함수의 결과가 1행씩 추가될 예정(이전 프로젝트까지 Footer로 표현했지만 사실상 Footer의 역할은 하지 않기 때문..

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)pedia/templates/index.html Body는 Header / Content 로 구분 Header : 타이틀(title), 영화 기록하기(button onclick 이벤트) Content : button을 누르면 content부분에 리뷰를 기록하는 양식(form) 이 나타남 onclick open_box() 함수 호출 리뷰를 기록하는 양식은 다음과 같다. 영화 URL(#url) input 태그를 통해 value 획득 별점(#star) select>1~5option 태그를 통해..

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)mars/templates/index.html Body는 Header / Content 로 구분 Header : 간단한 타이틀과 주문 관련 설명 기록 Content : 이름(#name), 주소(#address)는 input 태그를 통해 value 획득 평수(#size)는 select박스에 5개 option을 선택하여 value 획득 table>thead 에 이름, 주소, 평수 컬럼명 3행 지정 table>tbody(#order-box) 에 추후 save_order() 함수의 결과가 1열씩..

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,..

1주차 강의를 통해 HTML, CSS과 Bootstrap 활용을 빠르게 복습 할 수 있었다. 다시 천천히 코드를 작성하고 변화를 관찰하면서 코드 작성법을 익히고 있으며 관련 단축키들도 다시 익숙해지고 있다. // HTML html 주요 태그로는 !doctype 선언문과 html, head, body, div, h1-5, button, input, p, br, img src, label 등 // CSS css 주요 태그로는 color(text),background-color:(background), font-size, font-family, margin, padding, text-align, width, height, border 등 태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화..