생활코딩은 내게 낚시하는 방법의 기초를 알려주었고, 검색의 힘을 길러야한다는 뼈가 되고 살이 되는 조언을 해줬다. 지금까지 웬만한 태그들은 검색해보면 구체적으로 어떤 역할을 하는 것인지 알게 되거나 활용함으로써 알 수 있었는데, position은 정말 봐도봐도 헷갈리는 부분이다.
position을 검색하면 여러 내용이 나오지만 그래도 가장 잘 정리가 잘 된 설명이라고 생각되는 것은 MDN의 설명이다.
static
요소를 일반적인 문서 흐름에 따라 배치합니다. top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.
relative
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.
absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.
fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다.
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.
sticky
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (W3C CSSWG의 Github 이슈 참조)
오늘 소소하게 배운것
1. 텍스트라고 다 같은 텍스트가 아니다.
<li><a>안녕</a></li>이라는 코드가 중간에 있을 때,
a{color:black;}이라는 스타일을 먼저 설정했다면
이후에도 li{color:gray;}한다고 해서 '안녕'이 바뀌지 않음.
li a{color:gray;}라고 설정해야 함.
- 폰트패밀리는 왜 함께 다닐까?
순서가 폰트 사이즈 별로 적용되는 폰트가 아니라, 사용자에게 있을 만한 폰트가 대안으로 써져있는 거였다.
3.배경에 이미지를 넣고 싶을 때, 크기를 조정하는 여러 방법 중 object-fit이라는 속성도 있다.
4.단위가 많다. px 외에도 em, rem, vh vw 등...
오늘의 코드리뷰
html{
font-size: 16px;
}
body{
margin:0;
}
a{
color:black;
text-decoration: none;
}#main container{ position:static;}이라고 있었는데, static이 디폴트값이므로 지워도 됨
#videoBG{
position: fixed;
object-fit: cover;
height:100vh;
width: 100vw;
}
#titlebox{
position: absolute;
top: 50%;
left:50%;
display: flex;
리스트를 만들어 위아래로 겹칠 생각만 말고 플렉스로 양옆으로 겹치는 방법도 있다
justify-content: center;
}
#titletext{
position: absolute;
color: #94ff21;
font-size: 3rem;
font-weight: bold;
font-style: italic;
}
#titleBG{
height:5rem;
}
#logo{
position: absolute;
left:5%;
bottom:5%;
width: 5rem;
opacity: 70%;
}
#logo:hover{
transform: rotateY(360deg);
transition-duration: 0.7s;
}
ul.mainNav{
position: relative;
display: flex;
justify-content: space-between;space-around도 있다. between은 양끝까지 펼칠 때 사용
width: 100%;
margin: 0;
top: 1.5rem;
}
.mainNav li{ div.mainNav li{} 같은 식으로 적지 마라 body div div.mainNav라고 적는거랑 같다. 그리고 클래스, 아이디 선택자랑 타입 선택자 띄어써라 ex) div .mainNav
list-style-type: none;
display: inline;
text-align: center;
}
.mainNav li a{
font-size: 1.5rem;
font-family: Helvetica;
font-weight: bold;
color: #B2A6CE;
}
.mainNav li> a:hover{
color:#756a8f;
transition: 0.2s;
}한 줄 평
reset.css랑 box style 공부하시게
