본문 바로가기

개발 관련 지식/CSS12

font-family : CSS font-family는 글꼴이다. 다양한게 있는데, 쉼표를 써서 나열한 것은 브라우저에서 지원이 안되면 다음 폰트를 적용하도록 하는 기능이다. font-family: sans-serif, monospace /* 브라우저에서 sans-serif를 지원하지 않으면 monospace를 적용하라는 뜻 */ 2020. 6. 11.
color - CSS rgb값, rgba값, 16진수 값 등을 이용해서 color를 지정할 수 있다. rgb, rgba는 최대값이 255이고, 16진수로 표현하면 앞에 #을 붙이고 rgb 값을 변환해주면 된다. 255를 변환하면 ff 가 된다. color: rgb(255, 0, 0) /* red: 255, green: 0, blue: 0 값을 준 것이다. */ color: rgba(255, 0, 0, 100) /* red: 255, green: 0, blue: 0, alpha: 100 값을 준 것으로 alpha 값을 주면 희미해진다. */ color: #ff0000 /* 255를 16진수 값으로 바꾸면 ff가 된다. 순서대로 두개씩 끊어서 red: 255, green: 0, blue: 0 값이다. */ 2020. 6. 11.
CSS - hover box 요소 만들기 parent element에 position : relative 를 주고 child element에 position : absolute와 display : none을 준다. 혹은, // html mouse over child1 child2 //js const parent = document.getElementById("parent") const child = document.getElementById('child') function onMouseOver(){ // 마우스가 over 했을 때 hover 생성 child.style.display = 'block' } function onMouseLeave(){ // 마우스가 떠났을 때 hover 제거 child.style.display = 'none' } i.. 2020. 3. 14.
CSS - transition element에 움직이는 효과를 주는 속성. font-size와 transform에 transition을 주었다. transform - https://developer.mozilla.org/ko/docs/Web/CSS/transform transform 은 element에 회전(rotate), 크기 조절(scale), 이동(translate), 기울임 등을 설정한다. transform 효과는 element가 block 또는 inline-block level 일 경우에 적용 된다. transition은 요소에 변경이 적용될 css와 시간, 변화 과정을 설정하는 속성이다. transition-timing-function이 변화하는 과정을 설정하는 효과.(ease, linear, step-end, steps(.. 2020. 3. 13.
CSS - float 원래는 웹페이지에서 이미지와 텍스트를 띄워서 어떻게 배치할 것인가를 결정하는 속성이다. 근데 요즘에는 레이아웃을 설정하는 용도로 많이 쓰인다. 위로 띄운다는 느낌이 있다. 예시, 레이아웃 적용 예시, 2020. 3. 13.
CSS - 미디어쿼리 화면의 사이즈가 바뀔 때 css가 다르게 적용되도록 하는 속성 브라우저 너비가 500px일 때 배경색 바꾸기. 크롬으로 페이지 검사 창을 열고, 브라우저 너비를 500으로 맞추면 결과가 빨간색이 된다. 브라우저 너비 경우에 따라서 바꾸기 body width ~500px : red, 501~600 : green, 601~ : blue 2020. 3. 12.

티스토리툴바