인생은 양탄자의 무늬짜기

하이브리드 앱 css 팝업창 띄우는데 하이브리드 앱이다 보니 웹/앱에서 일정 사이즈로 나오도록 사이즈를 조정해야했음 사이즈는 아래처럼 vh를 사용하고 width : 10vh; 위치의 경우 가운데로 가게 하고 싶다면 top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); 요렇게 설정해서 위치를 조정함

animation 과정없이 변형된 여러가지 상태 보여줌 요소의 현재 스타일을 다른 스타일로 천천히 변화시킴 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(@keyframes)을 정의해야 함 animation 속성 속성 설명 animation 모든 animation 속성을 이용한 스타일을 한 줄에 설정할 수 있음 animation-name 애니메이션 효과의 이름을 설정 animation-duration 애니메이션 효과를 재생할 시간을 설정 animation-delay 애니메이션 효과가 나타나기까지의 지연 시간을 설정 animation-iteration-count 애니메이션 효과가 몇 번 반복될지를 설정 animation-iteration 애니메이션의 진행 방향을 설정 animatio..

transition 시간의 흐름에 따라 스타일 속성의 변화되는 모습을 표현 ① transition ② transition-delay ③ transition-duration (절대 생략하면 X 제일 중요) ④ transition-property ⑤ transition-timing-function transition 속성 속성 설명 transition 모든 transition 속성을 이용한 스타일을 한 줄에 설정 transition-delay 전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정 transition-duration 전환(transition) 효과가 지속될 시간을 설정 transition-property 요소에 추가할 전환(transition) 효과를 설정 transition-..

transform 요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있음 - 해당 요소를 움직임 - 해당 요소를 회전시킴 - 해당 요소의 크기를 변경함 - 해당 요소를 기울임 - 해당 요소에 위의 네 가지 동작 중 원하는 동작들을 한 번에 적용시킴 CSS3에서는 transform 속성을 사용하여 2D 변형(transform)과 3D 변형(transform)을 모두 제공함 2D transform 속성 속성 설명 transform 요소에 2D 또는 3D 변형(transform)을 적용 transform-origin 요소에 변형(transform)을 적용하는 변환 중심을 설정 2D transform 메소드 메소드 설명 matrix(n,n,n,n,n,n) 6개의 매개변수로 모든 2D 변형 메소드를 한 번에 설정..

CSS table 속성 ① border ② border-collapse ③ border-spacing ④ caption-side ⑤ empty-cells ⑥ table-layout table 속성 속성 설명 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음 border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정 border-spacing 테이블 요소(th, td)간의 여백을 설정 caption-side 테이블의 캡션(caption)을 설정 empty-cells 테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정 table-layout 테이블에 사용되는 레이아웃 알고리즘을 설정 border 테이블의 테두리(border)를 설정 이 속성..

position position 속성은 HTML 요소가 위치를 결정하는 방식을 설정 ① 정적 위치(static position) 지정 방식 ② 상대 위치(relative position) 지정 방식 ③ 고정 위치(fixed position) 지정 방식 ④ 절대 위치(absolute position) 지정 방식 position 속성 속성 설명 position HTML 요소의 위치를 결정하는 방식을 설정 top 위치가 설정된 조상 요소의 위로부터의 여백을 설정 right 위치가 설정된 조상 요소의 오른쪽으로부터의 여백을 설정 bottom 위치가 설정된 조상 요소의 아래로부터의 여백을 설정 left 위치가 설정된 조상 요소의 왼쪽으로부터의 여백을 설정 z-index 겹쳐지는 요소들이 쌓이는 스택(stack)의..

display 속성 설명 block 선택한 요소를 block 레벨 요소로 나타냄 width/height적용, align적용 X inline 선택한 요소를 inline 레벨 요소로 나타냄 width/height 속성이 무시되고, content에 의해서 크기가 결정됨 inline-block 선택한 요소를 inline-block 레벨 요소로 나타냄 none 선택한 요소를 나타내지 않음 block 레벨 요소 항상 새로운 라인에 요소가 배치되고 화면 크기의 전체 가로폭을 영역으로 차지함 또한 width 속성 값을 부여해주면 그 너비만큼의 영역을 차지 inline 레벨 요소 새로운 라인에서 시작하지 않으며 다른 요소들과 같은 줄에 배치 될 수 있고 content의 너비만큼의 영역을 차지 또한 width, heigh..

background ① background-color ② background-image ③ background-repeat ④ background-position ⑤ background-attachment background 속성 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정 background-color HTML 요소의 배경색을 설정 background-image HTML 요소의 배경 이미지를 설정 background-repeat 설정된 배경 이미지의 반복 유무를 설정 background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 background-attachment 배경 이미지를 스크롤과는 무관하게 해당 위치에 고정 backgroun..

list-style 속성 ① list-style-type ② list-style-image ③ list-style-position CSS list-style 속성 속성 설명 list-style 모든 list-style 속성을 이용한 스타일을 한 줄에 설정할 수 있음 list-style-type 리스트 요소의 마커(marker)를 설정 list-style-image 리스트 요소의 마커로 사용할 이미지를 설정 list-style-position 리스트 요소의 위치를 설정 list-style-type 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함 list-style-type 속성을 이용하면 리스트에 다양한 마커(marker)를 적용할 수 있음 none 지정하지 않음 disc 검은 원형 ..

박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분 ① 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ② 패딩(padding) : 내용과 테두리 사이의 간격. 패딩은 눈에 보이지 않음 ③ 테두리(border) : 내용와 패딩 주변을 감싸는 테두리 ④ 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 마진은 눈에 보이지 않음 height와 width 속성의 이해 CSS에서 height와 width 속성을 설정할 때 그 크기가 가르키는 부분은 내용(con..