반응형
navbar 안에 있는 모든 li 에 적용하고 싶다면... 스페이스바를 이용하면 됩니다.
| .navbar li { display : inline-block; } |
navbar 안에 직계 자식에게 적용하고 싶다면, > (꺾쇠괄호) 를 쓰면 됩니다.
| .navbar>li { display : inline-block; } |
a(링크) 태그에서 밑줄을 제거하고, 방문시 보라색으로 변경되는 것 제거하기
| <a href="#" class="link">링크</a> .link { text-decoration : none; } .link:visited { color : black; } |
css로 배경넣기
|
<body>
<div class="mainBack"></div>
</body>
.mainBack {
width: 100%;
height: 500px;
background-color: rgb(18, 128, 172);
background-image: url(/img/그림파일.jpg);
/* background-size: 100%; */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
filter: blur(2px);
}
|
1. background-image: url() 를 통해서 div안에 그림을 넣을 수 있습니다.
2. background-size: 100%; 로 가능합니다. 또는 px 단위도 사용이 가능합니다.
background-size: cover; 를 하면 꽉채워지고,
contain은 배경이 짤리지 않게 꽉채우는 것입니다.
3. background-repeat: no-repeat; 반복이 되지 않도록 하는 것
background-position: center; 그림이 중간에 위치하게 하는 것
background-attachment: fixed; >> 지금은 고정된것으로 함
다른 기능이 많습니다. 스크롤시 움직이게 하는 기능 있습니다.
4. filter: blur(2px); 블러 효과를 줄 수 있습니다.
블러 이외에도 다른 기능은 많습니다. 찾아보시기 바랍니다.
여기서 background-image: url(), url() 등으로 여러개를 넣을 수 있습니다.
png파일을 이용하면 효과가 좋습니다. 투명을 지원하기 때문입니다.
반응형
'프로그래밍 스터디( 공부노트 ) > HTML, CSS' 카테고리의 다른 글
| 브라우저 간의 통일된 스타일을 주는 css 설정, CSS normalize (0) | 2021.12.25 |
|---|---|
| css 좌표이동, position : relative, absolute, fixed (0) | 2021.12.20 |
| css - display : inline-block 사용하는 방법 정리하기 (0) | 2021.12.20 |
| css를 이용하여 그림자 그리고 레이아웃 만들기 (0) | 2021.12.20 |
| 많이 사용하는 css 속성을 정리합니다. (0) | 2021.12.19 |