CSS의 Class, flexbox, position

1. class

css에도 class가 있다. 자바스크립트의 클래스와는 상관이 없다.

특정 엘리먼트를 지정하고 싶을때 태그에 id를 만들어서 css selector로 지정했다. 

근데 id는 유일하다. 

그래서 이렇게 여러개가 반복되는 작업을 할때 id를 쓰면 id를 바꿔주면서 똑같은 코드를 반복해야 한다. id는 유일하기 때문에.

이럴때 쉽게 쓰는게 class이고 선택자는 . 이다(id의 선택자는 #)

2. flexbox

div 는 블록이다. 블록은 옆에 아무것도 올수없다. 이 블록을 가로로 놓고싶을땐 설정해서 inline으로 만들어주면 된다. inline은 높이와 너비를 가질 수 없기 때문에 브라우저에서 div가 눈에 보이지 않는다. 그땐 inline-block으로 설정한다. 

하지만 inline-block은 반응형디자인을 지원하지 않는다. 쉽게말해 내 모니터에서는 완벽했는데, 고객의 브라우저 크기가 달라지면 디자인도 엉망진창이 되어버린다는 소리다. 어떤 크기에도(모바일에서도) 일정하게 보여지도록 하는게 반응형이다. 

이때 필요한게 flexbox 다.

이렇게 div박스를 가로로 놓을수도 있고 justify-content: center; 를 입력해서 위처럼 가운데 놓은 후, 작아진 브라우저에도 반응형으로 나타나게 할수도 있다.

단, 항상 자식 엘리먼트가 아니라 부모 엘리먼트에서 flexbox를 명시하고 부모엘리먼트로 만들어야 한다.

위 경우는 div블록이 아니라 body에서 flexbox를 다룬 것이다. 

마찬가지로 위 사진에 class가 second인 div들을 flex하게 다루기 위해 그 부모엘리먼트에서 flexbox를 다루었다.

 flexbox는 main axis, cross axis (주축, 교차축)을 가지고 있다. 주축은 justify-content로 , 교차축은 align-items로 컨트롤 할수있다.

이름을 직관적으로 잘 구분할 수 있게 해놨으면 편했을텐데... 이유가 있겠지? 

default값은 주축이 수평이고 교차축은 수직인데 flex-direction으로 수정할 수 있다. 근데 굳이 교체해서 어떤 경우에 쓰게될지는 의문이다.

 

3. position

오늘 배운것중에 많이 쓰일 것 같은 내용은 position: fixed; 이다. 스크롤을 내려도 해당 엘리먼트가 처음 위치에 고정된다. 특이한 점은 fixed를 하게되면 다른 엘리먼트의 레이어와 달라지면서 레이어의 더 앞쪽으로 나오는 것같다. 웹페이지의 네비게이션바에 적용된 것을 많이 봤다.

position: relative는 엘리먼트가 처음 위치했던 곳을 기준으로 위치를 수정한다. 핑크색 박스가 처음 위치했던 곳에서 top으로 -10px만큼 , right로 -10px만큼 이동한 것이다. 

position: absolute는 좀 더 신기한데, 이건 가장 가까운 부모 relative를 기준으로 이동시켜준다. 

위에서는 second클래스 div의 가장 가까운 부모가 그냥 div엘리먼트지만, relative가 아니다. 이런 경우 가장 바깥에 있는 body가 relative가 될 수 있다. 그래서 body를 기준으로 bottom 0px, left 0px로 이동되어 위 사진처럼 위치하게 된 것이다.

그럼 보라색 박스 안의 왼쪽아래 구석으로 위치시키려면 클래스가 없는 div를 relative로 설정하면 된다. 해볼까

 잘된다.