Web/CSS

[CSS] 배경(background)

background : 요소의 배경을 설정. 단축속성 값 의미 기본값 background-color 배경 색상 transparent background-image 하나 이상의 배경 이미지 none background-repeat 배경 이미지의 반복 repeat background-position 배경 이미지의 위치 0 0 background-attachment 배경 이미지의 스크롤 여부(특성) scroll 사용법 background: 색상 이미지경로 반복 위치 스크롤특성; 특정 값을 누락해도 된다. background-color : 요소의 배경 색상 지정. 개별속성 속성 값 의미 기본값 색상 요소의 배경 색상 transparent 투명 transparent background-image : 요소의 배경에..

[CSS] 띄움(정렬), 위치

float : 요소를 좌우방향으로 띄움(수평 정렬) 레이아웃은 기본적으로 수직적으로 쌓이는데, 수평 레이아웃으로 변경할 때 사용. 최근엔 이거보단 flex box를 많이씀 속성 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 원하는 컨텐츠를 글과 함께 수평정렬하기위해 쓰이기도 하고,(해당 컨텐츠에 속성추가하면 됨) 원하는 각 요소마다 float을 적용하면 1. left : 맨 왼쪽부터 쌓인다 (1 2 3 ) 2. right : 맨 오른쪽부터 쌓인다 ( 3 2 1) *float 해제 : float을 적용한요소 외의 주변요소에는 float이 겹치므로, 주변요소에 float을 해제해줘야함 1. 다음 형제요소에 clear: (left,right,both) 추가..

[CSS] 속성 - 글꼴, 문자

font : 글자 관련 속성들을 지정. 단축 속성 값 의미 기본값 font-sytle 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 약 1) font-family 글꼴 지정 운영체제(브라우저)에 따라 달라짐 사용법 * 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함 font: 기울기 두께 크기 / 줄높이 글꼴; /* 크기와 줄높이는 슬래쉬로 구분! */ .box{ font: italic bold 20px / 1.5 "Arial", sans-serif; } font-sytle 의 개별속성 값 의미..

[CSS] 속성 - 박스 모델

width : 요소의 가로 너비 지정 height : 요소의 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm max-width : 요소의 최대 가로 너비 지정 max-height : 요소의 최대 세로 너비 지정 min-width : 요소의 최소 가로 너비 지정 min-height : 요소의 최소 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm none(max) / 0(min) margin : 요소의 외부(바깥) 여백 지정. 단축속성 margin-top 위쪽, margin-bottom 아래쪽, margin-left 왼쪽, margin-right 오른쪽 등의 개별속성이 있다. 위, 아래, 좌, 우의 모..

[CSS] 단위

px 해상도에 따른 상대단위. 고정 % 부모요소에 영향받음 예제 Container Parent Child1 Child2 body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width: 50%; } .child{ width: 50%; } em 자기자신의 font-size에 영향받음(정의 되지 않았을 때는 부모요소에 상속받음) ex)10px => width=60em (10*60=600px) rem root-em. 상속을 다 건너뛰고 root(html요소) 조상의 font-size를 상속받아서 적용 em 예제 rem 예제 html{ font-size: 10px; } body{ font-size: 16px; /* rem단위에 영향안주면서 전체 폰..

[CSS] 실습 환경 setting

1. CSS Reset 기본적으로 브라우저에서 제공하는 스타일은 표준화 된 것이 아니므로 초기화해서 사용해야한다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub A free, fast, and reliable Open Source CDN for npm and GitHub with the largest network and best performance, perfectly suited for production use. www.jsdelivr.com html 문서의 header에 다음 추가 2. Codepen 사이트 https://codep..

[CSS] 상속과 우선순위

조상요소에 스타일을 지정하면 하위요소에도 적용된다. 상속 되는 속성들(properties) font font-size fonet-weight font-style line-height font-family color text=align text-indent text-decoration letter-spacing opacity 강제 상속 : inherit 값 사용하여 부모→자식으로 강제 상속(후손 적용X) *모든 속성이 강제 상속을 사용할 수 있는 건 아님 .class { position: inherit; /*강제 상속*/ } 우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS속성(property)을 우선 적용할지의 순위 1. 명시도 점수 큰 순서 인라인(HTML style 속성 사..