TIL 7일차_CSS기본

CSS

CSS의 속성 몇가지

1. border-radius
   꼭짓점을 둥글게 만드는 속성

   button{
    border-radius: 30px;
   }

2. overflow
   박스보다 내용이 더 길 때, 어떻게 보일지를 설정하는 속성. (상속되지 않는다.)

   overflow:______ 

   1. hidden 내용이 넘치면 자른다.( 내용을 자르는 게 아닌, 박스안의 이미지까지만 보인다.)
   2. auto 내용이 잘릴 때만 스크롤이 보인다.
   3. scroll: 항상 스크롤이 보인다.
   4. visible: 내용이 흘러넘친다.

3. 의사 클래스(=가상 클래스)
   의사 클래스는 셀렉터에 추가하는 키워드로, 선택한 요소가 어떤 특별한 상태여야 작동한다.

   a:link { /링크 방문 전/
    color: red;
   }
   a:visited { /링크를 방문한 이후/
   color: blue;}
   
   a:hover { /마우스를 올려놓을 때/
   color: green;}
   
   a:active { /클릭하는 순간/
   color: yellow;}
   

   주의할 점은,의사 클래스로 정의한 스타일은 자신보다 뒤에 위치한 다른 의사 클래스에 덮어 씌워진다. 따라서 링크를 적절히 디자인 하려면`LVHA 순서 (:link -> :visited -> :hover -> :active)'의 순서로 배치해야한다.

   
   

   CSS의 단위

   1. em과 rem
      em은 자신의 부모를 기준으로 결정되고, rem은 root(최상위) 태그를 기준으로 결정된다. (보통 html태그)예를들어, html태그에 10px를 정해줬으면, 1.5rem은 항상 15px의 크기를 가진다.
   2. vh(vertical height)와 vw(vertical width)
      뷰포트의 너비값과 높이값을 기준으로 크기를 정하는 단위
      예를들어, 뷰포트의 높이가 900px이고 너비가 750px이면1vh는 9px, 1vw는 7.5px가 된다.
   3. vmin과 vmax
      vh와 vw가 뷰포트의 높이와 너비를 기준으로 나눈 것이라면
      vmin은 뷰포트의 높이와 너비중 최소값을, vmax는 최대값을 기준으로 나눈것이다.
      예를들어, 마찬가지로 뷰포트의 높이가 900px, 너비가 750px라면1vmin은 7.5px, 1vmax는 9px가 된다.

   Today's ?!

   뷰포트란 무엇인가..

   컴퓨터, 태블릿, 노트북 등 디바이스마다 해상도도 다르고 크기도 다르다.따라서 이를 해결하기 위해선 반응형 웹을 제작해야하고,가장 기본이 되는 핵심이 viewport(뷰포트)라고 한다.

   아직 잘 모르겠다.

   무언가 공부하려고 찾아보면 단어들이 생소하고, 또 찾아보고, 또 찾아보고..하다보면 공부의 흐름이 끊기는 것 같다.

   조급해하지말고 하나하나 알아가자.