UIUX 수업페이지
UIUX 수업페이지 제출 제출 드라이브 이동하기 발표순서 1번 07.31(수) 7조 이희준, 서정우 2번 08.01(목) 8조 정수연, 채수현 3번 08.01(목) 6조 정희영, 신은지 4번 08.01(목) 5조 남궁솔, 나은지 5번 08.01(목
docs.google.com
Create a New Pen
Behavior Auto Save If active, Pens will autosave every 30 seconds after being saved once. Auto-Updating Preview If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update. Format on Save If enabled, your co
codepen.io
https://codepen.io/limyena/pen/poXRWrV
엥커태그(a태그)
...
codepen.io
[앵커태그]
- 클릭했을 때 원하는 경로로 이동할 수 있게 해주는 태그
- 요소가 있어야 클릭해서 이동할 수 있다.
- 기본적으로 href라는 속성이 생성된다
-기본적으로 target이라는 속성이 작동되고 있다
ㄴ기본값 : _self(내가 보고있는 페이지가 바뀌면서 경로 이동)
ㄴ _blank(새 탭이 열리면서 경로 이동)
- title속성을 사용할 수 있다
ㄴ형태 : title=""
ㄴ""안에 원하는 문구를 입력해주면 마우스를 올렸을 때 말풍선으로 표시해준다
- 이동할 링크가 정해지지 않았다면 href 속성값으로 꼭 #을 작성해줘야한다
[none값]
- 없앤다는 의미를 가지고 있음
https://codepen.io/limyena/pen/oNrBGMX?editors=1100
노멀라이즈 예시
...
codepen.io
https://codepen.io/limyena/pen/PorWJgJ?editors=1100
css 힘
...
codepen.io
https://codepen.io/limyena/pen/WNqRXxa
flex 시작
...
codepen.io
[flex]
- flex속성 값이 적용된 태그를 flex-container라고 부른다
- flex-container 자식을 flex-item 이라고 부른다
- flex-item은 줄바꿈 되라는 코드가 적용되기 전까지 절대 줄바꿈 되지 않는다.
ㄴ줄어들 수 있을 때까지 유연하게 계속 줄어든다.
- flex-item을 한번에 정렬하는 속성은 flex-container에 적용한다.
- flez-item을 개별적으로 커스텀 할 수 있는 속성은 flex-item에 적용한다.
ㄴalign-self, flex-grow, flex-baise
https://codepen.io/limyena/pen/ZEdLajG?editors=1100
flex-item과 align-items(세로정렬)
...
codepen.io
[align-items와 flex-item 높이]
- align-items: stretch;
ㄴheight: auto = 100%
- align-items: 그 외 값;
ㄴ height: auto = 0
[align-items] 세로정렬 속성
- stretch값을 제외하곤 flex-item높이를 강제로 작게 줄여서 이동 정렬 시킨다
상단정렬)
align-items: flex-start;
중앙정렬)
align-items: center;
하단정렬)
align-items: flex-end