HTML&CSS20 CSS: position (fixed, absolute, relative, static) css에서는 영역의 위치를 지정해주고 싶을때, position을 이용할 수 있다. static : 기본 absolute : 위치 지정 가능 relative : absolute의 기준 fixed : 고정 absolute를 이용해서 위치를 정하고 싶다면, 이렇게 할 수 있다. .box { position: relative; /* absolute의 기준 */ } .box div{ position: absolute; left: 0; /* 왼쪽으로부터 0px */ bottom: 0; /* 아래로부터 0px */ } absolute의 특징 1. 기본으로 display: inline-block이 된다. 2. 높이가 사라지기 때문에 붕 뜬다. 3. 기준인 relative가 없다면, absolute가 아닌 것을 기준으로.. 2020. 6. 17. CSS: calc 함수 calc함수를 이용하면, 인터렉티브하게 글자크기나, 배경위치 등을 좀 더 유연하게 이용할 수 있다. width를 본다면 이렇게 작성할 수 있는데, width: calc(100% - 300px); 기본적으로 100%를 갖지만 - 또는 +로 창의 크기에따라 유연하게 변한다. html에 box를 하나 만들고, calc함수를 이용하여 이렇게 작성할 수 있다. .box { position: absolute; /* 위치조정 */ left: 50%; /* 위치조정 */ transform: translateX(-50%); /* 위치조정 */ margin: 20px 0; width: calc(100% - 300px); /* calc함수 이용 */ border: 2px solid black; background-color.. 2020. 6. 12. CSS: Grid 기본속성 (수정중) grid는 flex처럼, 유연하게 이용할 수 있는 구조이다. 이러한 속성들이 있는데, 2020. 6. 8. CSS: Flex 기본속성 flex는 유연한 화면을 만들 때 이용할 수 있다. 적용시에는 어디에 적용하느냐에 따라 적용되는 곳이 달라진다. 적용하고싶은 아이들의 부모에 display:flex를 주어야한다. 속성은 이것보다 많지만, 대략 이정도 사용한다고 보면된다. grow, shrink, basis는 줄여서 쓸 수 있다. .box { flex: 1 0 auto; /* grow shrink basis */ } 2020. 6. 6. 이전 1 2 3 4 5 다음
