SOOM_BLOG [숨숨 블로그]

Flex Box 1. container, item 에 적용할 수 있는 속성값들이 존재한다. [ container ] attributes explain example display flex flex-direction 중심축 정하기 - row (default) - row-reverse - column - column-reverse flex-wrap 한 줄에 꽉차면 다음 줄로 넘어가게 할지 말지 - nowrap (default) - wrap flex-flow flex-direction + flex-wrap flex-flow : column nowrap; justify-content 중심축의 item들을 중심축 기준으로 어떻게 배치할 지 결정한다. - flex-start - flex-end - center - ..

Diplay : 각 태그들이 가지고 있는 inline, block 특성을 바꿀 수 있다. inline : tag내 content 자체만을 꾸며준다. tag에 지정해준 width, height는 무시하고 content의 크기에 맞춰 한 줄에 나열한다. inline-block : 한 줄에 block단위로 (content의 크기엔 상관없이) 적용한 스타일에 맞춰 나열한다. block : 한 줄에 하나씩만 나열한다. Position(default : static) static : html에 정의된 순서대로 브라우저 상에 자연스럽게 보여지는 것. relative : item이 원래 있어야 할 위치에서 설정한 (top, left, bottom-left 등) 스타일에 맞춰 보여지는 것. absolute : item이..

cascading 적용 순서 Author style : 우리가 작성하는 스타일 sheet (css 파일) ⌵ User style : 브라우저 상에서 유저 취향에 맞게 바꾼 스타일들 ⌵ Browser : 브라우저 상에서 기본적으로 지정된 스타일 ** cacading의 연결고리를 끊는 것 : !important (가능하면 쓰지 않는 것이 좋다..) 🔍 selectors selector example Universal * * {color : green;} type Tag li {color : blue;} ID #id #special {color:pink;} Class .class .red {background : yellow} State : button:hover{color : red;} Attribute [..