그레이디언트2가지 이상의 색을 혼합하여 배경을 생성하는것https://www.colorzilla.com/ko/gradient-editor/해당 사이트에서 css 그라디언트를 쉽게 생성할수있다.
FrontEnd/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..
1.background-image배경이미지 지정 2.background-repeat이미지 반복 설정2개이상의 이미지를 배경으로 사용할수도있음(이때 다른 프로퍼티값은 , 로 구분하여 작성) 3.background-size이미지 사이즈 지정px:px값으로 지정%:%값으로 지정cover: 키기 비율 유지한 상태로 부모의 width,height중 큰값에 맞춤contain: 크기비율 유지한 상태에서 이미지스케일 조정하여 이미지가 전체가 들어갈수있도록 한다. 4.background-attachment배경화면이 스크롤 되지않고 고정되게 한다 5.background-positionbackground 이미지의 출력위치 지정 (기본값 좌상단 0% 0%) 6.background-color배경 색상지정 ..
