반응형

CSS 9

[CSS] Button Hover 효과 사용법

[CSS] Button Hover 효과 사용법 CSS에서는 버튼에 다양한 hover 효과를 넣을 수 있다. 버튼에 색 입히기 버튼 사이즈 조절하기 라운드 버튼 만들기 버튼에 색깔 테두리 넣기 버튼 위에 마우스를 올리면 색이 변하게 설정하기 그림자 진 버튼 만들기 disabled button(누를 수 없게 만든 버튼) 만들기 이미지 위에 버튼 만들기 애니메이션 넣은 버튼 만들기 아래 링크에 관련 내용이 알기 쉽게 나왔으므로 이를 통해 확인하길 바란다. https://www.w3schools.com/css/css3_buttons.asp

[CSS] grid-template: repeat 사용

grid-template: repeat 사용방법 CSS의 grid-template에서 repeat을 어떻게 이용할지 알아보자. (1) 1 2 grid-template-rows: 200px 200px grid-template-columns: 100px 100px 100px cs 행은 2개, 세로는 200px로 설정 열은 3개, 가로는 100px로 설정 (2) 1 2 grid-template-rows: 200px 200px grid-template-columns: 1fr 1fr 1fr cs 행은 2개, 세로는 200px로 설정 열은 3개, 가로는 1 : 1 : 1의 비율로 설정 (fr은 fraction의 약자로 비율을 나타낸다) (3) 1 2 grid-template-rows: repeat(2, 1fr 2f..

[CSS] position 속성 사용법

[CSS] position property 사용방법 position은 위치를 결정하는 속성이다. static (default): 위치를 지정하지 않음 relative: static의 위치부터 위치를 계산함 absolute: 원래 위치와 상관없이 위치를 지정함 fixed: 위치를 고정시킴 position: static -기본 값이다. -왼쪽에서 오른쪽으로, 위에서 아래로 쌓인다. position: relative -static일 때의 위치를 기준으로 위치를 계산한다. -top, bottom, right, left로 세부 위치를 지정한다. (ex) top: 10px; right: 10px; bottom: 5px; left: 5px; position: absolute -parent 중 position이 sta..

[CSS] overflow 사용방법

overflow property 사용방법 overflow는 element 내에 컨텐츠가 다 들어가지 않을 경우 이를 어떻게 보여줄지 결정하는 속성이다. visible (default): overflow됐을 경우 넘치는 부분이 넘치는 대로 보여진다 hidden: overflow된 부분은 숨겨져서 보이지 않는다 scroll: 스크롤바가 생기면서 스크롤바를 내리면 overflow된 부분을 볼 수 있다 auto: 스크롤바를 추가할지 자동으로 결정한다 참고로, overflow-x, overflow-y 속성으로 가로축과 세로축을 각각 지정할 수도 있다.

[CSS] align-items, justify-content (flex)

align-items VS justify-content align-items 세로축을 기준으로 정렬한다. (위-아래) flex-start: 상단으로 정렬 flex-end: 하단으로 정렬 center: 중앙으로 정렬 baseline: 컨테이너의 시작위치에 정렬 stretch (default): 컨테이너에 맞게 늘림 justify-content 가로축을 기준으로 정렬한다. (좌-우) flex-start (default): 왼쪽으로 정렬 flex-end: 오른쪽으로 정렬 center: 중앙으로 정렬 space-between: elements 사이에 동일 간격을 둠 space-around: elements 주위에 동일 간격을 둠

[CSS] 100vh와 100%의 차이 (100vh vs 100%)

height: 100vh VS height: 100% CSS를 보다보면 height을 100vh으로 설정하기도 하고 100%로 설정하기도 한다. 1 2 3 height: 100vh; height: 100% cs 이 둘의 차이는 무엇일까? height: 100vh viewport 높이의 100% height: 100% parent element 높이의 100% height: 100%로 정하면 parent 값에 의존하므로, parent 값에도 height이 설정되어 있어야 한다. 반면, height: 100vh로 정하면 parent 값에 의존하지 않으므로, 어디에서든 사용할 수 있다.

[CSS] *{ padding: 0; margin: 0; } 의 의미

*{ padding: 0; margin: 0; } 의 뜻, 의미 웹사이트의 CSS 파일을 보다보면 아래와 같은 코드를 쉽게 접할 수 있다. 1 2 3 4 *{ padding: 0; margin: 0; } cs 이 코드는 무슨 의미일까? 브라우저마다 default padding 값과, default margin 값이 다 다르다. 그렇기 때문에 내가 설정한 CSS가 모든 브라우저에서 동일하게 보이게 하기 위해 padding과 margin 값을 0으로 초기화 하는 것이다. 이렇게 0으로 초기화 한 후 다시 padding 값과 margin 값을 설정하면 어느 브라우저에서 보이더라도 동일하게 보일 수 있다. 참고로 이 코드는 CSS reset 테크닉이라고 불린다.

반응형