본문 바로가기

전체 글49

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.
CSS-display, visibility, opacity 속성 1. display : 요소의 성격을 바꿔주는 속성. layout 정의에 자주 사용. 속성 값 설명 block inline 요소의 성격 → block 요소로 변경 ▶ 줄바꿈 X inline block 요소의 성격 → inline 요소로 변경 ▶ 줄바꿈 O inline-block inline 요소의 성격 → inline-block 요소로 변경 ▶ 줄바꿈 X block요소만 사용할 수 있는 text-align 등의 속성을 사용할 수 있다. none 해당 요소를 화면에 표시하지 않는다. (공간도 사라짐) * 블록 레벨 요소 / 인라인 요소 참고 : https://hrin-0820.tistory.com/15 HTML5 블록 레벨 요소 / 인라인 요소 블록 레벨 요소 (Block-level) 인라인 요소(Inli.. 2020. 8. 13.
CSS-문단(paragraph) 관련 스타일 1. text- align : 문단 정렬. 블록 요소에만 적용되는 속성 속성 값 설명 left 왼쪽 정렬 center 가운데 정렬 right 오른쪽 정렬 justify 양쪽 정렬 2. vertical-align : 이미지나 폼 요소 정렬. img, input, select, label, 테이블의 tr, td 등에 사용 속성 값 설명 top 위쪽 정렬 middle 세로 중앙 정렬 bottom 아래쪽 정렬 3. text-indent : 문자의 첫머리를 들여쓰기 해주는 속성. 블록요소에만 적용. 왼쪽으로! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint architecto, eveniet dolorem quos perspiciatis optio .. 2020. 8. 12.