![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/k5L3j/btsGTfoQpJh/sKHKQPKNo89KDuyhwyLT51/img.png)
✏️ 웹 요소에 배경 이미지를 넣는 background-image 속성background-image : url(이미지 경로)// 이미지 파일은 .jpg, .png, .gif 형식을 사용하며 파일 경로에는 따옴표를 붙임// 파일 경로에는 상대 경로, 절대 경로 둘다 가능 ✏️ 배경 이미지의 반복 방법을 지정하는 backround-repeat 속성종류설명repeat브라우저 화면에 가득 찰 때까지 가로와 세로로 반복, 기본값repeat-x브라우저 화면 너비에 가득 찰 때가지 가로로 반복repeat-y브라우저 화면 높이에 가득 찰 때가지 가로로 반복no-repeat한 번만 표시하고 반복하지 않음✏️ 배경 이미지의 위치를 조절하는 background-position 속성방법설명크기 배경 이미지의 위치를 길이로..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/Zx1aU/btsGVsULOjo/DjpnZOenkkp4ZTAgPvBPsk/img.png)
✏️ 배경색을 지정하는 background-color 속성배경색을 지정하려면 배경을 넣고 싶은 요소의 스타일 규칙을 만들 때 background-color 속성을 이용rgb값을 이용하거나 16진수값 등을 이용할 수 있고 속성값은 상속되지 않음 기본적으로 모든 웹 요소의 배경은 투명하기 때문에 body 스타일로 지정한 문서 배경이 비치는 것일 뿐임background-color : #000000;background -color : rgb(0,128,0); background-color : green; ✏️ 배경색의 적용 범위를 조절하는 background-clip 속성배경색을 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 적용할지 등을 지정종류설명border-box박스 모델의 가장 외곽인 테두..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bJ24JA/btsGTaUrGxW/NUaoXQPQ5oyCHqYMIAo7Kk/img.png)
✏️ 박스 모델 속성종류설명width 박스 모델의 너비를 지정height박스 모델의 높이를 지정box-sizing 박스 모델의 크기를 계산하는 기준을 지정box-shadow박스 모델에 그림자 효과를 추가✏️ 테두리 속성속성설명border-style상하좌우 4개 방향의 테두리 스타일을 한꺼번에 지정border-위치-style상하좌우 중 특정한 위치의 테두리 스타일만 지정border-width상하좌우 4개 방향의 테두리 두께 한꺼번에 지정border-위치-width상하좌우 중 특정한 위치의 테두리 두께만 지정border-color상하좌우 4개 방향의 테두리 색상을 한꺼번에 지정border-위치-color상하좌우 중 특정한 위치의 테두리 색상만 지정border-radius상하좌우 4개 방향 꼭짓점을..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/MIsI6/btsGQPqN6va/1pj6JX8iEJzSNqfW19XPr1/img.png)
✏️ 웹 요소의 위치를 정하는 left, right, top, bottom 속성position 속성보다 먼저 알아 두어야 할 속성들이라고 할 수 있고, position 속성으로 기준 위치를 정한 뒤 요소의 위치를left, right, top, bottom 속성을 이용하여 지정하기종류설명left기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정right기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정top기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정bottom기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정✏️ 배치 방법을 지정하는 position 속성종류설명static문서의 흐름에 맞게 배치, 기본값relative위칫값을 지정할 수 있다는 것을 빼면 sta..
- Total
- Today
- Yesterday
- C++ Stack
- js
- 알고리즘 공부
- 우선순위 큐
- 백준
- 자료구조
- 투 포인터
- 유니온 파인드
- 반복문
- 카운팅 정렬
- 자바스크립트
- 에라토스테네스의 체
- java
- 최단 경로
- 스택
- DFS
- 알고리즘
- C++
- c++ string
- 자바
- 백준 풀이
- DP
- CSS
- 세그먼트 트리
- 이분 매칭
- HTML5
- 유클리드 호제법
- BFS
- Do it!
- html
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |