영원히 흘러가는 강

전처리기가 아닌 css에서도 변수로 지정하여 사용가능하다. .ex{ --color:black; color:white; } 사용자 속성은 --로 시작해야 하며 --color 은 우리가 새로이 지정한 속성이며 , color은 기존 내장 속성 사용시 var()로 감싸서 사용하면 된다 .ex2{ --white:white; background:var(--white); } 위와 같이 사용가능하다. 두번째 인자로 기본값을 넣어줄수있다. 확실치 않은 경우 활용 가능 .ex3{ color:var(--white,white); } 다만 상위에서 하위로 상속이 되므로 상위에서 정의해야 하위에서 가능하다!! * 전역변수처럼 일관적으로 사용하기 위해 많이 사용!! * IE에서는 지원이 안된다 참고. https://www.dale..

Flex를 사용하게 되면 자동적으로 간격 맞추느냐고 크기를 늘릴수도 작게 만들수도 있다 이때 flex-grow는 크기를 비율에 맞게 크게 가능하고 flex-shrink가 작게 만들게 하는데 flex-shrink :0 사용시 비율 그대로 사용가능.!

opacity는 자동적으로 자식까지 상속해주기 때문에 background-color: rgba(0, 0, 0, 0.6); 이처럼 부모에게 opacity 대신 설정해주면 가능!

소소한 팁이지만 내가 몰랐었으므로 정리! ul의 높이값으로 li에 line-height 값을 주게 되면 세로 가운데 정렬 된다.!!!

overflow-x 와 overflow-y 는 내용이 넘칠때에 해당 축에 대하여 어떻게 보여줄지를 지정한다. 브라우저 지원 Chrome Edge FireFox Safari Opera 4.0 9.0 8.0 -ms- 1.5 3.0 9.5 속성으로는 scroll , hidden , auto , visible 이 있다 scroll 해당 영역에 내용이 잘리면 스크롤바가 생성된다. hidden 해당 영역에 내용이 잘려서 보인다. auto 해당 영역에 내용이 잘려서 보이나 필요시 스크롤바 나타난다. vivible 내용이 밖을 넘어선다 ex) 해당 스크롤에 대해서는 ::-vebkit-scrollbar로 스타일 혹은 보이지 않게 가능하다 ::-vebkit-scrollbar 에 대한 내용은 나중에 정리 해보려한다!

크로스 브라우징? W3C의 웹표준에 맞는 코딩을 해서 브라우저나 기기마다 동일하게 보여지고 작동하도록 하는것! gs.statcounter.com/browser-market-share/all/ Browser Market Share Worldwide | StatCounter Global Stats This graph shows the market share of browsers worldwide based on over 10 billion monthly page views. gs.statcounter.com 2021년 2월 기준. 우리나라는 1위가 크롬 2위 사파리 3위 삼성인터넷 4위 웨일 5위 엣지 순이며, 전세계적으로 보자면 1위 크롬 2위 사파리 3위 파이어폭스 4위 엣지 5위 UC Browser 이..

float와 inline-block 의 구조 형태에서 Flex는 아마 구원자 같은 느낌이다 엄청 손쉽게 레이아웃을 구성하는 방법으로 gird 또한 존재하지만 IE는.. 그리하여 flex에 대한 정리를 해보려한다! 내가 작성하며 정리 하는 개념이라서 출처에 가보면 더 자세한 설명이 존재! 출처: studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexi..

조금 더 이쁜 웹 디자인을 위해서는 배치가 제일 중요하다고 생각한다. flex 와 gird가 있지만 브라우져들마다의 지원 버전이 다를수 있으니 기초의 position 도 익혀야할것이다. static : default 값으로 , 자동 배치되며 임의로 위치 설정 불가능 relative : 원래 자리하던 위치 기반으로 위치 설정 absolute : 절대 좌표와 함께 위치 지정 fixed : 스크롤과 상관없이 보여지는 화면에 항상 고정 static html 요소는 기본적으로 static .즉 초기값이다. top , bottom , left , right 속성의 값에 영향 받지 않는다. relative 요소를 위의 static처럼 문서 흐름에 배치한다. 그 후에 자기 자신을 기준으로 위치 변경 absolute 가..

display를 활용한 예제는 수없이 많을 것이다. 하지만 속성 값에 대한 헷갈리는점이 있어서 정리해보려한다! 간단히 정리해보자면 display : none : 보이지 않음 , 없는것처럼 반응 block: div , p , h , li 줄바꿈 크기지정 가능 inline: span, b , i , a 줄바꿈 없음 , 크기 지정도 불가능 inline-block : 줄바꿈 없음, 크기 지정 가능 display: none 말 그대로 보여주지 않는다! 이때 중요한게 visibility 에서 hidden 값과의 차이 일것이다!! display:none은 해당 영역을 차지하지 않는다! display: block div , p , h , li 태그 등이 이에 해당된다 기본적으로 가로 영역을 모두 채우며 줄바꿈이 된 것..