웹 기초 수업(웹2)9 2024. 12. 04(금) 웹2 9일차 웹 3 12월 11일 개강(수) #마켓컬리상품리스트 구현_피그마 ㄴ 코딩을 하기 전 미리 디자인한 폰트 두께, 사이즈, 색깔 정리해서 css에 라이브러리 생성 후 코딩 시작#2교시ㄴmargin-top과 margin-bottom이 만나면 값이 상쇄된다. -> 마진상쇄 2024. 12. 4. 2024. 12. 02(월) 웹2 8일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기- # 1교시 _G마켓-3차메뉴 구현 ##2교시 계층구조 -> 텍스트간 위계구조 타이틀제목 ㄴ 진하고 두껍게 타이틀 제목보다 list 간의 글자 여백 작아야함 여백ㄴ 분리의 역할ㄴ 기본기를 잘 알아야함 웹디자인 : 타이포그래피 기반 모작 사이트ㄴ 여백과 폰트가 많은 사이트ㄴ 코딩 복습 + 디자인 복습 + 포폴 효율 ㄴ 예쁜 것 위주로 모작해라 -> 눈에 디자인을 익혀야 함ㄴ 폰트 사이즈 / 자간 / 행간 / 여백들 / 계층구조 / 타이포그래피 / 선두께 / 글자간 글자 사이의 여백 20이 많이들어감ㄴ 기본기 없이 포트폴리오 내는 사람들 많음.. 2024. 12. 2. 2024. 11. 29(금) 웹2 7일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 2교시 _G마켓-2차메뉴 구현ㄴ 코드가 길어지니까 CSS 폴더를 만들어서 style.css/top.css/banner.css 나눠서 코딩 진행 ㄴ banner 안에 container 중앙 정렬ㄴ block요소 중앙정렬 / margin-left: auto margin-right: auto cursor-pinter 상위태그에 상속받음ㄴ코드를 짜기 전에 구조를 미리 잡아보는 게 좋음ㄴ F1: 약어확장 emment-expand flex-grow: 1; / flex-basis:0; 세트 !!!!!! ★ ★ ★ ★ ★ ★ ★ 가상요소_코드펜 2024. 11. 29. 2024. 11. 27(수) 웹2 6일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 2교시 _KIGAM 구현_피그마relative : display의 역할도 할 수 있음 가상요소 display: inline이기 때문에 너비랑, 높이 사용 불가능 .issue-section -> .issue-section::before만큼 높이 가지기ㄴ.issue-section::before -> 높이 고정px 사용x.issue-section::before보다 container가 위에 구현 -> container에 absolute 적용X#2교시#3교시구글심볼 컴포넌트_코드펜 component 라이브러리...codepen.io span: 인라인은 높.. 2024. 11. 27. 2024. 11. 25(월) 웹2 5일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 2교시 _피코그램 2차 메뉴 fixed)- 상위 태그에 static이 아닌 다른 값이 있어도 무조건 body태그를 기준으로 크기를 상속 받는다. flex-grow)안쪽에 있는 글씨 크기 만큼 가지고 있는 속성이 있음 flex-basis)안쪽 여백을 동일하게 주는 속성 2024. 11. 25. 2024. 11. 20(수) 웹2 4일차 # 1교시 z-index 속성ㄴ 대각선: z축 / 가상의 영역 z-index : 값이 10 안에서 왔다 갔다 해야함/ 10을 넘어가면 유지보수가 안됨 / z-index를 사용하지 않고 구현하는게 가장 좋은 방법임 코드 충돌 x 안나게 조심 충돌났을 때 개발자 모드-> 하단까지 끝까지 내려보면 알 수 있음 id 선택자 ㄴ 스크롤을 아래에서 위로 빨리 올리고 싶을 때 사용함ㄴ 한 번밖에 사용 못함 # 2교시 피코그램 상단바 다시 만들기 + 2차 메뉴 ㄴ 이미지 라이브러리 생성 contain 찾아바꾸기 ctrl + h ㄴ 바꿀 코드를 드래그 후 ctrl+h 누름ㄴ 바꿔야 할 코드를 복붙 후 두 번째 줄에 붙여넣기 후 모두 바꾸기 클릭3교시 /* 넘치는 크기 잘라줌 */ overflow: hidden; 2024. 11. 20. 이전 1 2 다음
