개발이 좋아서/CSS가 좋아서
css - 반응형_media
media 쿼리 @media all and (min-width:320px) and (max-width:768px) { 스타일 작성 } all - 디바이스 종류 and - 0~768px - mobile 769px~1024px - tablet 1025px~ - pc
css - animation
css 애니메이션 @keyframes 이름 { from { width: 100px; } to { width:100px; } } div { animation-name: 이름; animation-duration: 1s; }
scss 사용법
1) scss (중첩구문) 2) scss 상위 선택자 참조 - & 3) 변수(Variables) - 반복적으로 사용되는 값을 변수로 지정 변수 이름 앞에 항상 $ 를 붙입니다. $변수이름: 속성값; *변수 유효범의 (Scope) 변수는 사용가능한 유효범위가 있습니다. 선언된 브록({})내에서만 유효범위를 가집니다. *전역설정 !global !global플래그를 사용하면 변수의 유효범위를 전역(Global)로 설정할 수 있습니다. 4) 재활용(Mixins) 스타일시트 전체에서 재사용할 css선언 그룹을 정의해줌 1) 선언하기(@mixin) @mixin 믹스인이름 { 스타일; } @mixin 믹스인이름($매개변수) { 스타일; } 2) 사용(포함)하기(@include) @include 믹스인이름; @incl..
css - 변수 선언 및 사용법
css변수 /* 변수 선언 */ :root { --main-bg-color: red; --big-font: 24px; --middle-font: 18px; --small-font: 14px; } /* 변수 사용법 */ div { background: var(--main-bg-color); font-size: var(--big-font); }
css - flex
※flex-box 레이아웃 container에게 주는 속성 1. display : flex; 2. flex-direction : 배치방향을 지정 속성값 - row(default) / column / row-reverse / column-reverse 3. flex-wrap : 아이템을 한줄로만 배치할건지 여러줄로 배치할건지 지정 속성값 - wrap / no-wrap(default) / wrap-reverse 4. flex-flow(속기법): column no-wrap 5. justify-content : 주축방향 아이템 정렬을 지정 속성값 - flex-start / flex-end / center / space-around / space-between / space-evenly 6. align-items..
css - center로 보내기
position을 이용해 요소의 중앙에 배치하기 1) top: 50% / left: 50% / transform: translate (-50%, -50%) 2) top: 50% / left: 50% / margin-left:-(width절반)px; / margin-top:-(width절반)px; 3) calc()함수를 사용 calc(50% - 100px) ※position 지정 후 left: 50%; /* center로 보내기!! */ top: 50%; /* center로 보내기!! */ transform: translate(-50%,-50%); /* center로 보내기!! */
css - before, after
의사 요소 ::before(:before) - 선택한 요소의 첫 자식으로 요소를 하나 생성합니다. - 기본값은 인라인입니다. - content 속성과 함께 사용하며 장식용 콘텐츠를 추가할 때 사용합니다. div::before { content: "그린"; } before 컴퓨터 after ::after(:after)
css - display, float
1) display : display: inline-block; 지정하고 요소의 부모요소에 font-size: 0 지정 2) float : 요소가 왼쪽, 오른쪽으로 떠있도록 지정 속성값: left/ right clear : 요소의 왼쪽, 오른쪽에 부동 요소를 허용하지 않도록 지정 속성값: left/ right/ both ※float을 쓸 때는 clear를 같이 써준다! ※float으로 띄우고 난 뒤 남은 공간 clear 해주기!! 3) flexbox 4) gridbox *심화* text-align : 인라인 요소들의 정렬 left/ right/ center margin: 0 auto : 블럭 요소들의 정렬 (witdh가 있어야 함) display : block/ inline/ inline-block/ n..
css - background
css배경 - 배경에 효과를 주는데 사용되는 속성들 1) background-color : 요소의 배경색을 지정 red/ #000000/ rgb(r, g, b)/ rgba(r, b, g, a) 2) background-image : 요소의 배경에 이미지를 지정 ex) bacground-image:url("dog.jpg") 3) background-repeat : 배경 이미지를 가로 및 세로 반복을 지정 no-repeat/ repeat-x/ repeat-y 4) background-position : 배경 이미지의 시작 위치를 지정 top center bottom left center right ex) div { background-position: right bottom; } 5) background-a..