[CSS]WeCode

정현석·2020년 10월 21일
0

Position - fixed

 fixed는 말그대로 고정됐다는 뜻입니다.
 absolute는 relative를 가진 부모가 필요했는데,
 fixed는 필요없습니다.
 
> .coupon {
**  position: fixed;**
  right: 0;
  bottom: 0;
  background-color: red;
  color: white;
  font-size: 20px;
}

스크롤을 내려도 계속 고정
right:0; 은 브라우저의 오른쪽에서 0 떨어져있다, 브라우저 우측에 바짝 붙어있다.

Opacity: 00%  불투명도 설정

CSS 레이아웃

 신문의 레이아웃처럼 어떤 정보를 체이지의 어떤 영여거에 넣느냐의 문제
 CSS에서 정보 배치 단위에 사용하는 태그 <div> , 페이지의 구획을 정의할 목적으로 사용
 
 <div> 태그는 class나 id 를 부여하여 각각의 스타일 적용가능
 id 태그는 우선순위가 높아 다른 스타일 속성을 무시하여 적용
 

float

float 은 주로 이미지 주변에 텍스트를 감싸기 위해 만들어짐
또, 페이지 전체의 레이아울으 잡을 때 유용 !

참고자료) http://ko.learnlayout.com/float.html

float 속성에는 left, right, none 가운데 하나를 값으로 사용
하지만 float 속성을 가진 요소는 부모가 높이를 인지할 수 없어 부모를 벗어나는 경우가 많다.
이 문제를 해결하려면 clear 라는 속성이 필요
주로 많이 사용하는 방법은 바깥 div(.wecode-box)에 overflow: hidden; 을 주는 것

레이아웃 참고 사이트
http://ko.learnlayout.com/
https://poiemaweb.com/css3-layout
https://poiemaweb.com/css3-box-model

profile
기록하는 벨로그

0개의 댓글