사람은 역시 같은 실수를 반복한다던데.. 맞는말이다!ㅋㅋㅋㅋ
분명 HTML과 CSS 공부를 했었는데.. 또 까먹고 방황하는 나
그 중에서도 가장 많이 다시 찾아보게 되는 Layout!!
그래서 다시는 까먹지 않게 이곳에 박.제. 해 놓는다!
Display
| 이름 | 설명 |
|---|---|
| block | 한 줄을 다 차지하는 속성. |
| inline | 단락의 흐름을 방해하지 않은 채로 사용가능한 속성. 정해진 부분만 차지한다. |
| none | 존재하지만 보이지 않음. |
<div>가 block의 대표 태그이고, <p>가 inline의 대표 태그이다.
(물론 css값을 통해 얼마든지 바꿀 수 있다!)
none의 경우 평소에는 보이지 않다가 특정조건에 반응하여 block/inline 속성으로 바뀌어 나타나기도 한다! (ex) 네이버 검색창 자동완성 기능)
Position
| 이름 | 설명 |
|---|---|
| static | 기본값. 특별한 방식으로 위치가 지정된 것이 아니다. |
| relative | 별도의 프로퍼티를 지정하지 않는 이상 static과 동일하게 동작. |
| fixed | 뷰포트(viewport)가 상대적으로 위치가 지정. 페이지가 스크롤 되도 늘 같은 곳에 위치! |
| absolute | 뷰포트가 상대적으로 지정되는 것이 아닌 가장 가까운 곳에 위치한 조상 엘리먼트에 위치가 지정. |
relative는 혼자서는 동작하지 않지만, 2개의 relative가 있고, 뒤의 relative가 top/left/right/bottom 속성이 지정되어 있다면 앞선 relative에 반응하여 위치하게 된다!
fixed는 relative와 마찬가지로 top, right 같은 프로퍼티가 사용하며 같은 자리에 고정되는 position이다.
absolute는 어느 한 <div>안에 있다고 하고, 그 div가 relative 포지션이라면, absolute는 그곳을 벗어나지 못하는 선에서 움직이는 포지션이다!
이것들을 활용한 레이아웃!
그림은 어디까지나 예시다! 우리는 훨씬 더 많은 레이아웃을 만들 수 있고 꾸밀 수 있다.
반응형 웹
반응형 웹이란 브라우저와 디바이스에 반응하는 사이트를 만드는 방법이다. 여기에는 미디어 쿼리를 이용하여 만들 수 있다! (미디어 쿼리: @media)
@media (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media (max-width:599px) {
nav li {
display: inline;
}
}위의 코드를 살펴보면, 첫번째 미디어 쿼리에서는 화면의 최소 사이즈가 600px 이라면 아래에 있는 스타일들이 적용되고, 두번째 미디어 쿼리에서는 화면의 최대 크기가 599px이면 아래의 스타일이 적용된다!
Today, Learned
배운점
- 미디어 쿼리! 참 신기하고 얼른 적용해보고 싶은 방법이다🤩
- Display, Position에 대해 명확히 알았다!
느낀점
- 이제 까먹지 않도록 꾸준히 복습해야겠다.
- 반응형 웹.. 참 트랜디하고 써먹어 보고 싶은 방법이다!!
오늘의 한마디
프론트의 기술이지만 편식하지 말고 내 껄로 만들자!!🙌
