728x90 반응형 CSS/CSS 기초62 [CSS3] 변수사용하기 (less,sass없이) CSS의 변수는 범위를 정의하는 CSS 선택자 안에서 선언합니다. 전역변수의 경우 :root{}를 이용해 선언할 수 있습니다. 변수 이름은 두 개의 대시 (-)로 시작해야하며 대소 문자를 구분합니다! See the Pen EJdbWp by gahyun (@gahyun) on CodePen. 지정된 범위 내에서만 사용 가능합니다. :root 나 html, body 등과 같이 본문 선택자를 이용해 선언하면 본문 전체에서 사용가능하나, div나 특정 영역 선택자를 이용해 선언한다면 특정 영역 내에서만 사용가능합니다. 편리하게 사용할 수는 있지만 아직 지원되지않는 브라우저가 많아서 실제로 사용하기에는 무리가 있어보인다..... 2019. 4. 24. [CSS3] 레이아웃 grid 이용하기 grid 로 설정하면 아래와 같은 결과가 나옵니다. grid-template-columns 를 이용해 grid의 column들의 넓이를 조정할수 있습니다. grid-auto-columns/ grid-template-columns 칼럼의 넓이 grid-template-rows/grid-auto-rows 행의 높이 grid-template-columns: 200px 200px; // grid-template-columns: 200px 100px; // grid-template-columns: 200px 100px 100px; 각각의 그리드 안의 column이 어떻게 배치할지 지정해줍니다. .item1{ // grid-column-start: 1; //1번라인에서 시작해서 grid-column-end: 4; .. 2019. 4. 22. [CSS3] 레이아웃 flex 이용하기 flex 기본설정 display: flex 를 하면 그 안에 있는 아이템들은 flot:left 또는 display:inline-block; 과 같은 형태가된다. flex의 기본 정렬은 수평축으로 정렬되지만 flex-direction 을 통해 수직정렬로 변경 할 수 있습니다. flex-direction:column; // flex-direction:column-reverse; flex-direction:row;(기본) // flex-direction:row-reverse; 기본으로 왼쪽에 붙어 정렬되지만 justify-content를 통해 다양하게 정렬가능합니다. justify-content:flex-start (기본) // justify-content:center // justify-content:fle.. 2019. 4. 22. [CSS3] background - 배경이미지가 고정되거나 스크롤과 같이 움직이도록 만들기 background-attachment 를 이용해 배경화면이 스크롤에따라 어떻게 반응할 것인지 지정합니다. background-attachment:scroll; 배경이 들어가는 영역의 컨텐츠를 스크롤하면 배경이미지는 움직이지 않습니다. 상위영역이 스크롤이 되어 영역이 움직이더라도 배경이미지는 그대로 입니다. background-attachment:fixed; 배경이 들어가는 영역의 컨텐츠가 스크롤 되더라도 배경이미지는 고정되어있습니다. 상위영역이 스크롤되어 영역이 움직이면 해당위치의 이미지가 들어납니다. scroll값과 다른점은 scroll값은 배경이 들어가는 영역에 고정되어있지만 fixed는 이미지 자체가 고정됩니다. 영역이 스크롤 되어 위쪽으로 밀리면 배경이미지는 그대로고 영역만 움직이기 때문에 보여.. 2019. 4. 19. 이전 1 ··· 9 10 11 12 13 14 15 16 다음 728x90 반응형
