[새싹 프론트엔드] 22.10.20

* 배경속성

background-image를 이용할 때는 url을 붙인다

2개를 동시에 불러올 수도 있다

 

이렇게 다른 2개의 그림이 합쳐진다

여기서 background-size: 100% 은 이미지의 너비를 의미한다

그림을 100% 다 보여주는 것이다

 

background-size: 250px은 이미지의 높이를 의미한다

그럼 이렇게 100% 다 보이고 이미지의 높이는 250px인 화면이 나온다

하지만 이렇게 화면이 중복되고 있는 것을 볼 수 있다

이때 필요한 속성에 대해 알아보자

background-repeat 이라는 것이다

말그대로 repeat는 이미지를 반복한다는 것이고

no-repeat는 이미지 반복을 하지 않는다

-x는 가로축으로 이미지가 반복되는 것이고

-y는 세로축으로 이미지가 반복되는 것이다

 

 

background-attachment: fixed 로 하면 스크롤을 내려도 배경화면이 움직이지않고 고정된다

background-attachment: scroll 이건 그냥 평상시 화면처럼 스크롤 내리면 배경화면이 안보인다

 

배경사진을 위 아래 좌우로 보내버리는 속성이다

이렇게 한번에 background를 이용해서 다 정할 수도 있지만

지금의 나에겐 어려운 설정이다 그냥 있다는 것만 참고하자

순서도 있다

---

* 박스 속성 ( 좀 어려움 )

기본적인 박스의 속성이다

다양한 속성 값이 있다

padding은 풍선에 바람을 부는 느낌의 확장이고

border은 얼굴에 선크림을 바르는 느낌의 확장이다

margin은 아싸가 인싸를 피하듯 거리를 벌리는 느낌이다

 

이렇게 온순했던 사각형을

이렇게 튜닝 시킬 수 있다

border를 이용해서 검정색 테이프로 둘둘 말아버렸다

---

* 테투리 속성

border-radius 는 자주 쓰이니까 알아두는게 좋다 

끝부분을 둥글게 만들어줘서 편안해짐

 

border-style 중에는 dotted라고 있는데 이건 (...) 이런 점 도트로 둘러싸는 것이다

이렇게 된다

개인적으로 별로 안이쁜듯

---

* Display 속성 ( 좀 어려움 )

블록 형식을 인라인으로 

인라인을 블록형식으로 바꿔주는 속성인데

이 중 inline-block이 중요하다

단점은 빼고 장점만 챙긴 제로코크같은 속성이다

---

* visibility 속성

이렇게 사용하는거라고 한다

대부분 '三'자로 생긴 메뉴같은걸 만들 때 사용된다고 한다

---

* box-shadow 속성

 

박스에 그림자 효과를 적용시킨다

box-shadow: 0 0 10px 1 red;

이런 식으로 쓰인다 위처럼 입력하면

이렇게 이쁘게 그림자가 진다 

앞에 0 0 에 숫자를 넣으면 아래와 오른쪽에 찐한 색의 그림자가 생긴다

5px 5px 씩 줘봤는데 더 안이뻐졌다

이럼 앞으론 그냥 0 0 줄거임

 

예제를 이용한 결과이다

---

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅