css 레이아웃
-
CSS 가상 class 선택자 & Transition 전환 속성 & Transform 속성Study/HTML & CSS 2019. 11. 24. 20:40
[ 가상 클래스 선택자 ] 문서 상에 있는 것들을 지정하는 것이 아닌, 어떤 가상의 상태를 지정하는 것을 의미한다. link : 방문하지 않은 링크를 선택 visited : 방문한 링크를 선택 네이버 a:link { color : black; } // 링크를 방문하지 않은 태그를 검은색으로 지정 a:visited { color : red; } // 링크를 방문한 않은 태그를 빨간색으로 지정 active : 마우스로 클릭한 상태 hover : 마우스를 위에 올린 상태 focus : 포커스를 가진 상태 (ex: input 박스에서 텍스트 입력 가능한 상태) Hello world Contents here h1:active { color: yellow; } div:hover { color: red; } inpu..
-
[코드스테이츠 TIL] CSS LAYOUT : Display, Box model, Positioning, FloatStudy/HTML & CSS 2019. 11. 23. 10:32
[ 브라우저에서 사용하는 좌표계 ] : 기본적으로 element는 위에서 아래로, 왼쪽에서 오른쪽으로 확장된다. 왼쪽 상단의 좌표가 (0,0) 이다. 좌표는 px 단위 또는 % 단위 등을 쓸 수 있다. 좌표계를 바탕으로 절대/상대적인 위치에 포지셔닝 할 수 있다. [ Display 요소 ] 각 요소는 고유한 크기를 가질 수 있으나, inline 요소는 컨텐츠가 차지하는 크기로 고정된다. inline block 은 width와 height를 별도로 설정할 수 있다. - 한 줄을 다 차지하는 block ex) , , ... - 컨텐츠 공간만 차지하는 inline ex) , , ... - 높이 + 넓이를 제어할 수 있는 inline-block (span 태그에 css속성으로 display : inline-bl..