UI/UX 환경분석 '샐러픽' 사이트의 UI/UX 환경분석 입니다. 공동작업자 : doye's study, JW's study

'달달해' 사이트 사용자 리서치 수행 '달달해' 사이트의 사용자 리서치를 수행하였습니다. 공동작업자 : doye's study, JW's study

Background Property Sample Description background background: #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image: url(이미지 경로) 배경 이미지 설정 background-repeat background-repeat: no-repeat 배경 이미지 반복 여부 설정 background-attachment background-attachment: fixed 배경 고정 여부 설정 background-color background-color: #fff 배경색 설정 background-position background-position: top 배경 이미..

Background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를/ 통해 색상을 ..

border-radius border-radius : [border-top-left-radius] [border-top-right-radius] [border-bottom-right-radius] [border-bottom-left-radius] border-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .border01 { border-radius: 0; } .border02 { border-radius: 5px; } .border03 { border-radius: 10px; } .border04 { border-radius: 15px; } .border05 { border-r..

box-shadow box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; 속성 설명 h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림 정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 { box-shadow: 0px 0px 5px rgba(0, 0, ..