[CSS3] Transition 속성

Transition property 효과를 적용하고자 하는 css 속성 duration 효과가 나타나는데 걸리는 시간 timing-function 효과의 속도 linear은 '일정하게' 라는 의미 delay 특정 조건 하에서 효과 발동 1s는 '1초 후' 라는 의미 가상 선택자 : hover css에서 미리 만들어 놓은 클래스 '마우스를 올렸을 때' 라는 조건 Transition을 효과적으로 사용하기 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동 순서는 상관이 없지만, 숫자의 경우 먼저 나온 것이 duration, 뒤에 나온 것이 delay

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[HTML/CSS] 웹사이트를 재미있게 만드는 CSS3의 transform 속성들

Transform rotate(45deg); 입력한 각도만큼 회전 음수도 입력 가능 scale(2, 3); 숫자는 비율을 의미 width를 2배, height를 3배 확대 skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂 translate(100px, 200px); 선택한 오브젝트의 좌표 변경 prefix 접두사 다른 버전의 브라우저에서의 실행을 원할 경우

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[HTML/CSS] 레이아웃에 영향을 미치는 속성

display /* style.css 문서 */ p { display: inline; } a { display: block; } a { display: inline-block; } Block과 Inline 요소의 성격을 바꿀 때 사용 inline-block을 사용하면 두 요소의 성격을 모두 가짐 float Hello World Hello World /* style.css 문서 */ .left { float: left; } .right { float: right; } 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 Hello World Hello World /* style.css 문서 */ .left { float: left; } ...

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML/CSS] 박스 모델

박스 모델 구조 margin / border / padding / content margin과 padding 의 차이 margin-left border 바깥쪽에서 왼쪽에 여백을 만듦 padding-left border 안쪽에서 왼쪽에 여백을 만듦 공간이 여백을 포함한 크기로 변경되는 점 유의 margin과 padding 작성 방법 top right bottom left 순서로 한 줄에 작성 가능 (시계방향) padding도 동일

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] 가장 많이 사용되는 주요 속성

width, height // html 프로그래밍을 배워봐요! // css .paragraph { width: 500px; height: 500px; } width 속성 선택한 요소의 넓이를 설정 고정값(px), 가변값(%) height 속성 선택한 요소의 높이를 설정 고정값(px), 가변값(%) font 즐거운 웹프로그래밍! .paragraph { font-size: 50px; /* 글자 크기 */ font-family: Arial, sans-serif;/* 글꼴 */ font-style: italic; /* 글자 기울기 */ font-weight: bold; /* 글자 두께 */ } font-family 브라우저마다 지원하는 폰트가 다름 입력한 순서대로 우선순위 적용 여러개를 입력하는 이유 ? -->..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[CSS] Cascading

CSS의 우선순위를 결정하는 세 가지 요소 순서 / 디테일 / 선택자 순서에 의한 Cascading // HTML 문서 Hello World // style.css 문서 p { color: red; } p { color: blue; } 나중에 적용한 속성값의 우선순위가 높음 ( p { color: blue; } ) 디테일에 의한 Cascading // HTML 문서 Hello World // style.css 문서 header p { color: red; } p { color: blue; } 더 구체적으로 작성된 선택자의 우선순위가 높음 ( header p { color: red; } ) 선택자에 의한 Cascading // HTML 문서 color // style.css 문서 #color { color..

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms