본문 바로가기

[개발] Practice152

[HTML/CSS] Landing Page 만들기 💡 실습 포인트! transform 속성의 scale 을 사용하여 마우스 오버를 했을 때 살짝 작아지는 효과를 주었다. 강의를 통해 사진은 그대로 있고 마우스 오버를 할 때 하얗고 두꺼운 테두리를 덮어씌워 애니메이션 효과를 주는 방법도 배웠는데 그렇게 하는 경우 사방의 여백이 날아간 것처럼 보이기 때문에 처음 시작할 때의 padding 값보다 끝날 때의 padding 값을 더 줘야 예쁘더라. 💡 PC 화면 아이콘 배치나 이미지 배치는 이전에 해봤기에 안 어렵겠다싶었는데 뜻밖에도 폰 이미지때문에 반응형으로 웹페이지를 만들 때 대환장파티였다. PC 화면에서 배치하는 것은 문제가 되지 않았지만 반응형의 특성상 가로너비를 조절하더라도 어색하지 않게 배치가 되어야 하는데, position : absolute 와 .. 2022. 3. 1.
[HTML/CSS] 상품 레이아웃과 애니메이션 구현하기 💡 실습 포인트! 제일 공을 많이 들였던 부분은 애니메이션 효과이다. 마우스 오버하는 경우 적당한 높이(이미지 높이의 60% 정도)의 가격이 적힌 반투명한 창이 올라오게끔 구현하는 것이었는데 position, transition, transform, opacity, overflow 과 같은 다양한 속성을 조합해서 만들 수 있었다. 💡 PC 화면 PC용 레이아웃 자체를 구성하는 것은 엄청나게 어렵지는 않았다. 회색 박스를 position: absolute 속성을 활용하여 위치조정을 하고있었는데 margin collapse 현상 때문에 애를 먹었고, 해결하고 나니 회색박스와 아이콘이 들어있는 박스의 간격이 제대로 조절되지 않아서 시간이 한참 걸렸다. 다만, 태블릿이나 모바일에서 화면을 보았을 때 어색한 부분.. 2022. 3. 1.
[HTML/CSS] 쇼핑 카트 레이아웃 & pseudo-class로 인터랙티브 버튼 만들기 💡 실습 포인트! 레이아웃 디자인은 물론이고 pseudo-class 를 활용하여 특정 행위(마우스 오버, 포커스, 클릭 중 등)에 대한 디자인을 다르게 할 수 있음! 💜 Pseudo-class 셀렉터 .btn:hover { background : chocolate; /*마우스를 올려놓을 때*/ } .btn:focus { background : red; /*클릭 후 계속 포커스 상태일 때*/ } .btn:active { background : brown; /*클릭 중일 때*/ } input:focus { border : 2px solid red; } a:link { color : red; /*방문 전 링크*/ } a:visited { color : black; /*방문 후 링크*/ } pseudo-clas.. 2022. 3. 1.
[HTML/CSS] 블로그 글목록 만들기 💡 실습 포인트! 수업의 목적이 HTML/CSS 를 이용한 간단한 배치 및 디자인이어서 그냥 샘플이미지와 내용을 넣었다..ㅎㅎ 💜 Float 속성 /* 빈 div 박스에 clear 속성을 추가하는 방법 */ .left-box { width : 50%; height : 100px; float : left; } .right-box { width : 50%; height : 100px; float : left; } 위와 같이 코드를 작성하면 박스들을 왼쪽 정렬할 수 있음 float 속성은 요소를 뜨게 하므로 다음에 오는 HTML 요소들이 원하는대로 자리를 찾지 못할 수 있으므로 clear 속성을 사용하여 제자리를 찾게 해주어야 함 float: none 을 추가해주는 것도 버그 발생을 줄일 수 있는 방법! fl.. 2022. 3. 1.
[HTML/CSS] 내 소개글 적고 꾸며보기 💡 실습 포인트! 수업의 목적이 HTML/CSS 를 이용한 간단한 배치 및 디자인이어서 그냥 샘플이미지와 내용을 넣었다..ㅎㅎ 💜 네모 박스 디자인에 많이 사용하는 CSS 속성 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } 💜 가운데 정렬 .box { display : block; margin-left : auto; margin-right : auto } 💜 box-shadow /* 문법 */ box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앰 x-position.. 2022. 3. 1.
[윈도우 10_Git 설치] Git 설치하기(2.35.1 설치방법) 개발공부하는 내내 맥만 사용하다가 윈도우를 사용해서 공부하고 기록하려니 Git 설치부터 다시 해야하네.. (사실 맥에서도 어떻게 설정했는지 기억도 안 난다...ㅎㅎ) 윈도우에 Git 을 설치해야하는 일이 또 발생할 수 있으니 바로 따라할 수 있게 기록이라도 해두어야겠다. 여튼 이제 다시 Github 도 관리해야하니 Git 을 설치해보자! 💜 Git 설치 파일 다운로드 Git 설치 파일은 아래의 Git SCM 에 접속하여 다운로드 받을 수 있다. Git git-scm.com 위 링크에 접속하면, 우측 하단에 컴퓨터 모니터 모양의 이미지에 현재 접속한 운영체제에 맞는 Git 최신 버전이 표시되며, 이미지 내의 Download for Windows 버튼을 클릭하여 Git 다운로드 페이지로 이동할 수 있다. 다.. 2022. 2. 26.
[윈도우 10_관리자 권한] 이 폴더를 삭제하려면 관리자 권한이 필요합니다. FontAwesome 홈페이지의 다운로드 메뉴를 통해 zip 파일을 다운받아 압축을 풀고 일부 파일 및 폴더를 삭제하려고 했더니 "이 폴더를 삭제하려면 관리자 권한이 필요합니다." 라는 내용의 팝업이 뜨면서 삭제가 되지 않았다. 관리자 계정이 아니었나 확인을 다시 해봐도 관리자 계정이 맞는데... 일단 해결을 위해서 구글링을 해보았다. 알고보니 관리자 계정이라고 명칭은 되어있었으나, 권한이 제대로 부여되어있지 않은 것이었고 몇 시간의 구글링을 통해 해결했다. 💜 파일/폴더 삭제 불가 문제 화면 폴더 액세스가 거부됨 이 폴더를 삭제하려면 관리자 권한이 필요합니다. 💜 파일/폴더 삭제 불가 문제 해결방법 1. Microsoft 커뮤니티에서 제안한 해결방법 - 참고로 나는 이 방법을 이용해도 문제가 해결되지 .. 2022. 2. 16.
[VSCode_Live Server] 페이지가 작동하지 않습니다. 기존에 프로그래밍 공부용 M1맥북을 사용하다가 내가 필요한 몇몇 프로그램들(예를 들어.. SQLDeveloper)을 M1맥에서 지원하지 않는다는 것을 알게 되어 윈도우로 갈아타게 되었다. 그러면서 개발셋팅을 다시 하게 되었는데 VSCode 확장프로그램 중 Live Server 를 설치하고 사용하려던 중 의외의 곳에서 문제가 발생했다. 💜 Live Server 확장프로그램 설치 - Live Server 는 로컬에서 파일을 수정 후 저장하면 수정된 내용을 바로 반영하여 보여준다. 💜 Live Server 문제 화면 페이지가 작동하지 않습니다. 127.0.0.1에서 전송한 데이터가 없습니다. ERR_EMPTY_RESPONSE 💜 Live Server 문제 해결방법 1. Live Server 설정(톱니바퀴) 클.. 2022. 2. 16.

티스토리툴바