본문 바로가기
728x90
반응형

CSS127

[CSS3] 이용해서 대소문자 변경하기 text-transform lowercase: 소문자로 변경 uppercase : 대문자로 변경 capitalize : 단어의 앞글자 자동으로 대문자로변경(나머지는 그대로) 2019. 4. 25.
[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.
728x90
반응형