웹 _ 010일차

[ 앵커태그 ]

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

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

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

 - 기본적으로 [ target ]이라는 속성이 작동되고 있다.

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

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

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

   ㄴ 형태) title=" "

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

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

 

[ none값 ]

 - 없앤다.

 

[ flex ]

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

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

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

inline-block은 꿈도 못 꿀 방식을 우리는 flex로 간편하게 할 수 있어요

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

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

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

 

[ align-items와 flex-item높이]

 - align-items: stretch;

   ㄴ height: auto = 100%

 

 - align-items: 그 외 값;

   ㄴ height: auto = 0

 

[ align-items ] 세로정렬 속성

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

*flex는 생략하고 작성할 수 있다.

  ㄴ예시) align-items: start;

 

상단정렬)

align-items: flex-start;

중앙정렬)

align-items: center;

하단정렬)

align-items: flex-end;