0426 uiux 20일차

0426 금 uiux 20일차

강사님 수업페이지
( https://codepen.io/hjyee/full/OJGrVYJ )

 코드펜
( https://codepen.io/YoungHeom )

 

---

지난 시간 결석해서 개인적으로 정리해봄

 

box-sizing, 음수마진 ( https://codepen.io/YoungHeom/pen/JjqMZmV )

 

max-width, min-width 

 

max-width: 요소의 최대 너비를 이만큼 가지겠다. 페이지 크기가 커지더라도 최대 너비값대로만 가지겠다.

 

min-width: 페이지 크기가 작아질 때 얼만큼 이상 작아지지 않겠다. 페이지 크기가 작아질 때 최소 너비값만큼만 가지겠다.

 

 

max-width&width 차이 

 

width는 너비가 '고정값'이다.

max-width는 요소의 '최대 너비'를 지정한다.

 

width, max-width 값 모두 300px이라고 가정해보자. width: 300px;의 경우 페이지 크기를 줄여도 너비에 아무런 변화가 없다. max-width: 300px;의 경우 최대 너비를 300px;만큼만 가질 수 있어 페이지 크기가 300px보다 클 때는 width: 300px; 과의 차이가 없어 보이지만 페이지 너비를 300px 이하로 줄여보면 width: 300px;과 달리 너비가 300px이하로 줄어든다. 만약 min-width

---

inline, inline-block 가운데 정렬하기
inline, inline-block 요소를 감싸고 있는 block 속성의 요소에게 text-align: center;를 준다
 
1차 메뉴 복습 겸 text-align을 줘야 하는 위치, display: block;
( https://codepen.io/YoungHeom/pen/rNbRjqY )
 
ul 자식으로 ul이 올 순 없다.
ul>li>ul은 가능
 
text-align: center; 어디에 적을까?
( https://codepen.io/YoungHeom/pen/rNbRjqY )
 
 
폰트어썸에서 아이콘 가져올 때 html 상단에 ↓ 이거 적을 것. 내가 아이디 만들어서 복사한 것임!
<script src="https://kit.fontawesome.com/c56732103f.js" crossorigin="anonymous"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" />
ㄴ 아님 강사님이 알려주신 이거 적기 ( https://codepen.io/YoungHeom/pen/JjVzWJV )

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.10.3/full.css" integrity="sha512-qIL6mxTcCeoL0KcBnGtTai4qCJG1YdvvLRGhTuAxQIRjVxFQcnzen0DPpIMXiozMJor3ZvquMUUvN7Kq5h/ReQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

ㄴ 데이지 UI 사용할 때 이거 적기

 

( https://cdnjs.com/ ) 여기서 테일윈드, 데이지.css 검색후 html 상단에 붙여넣기