cording9 [HTML / CSS] 배경이미지 삽입 1. Background-Repeat (배경이미지 반복) background-repeat 속성 값 설정으로 배경이미지 반복 여부 및 방법 결정 /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repe.. 2019. 12. 26. [HTML / CSS] Box Decorations 1. Border-Radius (둥근 모서리) boder-radius 속성 값으로 설정 radius 속성 값 크기에 비례해서 둥그러짐 radius 속성 값 상하좌우 각각 다르게 설정 가능함 2. Background-Color (배경색) background-color 속성 값으로 설정 배경색을 지정해 줌 배경색을 투명하게 둠(기본값) 3. Box-Shadow (그림자) box-shadow 속성 값으로 설정 (기본값은 none) 그림자 가로 세로 위치만 설정해주면 그림자 생성 그림자 색 설정 (기본값: black) 그림자 흐림(blur): 가로 세로 위치 뒤에 값 추가 그림자 흐림 크기(spread): blur 값 뒤에 값 추가 4. Box-sizing padding과 border 값을 설정하더라도 widt.. 2019. 12. 26. [HTML / CSS] BOX MODEL 1. Box Model 구성 Content : 실제 내용 Padding : 내용과 테두리 사이의 여유공간 Border : 테두리 Margin : 현재 요소와 다른 요소 사이의 여백 2. Margin padding의 상하좌우 각각 다른 넓이를 설정합니다. padding의 상하좌우 각각 다른 넓이를 한 번에 설정합니다. padding의 상하좌우 같은 넓이를 설정합니다. padding의 상하와 좌우만 다른 넓이를 설정합니다. 3. Padding margin 상하좌우 각각 다른 넓이를 설정합니다. margin 상하좌우 각각 다른 넓이를 한 번에 설정합니다. margin 상하좌우 같은 넓이를 설정합니다. margin 상하와 좌우만 다른 넓이를 설정합니다. 가운데 정렬 합니다. 4. Content - width, .. 2019. 12. 24. [HTML / CSS] CSS 텍스트 속성 1. 폰트 굵기 설정 "font-weigh"t 속성을 사용 100~900까지 값 설정 가능 (100이 가장 얇음) 100단위 값만 설정 가능 (120, 450 등은 사용 시 기본값으로 설정됨) 값 "nomal"은 "400" 과 같음 값 "bold"는 "700"과 같음 굵기가 400인 폰트 굵기가 700인 폰트 normal은 400과 굵기가 같다. bold는 700과 굵기가 같다. 2. 텍스트 정렬 "text-align" 속성 사용 왼쪽 정렬 오른쪽 정렬 가운데 정렬 3. 텍스트 꾸미기 "text-decoration" 속성 사용 주로 "" 태그(링크)의 밑줄 없앨 때 많이 사용 텍스트에 밑줄 긋기 텍스트에 윗줄 긋기 텍스트에 취소선 긋기 텍스트에 아무런 효과도 주지 않기 4. 폰트 크기 / 줄간격 설정 폰.. 2019. 12. 23. 이전 1 2 3 다음
