본문 바로가기

분류 전체보기49

CSS-BOX MODEL 2 (box-sizing, box-shadow) 1. box-sizing 속성 값 설명 box-sizing: content-box; 요소의 전체 크기에 padding, border 값 포함 (기본값) box-sizing: border-box; 요소의 전체 크기에 padding, border 값 미포함 box-sizing: content-box box-sizing : border-box content-box content-box content-box content-box border-box border-box border-box/li> border-box box-sizing: content-box box-sizing : border-box content-box content-box content-box content-box border-box borde.. 2020. 8. 20.
CSS-BOX MODEL (width, height, padding, margin, border) 이 BOX는 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 구성된다. 브라우저는 박스 모델의 크기와 속성, 위치를 근거로 하여 렌더링을 실행한다. 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고 CSS를 통해 스타일(배경, 폰트 등)과 위치 및 정렬을 지정하는 것이라고 할 수 있다. 1. width, height : 가로 크기, 세로 크기 전체 너비 width + left padding + right padding + left border + right border + left margin + right margin 전체 높이 height + top padding + bottom padding + top border .. 2020. 8. 18.
CSS-배경(background)2 1. background-origin : 배경 이미지의 시작점 지정 속성 값 설명 border-box 배경 이미지가 테두리의 좌측 상단 모퉁이에서 시작 padding-box 배경 이미지가 안여백의 좌측 상단 모퉁이에서 시작 (기본값) content-box 배경 이미지가 콘텐츠의 좌측 상단부터 시작 background-origin: border-box background-origin: padding-box background-origin: content-box 2. background-clip : 배경의 영역을 지정 속성 값 설명 border-box 배경이 테두리를 포함한 영역에 배치 (기본값) padding-box 배경이 테두리를 제외한 안쪽 영역에 배치 content-box 배경이 안여백을 제외한 콘텐.. 2020. 8. 17.
CSS-배경(background) 1. background-color : 배경 색상 지정 background-color: #abcdef; 속성 값 설명 색상값 색상명, RGB값, RGBA값, HEX값, HSL값, HSLA값 transparent 투명 (기본값) 2. background-image : 배경 이미지 지정 background-image: url(img/baimg.png); 속성 값 설명 url(~) 이미지의 경로와 파일명을 기술 none 배경 이미지 없음 (기본값) 3.background-repeat : 배경 이미지의 반복 지정 background-repeat: no-repeat; 속성 값 설명 repeat 배경 이미지를 가로 세로로 반복하여 배치함 (기본값) no-repeat 배경 이미지를 한 개만 배치함 (반복 없음) re.. 2020. 8. 16.

티스토리툴바