[CSS] #11 components 활용 팁/absolute, relative/border-box/lorem

정리를 시작하기 전에 가장 잘 사용되면서 잘 까먹는 것 복습하고 들어갑시다.

 

▶absolute child 는 항상 relative father가 필요합니다. -> 바로 위에 건너뛰고 상위에 있는 건 적용이 안됨 

position: relative; 로 돼있는 부모가 없으면 position: absolute를 했을 때, 변경하는 top/left/right/bottom의 위치 기준점이 제대로 먹히지 않습니다. 

absolute child always need a relative father 

 

▶text-align 과 align-items 의 차이점

text-align은 텍스트 국한 

align-items는 전제조건: display:felx; 교차축을 기준으로 정렬한다. 

 

▶box-sizing: border-box; 박스 모델
box-sizing 옵션을 사용하면 컨텐츠의 width와height로 설정한 값에 padding, border값이 포함되어 만들어진다. 
(*margin은 원래 박스 밖의 값이므로 포함x)
즉, 여러 개의 블럭 박스에 box-sizing:border-box속성을 주고 width와 height를 같게해주면 
padding과 border의 값이 어떻든 같은 크기를 가진 box로 남게 됩니다. 

 

▶input태그에 커서를 올렸을 때, 생기는 기본 브라우저 아웃라인의 state를 변경해주려고 여러가지 건들였는데 

기존에 알고있던 force elements state가 :active와 :focus가 아니라 :focus-visible 이었고 거기에 효과를 주자 변경됐습니다. 또한, :focus-visible의 CSS코드에서 바깥테두리를 없애주려고 border:none; 을 했는데 효과가 전혀 먹지를 않음

여기서는 border 이 아니라 outline : none; 을 해야 바깥 테두리를 없앨 수 있었네요.

 

▶VSCode 사용 시, <p>태그 안에 그냥 아무 내용이나 넣어서 화면구성을 할 때, 

단축키: lorem 을 입력하면 랜덤 단어 여러개가 나열됩니다. 

 

▶우리가 여러 페이지에서 사용되는 큰 섹션(예를 들어, screen-header같은 것들)의 CSS파일을 따로 components 폴더에 분리 시켜주면 문제점이 생길 수 있는데 그 예로, find.html이라는 스크린에서는 예쁘게 맞아 떨어지는 component "nav-bar가 다른 페이지 chat.html 스크린에서는 다른 요소와 맞물렸을 때 화면구성이 이상할 수 있다(둘 사이의 공간이 충분하지 않아서 너무 붙어있다거나 하는)그렇게 되면 component에 margin이나 padding값을 주면 되지 않나 하지만 component는 공통으로 사용하는 요소라 다른 html화면에도 전체 적용이 돼서 공통요소이지만 따로 지정해줘야한다. 

즉, 그냥 screens 에 따로 more.css따로 빼서 해당 클래스에 필요한 부분만 CSS로 작성해서 html 코드에 추가해주면 된다. 

.more-screen .icon-row 

CSS code

-> .icon-row의 css코드를 건들이면서 새로운 class 추가는 main-screen쪽에 한 이유, 

more 페이지에 있는 "main" 섹션의 내부에 있는 icon-row에 값을 주는 것이기 때문에 앞에 수식어를 

main-screen이 아니라 새로 만든 more-screen 클래스명을 사용함으로써 more페이지만의 개별 css라는 것을 알려주는 용도인 것 같다. icon-row는 공통적용 component css이기 때문에!