728x90

일단 해보는 코딩/Project 5

[3일차] MBTI 테스트 프로그램만들기

메인 페이지 구조 만들기 index.html 나 95년생 재은쓰 내 안에 숨어있는 직업캐 찾기! 본캐 찾으러 GO! 주변에 알리기 home.css body{ background-color: #f6fcff; background-image: url("../images/main_bg.jpg"); background-position: top center; background-repeat: no-repeat; } .character { width: 100%; max-width: 364px; margin-left: auto; margin-right: auto; margin-bottom: 40px; } common.css - 여러 번 사용하는 코드들을 따로 만들기 - css 를 활용하여 애니메이션 효과주기 body ..

[2일차] MBTI 테스트 프로그램만들기

파비콘(favorite icon) 이란? 즐겨찾기(favorites)와 아이콘(icon)의 합성어 주소 창에 표시된 작은 아이콘. * png, jpg, gif 등의 이미지를 ico 확장자로 변환하여 사용 보통 루트경로에있는 ico 파일을 찾아서 가장 먼저 사용을 하게 되어있고, 가끔 아이콘을 찾아올 수 없는 경우가 있으니 png 파일을 준비해 link 코드를 활용하여 강제로 아이콘을 삽입. 내 안에 숨어있는 직업캐 찾기! Reset.css 브라우저의 기본 스타일을 초기화하는 법 웹 브라우저는 굉장히 다양해서 화면에 출력되는 글씨의 간격, 크기 등등이 다르게 출력된다. 각 브라우저가 제공하는 css 부분이 다를 수 있기때문에 이 부분들을 해결하기 위해 초기화를 시켜준다. https://www.jsdeliv..

[1일차] vscode 세팅부터 MBTI 테스트 프로그램만들기

프론트엔드개발 : 사용자 브라우저에 출력되는 화면 웹 사이트 동작 원리 : 웹 브라우저(크롬,엣지) 서버, 데이터베이스 HTML, CSS JS 기술을 익혀 프론트엔드 개발 어떤 역할을 하는지 명확하게 이해하는 것이 목표!!!! 더보기 ■ HTML (Hyper Text Markup Language) 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당 ■ CSS (Cascading Style Sheets) 실제 화면에 표시되는 방법(생상, 크기, 폰트, 레이아웃 등) 을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적) 을 담당 ■ JS(JavaScript) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당 VSCODE 작업세팅 및 꿀팁 확장 프로그램 설치 1. 태그이름을 수정할때..

728x90