본문 바로가기

css4

background-color 배경 없애기 & 부모요소 상속 반응형홈페이지 작업할때 pc에서는 배경을 넣고 모바일에서는 배경을 넣고 싶지 않을때 모바일에서 색상을 지정하지 않고 싶을때 transparent 를 써줍니다. background-color:transparent; 부모요소 속성값 상속받기 background-color:inherit; 2021. 10. 21.
텍스트 이미지 중앙정렬 padding: 4em calc(50% - 250px); 유동배경에 고정콘텐츠 즉 홈페이지에서 요즘 트렌드에 제일 많이 쓰이는 css인것같다 움직이는 배경에 텍스트 또는 이미지 중앙정렬이다. html 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 텍스트 중앙정렬 css .bg { background: #fdf965; padding: 4em calc.. 2021. 5. 16.
웹디자인 다중경계선 여러개 선이 겹친 형태 css box-shadow 이용 box-shadow 로 적용 box-shadow의 장점은 콤마구분으로 경계선을 원하는 만큼 아주 쉽게 여러개 만들 수 있다. .class { width:200px; height:200px; margin :0 auto; margin-top:40px; background:yellowgreen; box-shadow:0 0 0 20px #655, 0 0 0 35px deeppink; } 경계선css 만 따로 뽑아서 보자면 .class { background:yellowgreen; box-shadow:0 0 0 20px #655, 0 0 0 35px deeppink; } 경계선 한개를 추가 한다음 다음 한개를 더 추가할때 사이즈는 첫번째 경계선이 20px이면 그 다음 경계선을 15px 추가 하고 싶으면 첫번째 경.. 2021. 5. 15.
웹디자인 반투명 경계선 border hals 적용 css, 흰색배경에 반투명 경계선 문제 빨간색 배경에 흰색 경계선 스타일이라고 해보자. border:10px solid hsla(0,0%,100%,.5); background:white; hsla 경계선을 만들어준다 했는데 경계선으로 나오지 않는다 적용이 되지 않은건 아니고 배경이 경계선 영역 아래로 확장된 것이다. 흰색배경에 반투명 경계선이면 아예 적용이 안된 것처럼 보일것이다. 그래서 이렇게 적용해준다. border:10px solid hsla(0,0%,100%,.5); background:white; background-clip:padding-box; 패딩 padding 모서리에서 배경을 자라내도록 하는 것으로 배경이 경계선 아래로 확장되는것이 싫을때도 이렇게 적용하면 된다. background-clip:padding-box; borde.. 2021. 5. 12.