본문 바로가기

웹 기초 수업(웹1)3

2024-10-21(월) 웹 3일차(display:flex속성) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기url # 1교시_여백(padding, margin)마켓컬리 와이어프레임 구현(2) ex ) .banner > .container ㄴ> : 자식 선택자  line-height 단점- 유연하게 이동 x- 높이 값을 바꿨을 때 제대로 작용 x(고정 픽셀이기 때문)  block -레이아웃을 구성하는 태그 ㄴpadding  padding) : 여백- 태그를 기준으로 안쪽에 여백을 줌  margin): 여백- 태그를 기준으로 바깥쪽에 여백을 줌- 정말 필요하지 않은 이상 위에서 아래로 나온다.(상위태그→하위태그) ㄴmargin-left: auto; / margin-right:auto; => 중앙정렬  도형 .. 2024. 10. 21.
2024-10-18(금) 웹 2일차(피그마 간단 사용법, 폰트 적용...) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기url # 피그마 간단 사용법단축키역할Ctrl + 마우스 휠    화면 확대 / 축소스페이스바 + 클릭 드래그 화면 이동v선택 툴 활성화 # 피그마 예제 _ 사이트 와이어 프레임)- 디자인을 들어가기 전 간단한 정보만 배치 되어있는 상태- 디자인을 들어가기 전에 와이어프레임을 먼저 제작하고 그 후에 디자인을 입히는 단계가 정석임  디자인→개발)브랜딩 → 서비스 기획 or 제품 개발 → 와이어프레임(텍스트와 네모 상자 배치) → 이미지 배치 → 디자인 →퍼블리싱(HTML, CSS, JQ) → 프론트 (백과 연결된 스크립트) → 백ㄴ 현재 기업에서 프론트 기본까지 요구하는 곳도 많음...에이전시 ㄴ H.. 2024. 10. 18.
2024-10-16(수) 웹1 1일차(html, css 구조 파악) # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기url # 수업 준비 사항- 멘토님 통해서 교재 구입- 3일 동안 교재로 수업x# HTML, CSS, JS 기본 구조HTML): HyperText Markup Language- 공간만 제공 / 눈에 보이지 않는 구조, 뼈대- 전체적인 구조- 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고 구조와 의미를 부요하요 정적 언어로 웹의 구조를 담당  CSS): Cascading Style Sheets- html 디자인 하는 구조(벽)- 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격- 마크업 언어(HTML 등)가 실제 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정하여 콘텐츠.. 2024. 10. 16.

티스토리툴바