강의를 참고해 홈페이지 디자인, UI를 만들어봅니다. 간단하게 들어갈 요소와 구성, 레이아웃은 어떻게 할 것인지 생각해봅니다. 이번 실습에서는 Float Layout 방법을 사용해 요소들을 배치할 것입니다. Introduction Float Layout은 요소들을 좌측이나 우측에 위치시킬 수 있는 옵션입니다. float: left | right 필요한 요소 : 버튼 = 로그인 / 회원가입 / 마이페이지 / 주문배송 조회 / 장바구니 / 이용안내 / 고객센터 / 게시판 등 로고(버튼 좌측에 위치하도록 함) 가장 먼저 보여질 Top Bar 부분 전체 코드 (Editing_homepage.html) 로그인 | 회원가입 | 마이페이지 | 주문배송 조회 | 장바구니 | 이용안내 | 고객센터 | myshop 소개 ..
강의를 참고해 절대 위치와 상대 위치에 대해 알아봅니다. 절대 위치와 상대 위치는 position 위치에 대한 요소를 의미합니다. 절대 위치는 다른 객체에 영향받지 않고 지정한 위치나 속성에 따라 고정값을 가지는 위치를 의미합니다. 절대값이며, 부모 요소를 기준으로 위치를 정하게 됩니다.상대 위치는 자신의 위치에서 상대적인 위치로 이동이 되는 속성입니다. 다른 객체를 이용할 수 있고, 간단히 이동하고자 할때 사용하기도 합니다. Introduction 보통 도형이나 박스 혹은 객체들을 만들어줄때 크기나 위치를 지정해주기도 합니다. 크기 속성으로는 width (너비 - 가로) 와 height (높이 - 세로) 속성이 있고,위치 속성으로는 position : absolute | relative 외로 left ..
강의를 참고해 박스에 스타일을 적용합니다. 태그 내에 box-shadow 속성을 적용하여 박스에 그림자를 적용하고, 태그 내에 border, border-color, border-width 등의 속성을 이용해 테두리를 적용합니다. Introduction 박스 그림자 속성은 box-shadow 를 통해 지정해 줄 수 있습니다. box-shadow: none | x-position y-position blur spread color | inset | initial | inherit 이러한 문법을 가지는데, 왼쪽부터 none : 그림자를 적용하지 않음 x-position : 가로에 대한 그림자 위치를 나타내며, + 시 오른쪽에 그림자가 생기고, - 시에는 왼쪽에 그림자가 만들어집니다. (필수) y-positi..
문제상황 GoormIDE로 프로젝트를 작성하였는데, Github에 기록하고 싶은 마음이 생겼다. 기본적으로는 깃허브의 프로젝트를 GoormIDE 에 Clone(복제)하는 것이지만, 그 반대로 Push(업로드)하고 싶은 것이었다. >> GoormIDE에 이미 작성된 프로젝트를 깃허브에 커밋/푸쉬하고자 했다. 해결과정 goormIDE에 이미 작성된 프로젝트는 Github과 연동이 되어있지 않아 Git을 통해 계정인증을 시도하였다. 계정을 로그인하고, 미리 만들어놓은 저장소(Repository)를 선택하였다. 클론할 저장소명을 설정 후 확인을 누르니 오류가 발생하였다. 오류내용 : Git 인증에 실패하였습니다. 1) 접근 방식이 잘못된 것 같아, goormIDE의 터미널 창에 "git init"을 입력 2) ..
문제상황 유튜버 '조코딩' 님의 강의를 토대로 "동물상 테스트" 프로젝트를 만들어보았다. GoormIDE로 진행하였고, '이미지 업로드'하는 HTML-CSS-JavaScript 템플릿이 필요하여 Codepen 사이트 에서 특정 템플릿을 선택 후 HTML, CSS, JavaScript 에 맞게 프로젝트 내 코드에 붙여넣었다. 템플릿이 Codepen 사이트 내에서는 이미지가 업로드, 제거가 되는 모습을 확인할 수 있었지만, 프로젝트 내 코드에 붙여넣은 후 Vscode에서 내보낸 미리보기 페이지에서는 이미지 업로드에도 아무 반응 없는 것을 확인할 수 있었다. 해결과정 Alt + Shift + P (정렬 단축키) 로 HTML 포맷팅 정렬을 하였지만 의 형식이 처럼 적용되는 것을 보고 직접 들여쓰기를 하여 코드를..
문제상황 파이썬 언어로 Selenium 가상환경에 대해 배우던 중 VSCode 내에 문제가 발생하였다. 가상환경 Selenium을 실행시키기 위해서는 Scripts 내 Python.exe를 자동으로 실행해주는 "Python: Select Interpreter"를 설정해주어야하는데, Selenium을 설치한 후 "Python x.x.x 64bit"의 기본버전만 인식할 뿐 Selenium Interpreter는 인식하지 못하였다. 문제는 activate로 Scripts 안에 위치한 python.exe를 실행시켜야하는데, Selenium 디렉터리 Python.exe를 인식하지 못하여 Selenium Interpreter를 실행하지 못하는 문제가 발생한것이다. 이는 가상환경 내에 selenium이나 webdri..
문제상황 파이썬 언어로 Selenium 가상환경에 대해 배우던 중 VSCode 내에 문제가 발생하였다. 가상환경 Selenium을 실행시키기 위해서는 Selenium을 만든 디렉터리 내 위치한 Scripts로 디렉터리를 이동시켜야하는데, Vscode 터미널 상에서 "cd Scripts" 명령어로 디렉터리를 이동시켰다. 문제는 activate로 Scripts 안에 위치한 python.exe를 실행시켜야하는데, 오류를 파악해보니 보안 문제로 인해 activate를 할 수 없다는 것이었다. .\activate ~~ CategoryInfo : 보안 오류: (:) [], PSSecurityException FullyQualifiedErrorId : UnauthorizedAccess 해결과정 구글링을 해보았지만 비..
강의를 참고해 선택자에 대한 예제를 실습해봅니다. 간단한 실습이며, h1 = 적용하고자 하는 태그 test1 = 임의 클래스명 { color : blue } = 지정하고자하는 속성 전체 코드 (class_selector.html) 가벼운 마음으로 배우는-녹색 가벼운 마음으로 배우는-파란색 가벼운 마음으로 배우는-빨간색 Result 다음은 구조 선택자입니다. 구조 선택자는 '일반구조 선택자'와 '형태구조 선택자'로 나뉩니다. 일반구조 선택자에서는 홀수나 짝수번째에 다른 스타일을 적용하고자할때 사용합니다.'요소의 class 특성에 기반해 요소를 선택하는 선택자' 입니다. 형태구조 선택자에서는 일반구조 선택자와는 다르게 태그의 형태를 구분합니다. 특정 태그를 선택하여 스타일을 적용하게됩니다. 선택자 형태 : ..
