css13 Background Background ▶ 배경과 관련된 속성들이다. ▶ background-color => 배경의 색상을 정할 때 사용한다. hex, rgb, rgba를 사용할 수 있다. ▶ background-image => 배경으로 이미지를 넣고 싶을 때 사용한다. url('이미지 경로')을 반드시 사용해야 한다. ▶ background-repeat: repeat; => 기본값이며 반복적으로 이미지 출력한다. ▶ background-repeat: no-repeat; = > 하나의 이미지만 출력한다. ▶ background-size: contain; => 전체 이미지가 잘리지 않고 박스 안에 모두 들어가게끔 해준다. ▶ background-size: cover; => 전체 이미지를 잘라서라도 박스에 이미지를 꽉 채워 넣.. 2022. 5. 26. Webfont Webfont ▶ 사용자에게 보이는 글씨체를 설정할 때 사용한다. ▶ 사용자에게 내가 사용한 폰트가 없다면 사용자에게는 기본 폰트(맑은 고딕)가 적용되게 된다. ▶ 웹폰트를 사용하는 방법은 2가지이다.(가져다가 사용한다.) ▶ 웹폰트를 사용하는 방법은 2가지이다.(직접 제공한다.) 2022. 5. 25. Box-Sizing box-sizing ▶ 박스의 크기(width, height) 설정 시, 기준이 되는 박스를 설정할 때 사용한다. ▶ 코딩 전에 반드시 box-sizing을 border-box로 바꾸고 시작하자. ▶ 모든 요소는 기본적으로 content를 기준으로 사이즈를 정하게 설정되어있다. (box-sizing: content;) ▶ 테두리(border)와 박스(content) 사이의 공간(padding)이 있다는 것은 부자연스럽다. ▶ 대부분의 개발자들은 전체 박스의 기준을 border로 바꾼 후 코딩을 시작한다. (box-sizing: border-box;) 2022. 5. 20. 속기형 속기형(chorthan) ▶ top, right, bottm, left 값을 따로 설정하면 번거롭기 때문에 사용한다. ▶ padding, border, margin 모두 사용 가능하다. ▶ 시계방향 순서로 값을 설정한다고 생각하면 된다. ▶ margin: top right bottm left; ▶ margin: top right ; => 값을 2개만 입력하면 bottm은 top, left는 right값과 동일하게 설정된다. ▶ margin: top right bottom; => 값을 3개만 입력하면 left는 right값과 동일하게 설정된다. 2022. 5. 20. 이전 1 2 3 4 다음
