내일배움캠프 2일차

CSS에서 body에 색상 설정과 이미지 넣기.

오늘 미니 프로젝트인 팀소개 페이지 중 개인 페이지를 만들다가 엡페이지를 예쁘게 뀌며보고 싶어서 찾던 중 웹개발 종합반의 '화성땅 사기'에서 웹페이지의 컬러와 이미지가 떠올라 나의 페이지에 적용해보기로 결정했다.
해당내용은 내가 배워 본 적이 없는 것이지만 입력코드가 직관적으로 되어있어 이해하고 적용하기 쉬웠지만 background-image, rgba는 모르는 용어이므로 구글링으로 의미와 사용법을 찾아 보았다.
코드는 아래와 같다.

 <style>
        body {
            background-image: linear-gradient(0deg,
                    rgba(143, 218, 232, 0.496),
                    rgba(255, 127, 202, 0.89)),
                url("https://이미지 url주소");
            background-position: center;
            background-size: cover;
         }

style에서 body를 입력하고 뀌미면 된다. (이때 body앞에 . 을 녛었을 경우 웹페이지에 적용이 되지 않으므로 절대로 . 을 넣지 않도록 주의해야한다.(어떻게 알았는지는 시도해보면 알게된다.) 이렇게 헤드태그에 스타일태그에서 css를 적용하는 것을 "내부 스타일 시트(Internal style sheet)"라고 한다. 단 해당 HTML문서에만 적용할 수 있다.

linear-gradient

linear-gradient는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다.그리고 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다고한다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없다.
사용법은 linear-gradient(방향 또는 각도, 색상과 정지점1, 색상과 정지점2,.......,색상과 정지점n)을 입력하면 된다 ****

방향 또는 각도의 값

to top : 180deg

to right : 90deg

to bottom : 0deg

to left : 270deg

이다.

색상을 생략하면 그라디언트로써의 의미가 없기때문에 꼭 써주어야 하나, 정지점은 생략 가능하다. 정지점 생략 시에는 알아서 색상들끼리 공평하게 그라이언트가 생성된다고한다.

rgba

RGBA 색상값은 RGB 색상값에 알파 채널 값을 더한 색상값이다.

알파 채널(alpha channel)이란 색상의 투명도를 나타내는 채널인데
알파 채널 값은 완전한 투명 상태인 0.0부터 투명도가 전혀 없는 1.0 사이의 값을 사용한다.

오늘 사용할 때에는 원하는 색상을 찾느라고 직접 색상을 고르고 알파채널도 직접 마우스로 조작하여 값을 뽑아내었다.

오늘 생각지도 못한 새로은 css를 배우게 되어 즐거웠다. 캠프를 진행하는 내내 즐거웠으면 좋겠다는 생각을 했다.