[html / css] CSS 애니메이션 변화 시간 설정

transition-duration hover, focus 등의 css 변경 시 정적으로 변경하는 것에 animation을 추가하여 동적으로 표시할 수 있음. 1 2 3 4 5 6 7 .testBox{ color : blue; transition-duration : 0.3s; } .testBox:hover{ color : red; } cs > hover 시 글 색이 blue 에서 red 로 0.3초동안 animation이 적용되어 변경됨

[HTML / CSS] CSS :not - 부정문

:not()css에서 ' : ' 다음에 들어가는 옵션들에 부정 조건을 붙이고 싶을 때 쓰는 명령어. :not( :옵션 ) 형식으로 사용할 수 있다. 예제#character_list>li:not(:nth-child(1)){ display: none;} 예제와 같이 사용할 경우, nth-child(1)에 해당되는 태그를 제외한 나머지에 display:none이 적용된다.

[HTML / CSS] CSS calc() - 수치 연산

calc() CSS 내부에서 길이 연산이 필요할 때 쓰는 함수. calc(연산식)으로 사용할 수 있다.-moz-calc()와 -webkit-calc() 로 브라우저 간 호환성을 높일 수 있다.javascript로 계산하기 힘든 %와 px의 계산식도 수행할 수 있다.각 수치와 부호 사이에 공백이 없으면 오류가 난다. 예제#content{ height: calc(100% - 70px); height: -webkit-calc(100% - 70px); height: -moz-calc(100% - 70px);}

[HTML / CSS] CSS기초 3. CSS 연결 (link / import)

이전 포스팅에서 CSS를 사용하기 위해서는 html에 연결해야 된다고 설명했었다. 이번 포스팅에서는 CSS 연결 방법에 대해 설명한다. link DOCTYPE html> Page Title CSS 연결은 보통 안에 지정한다. link는 html 태그로, 연결할 css 파일을 지정하여 이를 연결시킬 수 있다.rel = "stylesheet" 는 해당 파일이 스타일시트(css)이며, type="text/css"는 해당 파일이 text형식의 css파일이라는 것을,href= "main.css"는 해당 파일의 경로를 나타내는 것이다. 사실, rel, type을 지정하지 않고 href만 지정해도 연결은 되지만, 해당 방법이 정석임으로 이대로 하는 것을 추천한다. import DOCTYPE html> Page Tit..

[HTML / CSS] CSS기초 2. style 선언자 (tag, id, class)

우선, 시작하기 전에 오늘 사용할 예제 코드를 소개한다. DOCTYPE html> Page Title div{ border: 1px soild black; width: 300px; height: 200px; } .class_1{ width: 200px; height: 300px; } #id_1{ width: 200px; height: 500px; border: 1px solid black; } 설명을 쉽게 하기 위해 CSS는 쓰지 않고 html style 방식으로 대체한다. 위의 코드에 디자인을 넣기 위해서는, 원하는 tag를 지정하여 그 tag에만 style을 부여하여야 할 것이다.이러한 경우 지정을 하기 위해서는 각 tag에 이름값을 지정해야 원하는 설정을 넣을 수 있을 것이다.이러한 이름값들을 ta..

[HTML / CSS] CSS 기초 1. Style과 CSS

Style Style은 html의 태그들에 디자인을 입히는 과정으로, html 태그들이 틀을 담당했다면, style은 그 태그들을 꾸미는 작업을 한다. 앞으로의 글들에서 소개할 Style 속성으로 Web을 꾸밀 것이다. style에 대해서는 이정도로만 소개하고, 앞으로 있을 설명에서 더 자세하게 설명할 것이니, 아래 코드들을 참조하면서 이런 것이 있다라고만 기억하고 있으면 된다. CSSCSS는 html 각 태그의 style 속성을 한 파일에 몰아 html에 연결하여 style별로 분류해 보기 쉽게 만들어 놓은 구조다.가독성이 뛰어나며, 무엇보다 모듈화를 하여 추후 수정할 일이 생기면 좀 더 쉽게 작업할 수 있는 장점이 있다. 기존의 html style 방법과 css 방법의 차이점에 대해 설명한다. htm..

[WEB / HTML] 드래그 / 우클릭 방지 (html / css)

1. body 속성으로 적용. (드래그 / 우클릭 방지) 1cs 2. css 속성으로 적용 (드래그 방지) 123body{ user-select : none;} cs