웹 기초 수업(웹2)9 2024. 11. 18(월) 웹2 3일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 1교시position속성)- absolute : 상위태그- body가 부모 역할을 함- 참고 사이트- 참고 사이트- 참고 사이트- 참고 사이트ㄴ transform을 사용하여 변형→transform: translatY(-50%);/ transform: translate(-50%, -50%); / 두 가지 방법 다 사용O # 2교시object-fit속성)- img태그나 video요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정- object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할.. 2024. 11. 18. 2024. 11. 15(금) 웹2 2일차 높이가 많이 들어갈 수록 코드의 방향성을 잃을 가능성이 높음-> 높이 유연하게 주는 이유 그리드 사이즈는 중요한 역할을 함 max-width)- 최대치 ex. max-width: 1440px; → 0~1440px까지 유연하게 작동ㄴ %처럼 유연하게 줄어들 수 있고 원하는 수치까지 적용 가능한 아주 유용한 속성!ㄴ 0까지는 내려가지만 최대치가 1440이라 그 이상으로는 안감 flex-item)- flex-shrink: 1; → 기본값ㄴ 기본값으로 인해 width에 고정 px이 적용되어 있어도 유연하게 줄어들고 늘어난다.ㄴ flex-shrink: 0; → 위 특징이 사라진다. flex-item은 줄바꿈 되라는 명령이 있기 전까지는 절대 줄바꿈 되지 않는다.(flex-wrap: wrap;)ㄴ fl.. 2024. 11. 15. 2024. 11. 13(수) 웹2 1일차 # 수업시간에 띄어놔야 할 창사이트 이름사이트 주소수업페이지url코드펜urlgit-huburl피그마 예제보기urlvscode 화면 / 미리보기 화면 띄워두기-# 1교시 지마켓 상단바 구현_피그마 이동)ㄴ 박스를 나눠서 코딩 ㄴ1080 1280 1400ㄴ 정렬 ㄴ 로고박스ㄴ 메뉴바ㄴ 사용자 메뉴 일렬정렬)- display(속성) flex(속성값)- display(속성) inline(속성값) flex 사용 조건)- 하나의 박스 안에 있어야 한다.- 상위태그와 하위태그로 이루어져 있어야 한다. → flex-box를 사용해야 함! ㄴ flex-item은 너비가 작다. 목록과 리스트 태그)- 순서가 있는 구조에 사용하거나 순서는 없고 리스트가 있는 구조에 사용한다.ㄴ menu-box # 2교시ㄴ li 글씨.. 2024. 11. 13. 이전 1 2 다음
