ucong97

flex - 레이아웃 쉽게 구성가능 - 수평구조뿐만아니라 수직구성도 가능 justify-content : 주 축의 정렬 방법을 설정 flex-start: 컨테이너의 주축 시작 부분에 항목 그룹화 flex-end: 주축 끝에서 항목 그룹화 center: 주축의 중심에 그룹 항목 space-between: 첫 번째 항목이 시작 부분에 정렬되고 마지막 항목이 끝 부분에 정렬되도록 기본 축을 따라 항목을 균등하게 배포합니다. space-around: 모든 항목이 주위에 동일한 공간을 갖도록 항목을 주축을 따라 균등하게 분배합니다. align-content : 교차 축의 정렬 방법을 설정 ( 2줄 이상 ) align-items : 교차 축에서 Items의 정렬 방법을 설정 ( 1줄 ) flex-start: 컨테이..

ex) css .con-min-width{ min-width : 값 ; } - 요소의 최소 너비를 설정 - width 속성의 사용값이 자신의 값보다 작아지는것을 방지

툴팁(tooltip) 이란? - 공통 그래픽 사용자 인터페이스 요소 - 마우스 포인터(커서) 와 함께 동작 - 사용자가 커서로 항목을 클릭하지 않고 가리키기만 했을때 조그마한 상자가 항목 위에 나타나 보충설명을 해준다.

!important - css는 같은 속성 여러번 정의시 나중에 설정한 값이 적용되는데, 나중에 설정한 값이 적용되지 않게 하고싶을때 사용 ex ) css 속성 : 속성값 !important ;

float - 이미지나 문서를 오른쪽이나 왼쪽으로 띄어서 정렬할때 사용 ex) CSS div{ float:속성값; } - left - 왼쪽으로 띄움 - right - 오른쪽으로 띄움 - none - 기본값, 띄우지않음 - initial - 기본값으로 설정 - inherit : 부모속성 물려받음 float 속성 종류 left right none 너비 최대한 줄어든다. 최대한 줄어든다. 그대로 유지 본질 위로 올라갈 수 있으면 올라간 후 좌측으로 붙는다. 위로 올라갈 수 있으면 올라간 후 우측으로 붙는다 - block요소 부터 무시 무시당함 무시당함 무시안당함 inline, inline-block요소 부터 무시 무시안당함 무시안당함 무시안당함 *clear:both - float 계에서 줄바꿈(엔터) 역할을 ..

transition - CSS 속성을 변경할 때 애니메이션 속도를 조절할때 사용 ex) css div{ 트랜지션적용시킬속성:속성값; transition: 트랜지션적용시킬속성 지연시간 딜레이시간, 속성값 지연시간 딜레이시간 , ... ; } * 트랜지션적욕시킬속성의 속성값이 명확해야한다.

opacity - 불투명도 ex) css div{ opacitiy:값; } - 값 : 0~1

border-collapse - 테이블 또는 셀의 테두리선 표시방법 지정하는 속성 ex) css div{ border-collapse:속성값; } - collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 - separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현

가상요소 - 별도의 CSS를 지정하지 않아도 지정한 것처럼 선택할 수 있다. ::after - 요소 끝나는부분에 콘텐츠 추가 ::before - 요소 시작부분에 콘텐츠 추가 속성 HTML CSS VIEW ::after 유경 div::after{ content:"님"; } 유경님 ::before 유경 div::before{ content:"김"; } 김유경

text-overflow - 박스 안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성 * overflow 속성값이 hidden, scroll, auto 일때 ( 기본값일때 X) white-space:nowrap 또는 텍스트가 다음 줄로 이동하지 않는 경우 div{ text-overflow:속성값; } - clip : 텍스트 자르고, 잘린 텍스트에 접근 불가 - ellipsis : 텍스트 자르고, "..." 을 추가해 짤린 텍스트임을 표시 - initial : 기본값으로 자동설정