본문 바로가기

언어46

[입문] HTML CSS - transition (전환), 애니메이션 anmaition : 시간을 이용해서 A>B 로 동작 가능하다. 1. transition-property : 무엇을 all; margin-right; color; 2. transition-duration : time시간 자료형 ( 2s; 500ms; ex,0.5s=500ms 같다.) .box { width: 300px; height: 80px; border: 2px dashed green; font-size: 30px; background-color: aqua; color: white; text-align: center; transition-property: all; transition-duration: 1s; } .box:hover { background-color: indianred; col.. 2024. 1. 16.
[입문] HTML CSS - 색상과 배경, trasnform(변형)( HEX 16진수, rgb , rgba, background-image , repeat, position, origin, size, shorthand) 1. 색상의 종류와 코드작성 법, 불투명도에 대해 알아보자. 2. 배경 background에 대해 알아보자. RGV : 웹에서 주로 사용함 CMYK : 팜플렛, 인쇄물 등에 사용함 1. 키워드 사용 : transparent 투명 2. RGB : 3차원 좌표계 사용( #16진수, rgb(), rgba() ) 1) #16진수 ( HEX) : #000000 ( 6자리 숫자 (0~9)+ 알파벳 f 까지 ) #000000 검정 / #ffffff 흰색 2) rgb() 작성법 : rgb(_ _ ,_ _ ,_ _ ) - 0~256까지의 숫자 작성가능) rgb(0, 0, 0) 검정 3) rgba() : 마지막에 투명도 까지 넣어줌. 배경색상에만 적용.. 2024. 1. 15.
[입문] HTML CSS - 레이아웃( display, float, position, overflow, z-index)( relative, absolute, fixed, sticky ) 레이아웃에 대해 알아보자 * inline 요소 : ex) span.. - 영역의 크기가 내부 콘텐츠 크기로 정해진다. -가로배치 * block 요소 : ex) div.. -영역의 크기를 width, height 지정할 수 있다. - width를 지정하지 않으면 가로 전체를 차지한다. -세로배치 * inline-block 요소 : ex) input .. - 영역의 크기를 width , height 를 지정할 수 있다. - 여러 요소가 가로 배치가 된다 ' * display: none ㅡ 코드는 존재, 레이아웃에서 사라짐 * visbility: hidden ㅡ 문서의 레이아웃을 변경하지 않고 , 숨김 ㅡ 레이아웃에서 숨기지 않고 나옴 ( 요소의 빈 부분만.. 2024. 1. 15.
[입문] HTML CSS - CSS의 선택자의 모든 것! ( selector, 상속, 우선순위 ) css의 선택자에 대해 알아보자 . CSS - Cascading Style Sheet 그후 상속 과 우선순위에 대해서도 같이 알아보자 . 1. 스타일 우선순위 inherited> * > tag 스타일 1. Type : 태그명으로 선택 2. class : . 으로 선택한다. 클래스 다중 선택가능 (html에서 클래스명 띄우고 또 적으면됨) id : # 으로 선택한다. ex) div.box { } div중에 클래스가 box인것 선택 ! 3. 속성 선택자 Attribute selector 요소[ ] ㅡ [속성명] a[target] { col.. 2024. 1. 10.