본문 바로가기

::public/HTML & CSS(SCSS)40

CSS - 속성(배경) background ; 요소의 배경을 설정. background-color ; 요소의 배경 색상을 지정. background-image ; 요소의 배경에 하나 이상의 이미지를 삽입. background-repeat ; 배경 이미지의 반복을 설정. background-position ; 배경 이미지의 위치를 설정. background-attachment ; 요소가 스크롤될 때 배경 이미지의 스크롤 여부(특성) 설정. scroll : 배경 이미지가 요소를 따라서 같이 스크롤 됨. fixed : 배경 이미지가 뷰포트(Viewport)에 고정되어, 요소와 같이 스크롤되지 않음. local : 요소 내 스크롤 시 배경 이미지가 같이 스크롤 됨. background-size ; 배경 이미지의 크기를 지정. auto.. 2021. 4. 8.
CSS - 속성(띄움(정렬), 위치) float ; 요소를 좌우 방향으로 띄움(수평 정렬) none : 요소 띄움 없음. left : 왼쪽으로 띄움. right : 오른쪽으로 띄움. **float 해제 방법 1. float 속성의 형제 요소에 clear: (left, right, both) 추가하여 해제. 2. float 속성이 추가된 요소의 부모요소에 overflow 속성 추가. 3. float 속성이 추가된 요소의 부모요소에 미리 지정된 clearfix 클래스 추가.(추천!!!!) float - display 수정 ; float 속성이 추가된 요소는 display 속성의 값이 "대부분" block 으로 수정됨. *flex, inline-flex 제외. clear ; float 속성이 적용되지 않도록 지정(해제). *clear: none,.. 2021. 4. 7.
CSS - 속성(글꼴, 문자) font ; 글자 관련 속성들을 지정. font-style : 글자 기울기 지정. font-weight : 글자 두께 지정. font-size : 글자 크기 지정. mediun(16px) line-height : 줄 높이(줄 간격) 기정. normal(Reset.css 적용시 1) font-family : 글꼴(서체) 지정. 운영체제(브라우저)에 따라 달라짐. font: 기울기 두께 크기 / 줄높이 글꼴; .box { font: italic bold 20px / 1.5 "Arial", sans-serif } .box { font: 30px / 1.5; /* Error */ font: bold; /* Error */ font: bold sans-serif; /* Error */ font: 30px / 1... 2021. 4. 7.
CSS - 속성(박스 모델) width ; 요소의 가로 너비를 지정. *auto=브라우저가 너비를 계산, 단위=px, em, cm 등 height ; 요소의 세로 너비를 지정. *auto=브라우저가 너비를 계산, 단위=px, em, cm 등 max-width ; 요소의 최대 가로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산. min-widh ; 요소의 최소 가로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산. max-height ; 요소의 최대 세로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산. min-height ; 요소의 최소 세로 너비를 지정. *단위=px, em, % 등, auto=브라우저가 너비를 계산. - margin, marg.. 2021. 4. 6.
CSS - 단위 - px, % - - em ; 자신(혹은 부모에게 상속받은) 요소의 font-size 의 영향을 받음. *font-size: 10px 일 경우 2em 은 20px. rem ; 최상위 부모 요소인 html 태그의 font-size 영향을 받음. *html태그의 font-size 를 설정하지 않을 경우 브라우저의 기본 폰트 크기가 기준. - vw, vh ; viewport width, height 값. vmin, vmax ; viewport 의 width 와 height 를 비교해서 작은 값은 vmin, 큰 값은 vmax. 2021. 4. 2.
CSS - 우선순위 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS 속성(property)을 우선 적용할지 결정하는 방법. 1. 명시도 점수가 높은 선언이 우선(명시도) 2. 점수가 같은 경우, 가장 마지막에 해석(늦게 작성)되는 성언이 우선(선언 순서) 3. 명시도는 '상속' 규칙보다 우선(중요도) 4. !important 가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) 1, 가장 중요(!important) ; 모든 선언을 무시하고 가장 우선. div { color: red !important; /* 가장 우선 */ } Colored by Color Scripter cs 2. 인라인 선언 방식(Style Attribute) ; 인라인 선언(HTML style 속성을 사용) inline style c.. 2021. 4. 1.