FrontEnd/css

트랜지션CSS 프로퍼티의 값이 변화할 때 일정시간에 걸쳐 일어나게 하는것 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    1.transition-property트랜지션의 대상 CSS 프로퍼티명 지정 (기본값 all) " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    2.transition-duration트랜지션이 일어나는 지속시간각각 프로퍼티에 따라 1대1로 대응된다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   3.transition-timing-function기본값 ease로 트랜지션의 효과리듬을 정한다. " data-ke-type="html">H..

그레이디언트2가지 이상의 색을 혼합하여 배경을 생성하는것https://www.colorzilla.com/ko/gradient-editor/해당 사이트에서 css 그라디언트를 쉽게 생성할수있다.

1.text-shadow{ text-shadow: Horizontal-offset Vertical-offset Blur-Radius Shadow-Color; }의 형식으로 작성된다. 1-1.horizontal offset(생략불가)그림자를 오른쪽으로 지정값 이동 1-2.vertical offset(생략불가)그림자를 아래로 지정값 이동 1-3.blur radius그림자의 흐림 정도(커질수록 흐려지고 그림자가 커짐) 1-4.color그림자 색지정   그림자~그림자~" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스       2.box-shodow{ box-shadow: Inset Horizontal-offset Vertical-offset Blur-Radius Spread Shad..

벤더 프리픽스웹 브라우저가 아직 표준화되지 않은 CSS 속성이나 JavaScript 기능을 지원할 때 사용하는 접두사.example { -webkit-border-radius: 10px; /* Safari, Chrome */ -moz-border-radius: 10px; /* Firefox */ -ms-border-radius: 10px; /* Internet Explorer */ -o-border-radius: 10px; /* Opera */ border-radius: 10px; /* W3C 표준 */}

1.상속상위요소의 프로퍼티를 하위 요소에 상속하는 행위visibility ,opacity ,font ,color ,line-height ,text-align ,white-space이 상속가능하다  제목입니다 내용용용 상속안된버튼?    2.상속받지 못한 요소 상속inherit 키워드로 명시적으로 상속가능 제목입니다 내용용용 상속안된버튼?     2.캐스캐이딩CSS 적용 우선순위 중요도head의 stylehead style의 @import의 css파일의 css파일의 @import브라우저 스타일시트  명시도대상을 명확하게 특정할수록 우선순위가 높아짐아래에서 더 상세하게 규정한 css로 적용되었다.어떤색?  선언순서나중에 선언된 css가 우선순위를 가진다.어떤색일까       ..

float기존 레이아웃 흐름에서 벗어나 이동시키는것(position absolute 사용금지)    1.정렬float:left는 왼쪽부터 가로 정렬, float:right는 오른쪽부터 가로정렬된다.     2.width 100%        float를 설정하지않은 box 위에 float 박스가 위에 부유하게된다.        3.overflow: hidden 설정위 상자에서 float 설정을안한 상자에 overflow: hidden 프로퍼티를 선언하면 float에 의해 표현되지 못하는 요소를 출력해준다.     🎈참고자료https://poiemaweb.com/css3-float

Position요소의 위치를 정의  1.staticposition 프로퍼티의 기본값static으로 지정할시 top,bottom,left,right를 사용할수없다.    2.relative기본위치를 기준으로 top bottom left, right 를 사용하여 위치 이동  3.absolute절대위치다. static을 제외한 가장 가까운부모~조상요소를 기준으로 위치를 잡는다,(relative 인 부모,조상이없다면 document body를 기준으로 한다.)      4.fixed부모요소 관계없이 viewport를 기준으로 위치(스크롤 되도 같은곳에 위치됨)    5.z-index화면전면에 나올 요소를 결정한다.(static에는 적..

1.font-size텍스트 사이즈aaaa" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스       2.font-family폰트지정timestimes" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    3. font-style 이탤릭체(기울임)지정기울어짐기울어짐" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      4.font-weight폰트 굵기 지정얇음두꺼움1000얇음두꺼움1000" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    5.line-height텍스트 높이지정높이지정높이지정높이지정높이지정" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   6.lett..