2024. 07. 30 UIUX 웹 10일차

[1교시]

- 2024. 08. 02(금) 발표(순서:_7번째)

- 2조 고언정, 장주연(30-40분 정도 발표) 

- 능력단위 평가(2024. 08. 06 화요일)

 ㄴ월, 수요일 결석 시험(강사님 시간 되시는 날/ 결석자 시험) => 시험 안보면 수료증x

 ㄴ flex시험 

[2교시]

 

 

 

 

 

[3교시]

- 팀 프로젝트 끝나면 개인 과제 부여

- 과제 수행 못할 시 남아서 강사님이랑 같이 작업

- 피그마 태그 다 설정, html 불필요한 측정(원래 있어야 할 곳에 없으면 감점)

  / 코드를 정확히 이해했나? / 마구잡이로 했나?(background 꼭 설정, rgb, blue 이런거는 상관x)

https://codepen.io/faiqvecr-the-bashful/pen/oNrBGeN

 

 

 ㄴ <a href="https://www.naver.com/"target=blank">네이버로 이동</a>

 ㄴ 여는 태그(<a href="https://www.naver.com/"target=blank">)  / 닫는태그(</a>) / 엘리먼트(네이버로 이동)

 

[앵커태크_a태그]

- 클릭 했을 때 원하는 경로로 이동할 수 있게 해주는 태그

- 반드시 요소가 있어야 클릭해서 이동할 수 있다.

- 기본적으로 href라는 속성이 생성된다.

- target이라는 속성이 작동되고 있다.

 ㄴ 기본값: self(내가 보고 있는 페이지가 바뀌면서 경로 이동)

 ㄴblank(새 탭이 열리면서 경로 이동)

- title속성을 사용할 수 있다.

 ㄴ형태) title=''

 ㄴ ""안에 원하는 문구를 입력해주면 마우스를 올렸을 때 말풍선으로 표시 해준다.

 ㄴ 이동할 링크가 정해지지 않았다면 href속성 값으로 꼭 #을 작성해줘야 한다.

[none 값]

- 없앤다

 ㄴ text-decoration 삭제한다

 

ㄴ포멧(Format HTML)

ㄴ 이동할 링크가 정해지지 않았다면 href속성 값으로 꼭 #을 작성해줘야 한다.

같은 코드가 

 ㄴ 기본 코드 상태

 

 

[4교시]

 

* 스와이퍼

 

[flex]

- flex속성 값이 적용된 태그를 flex-container라고 부른다.

- flex-container 자식을  flex-item이라고 부른다.

- flex-item은 줄바꿈 되라는 코드가 적용되기 전까지 절대 줄바꿈되지 않는다.

 ㄴ 높이가 기본값 일 때 (100)

 ㄴ 줄어들 수 있을 때 까지 유연하게 계속 줄어든다.

 

[align-items와 flex-items높이]

- align-items: stretch;

 ㄴ height: auto = 100% / 높이가 기본 값일 때 100으로 작용

- align-items: 그 외 값;

 ㄴheight: auto = 0

- flex-itmes을 한 번에 정렬하는 속성은 flex-container에 적용한다.

- flex-item을 개별적으로 커스텀 할 수 있는 속성은 flex-item에 적용한다.

 ㄴalign-self, flex-grow, flex-basis

 

[align-items] 세로정렬 속성

- stretch 값을 제외하곤 flex-item높이를 강제로 작게 줄여서 이동 정렬 시킨다.

*flex는 생략하고 작성할 수 있다(이름 앞에)

ㄴ예시) align-items: start;

상단정렬)

- align-items: flex-start;

중앙정렬)

align-items: center;

하단정렬)

gn-items: flex-end;

 

[5교시]

* flex 개구리

*oder 속성 →스킵하고 넘어가라

 

[justfiy-content] _ 가로 정렬

* flex items

color : 한줄에 하나씩(=block)