float 속성 정리

float 속성 정리 1. float 속성 - 요소를 정렬하기 위한 속성 2. float의 속성값 용어 설명 none 띄우지 않음 (기본값) left 왼쪽에 띄움 right 오른쪽에 띄움 initial 기본값으로 설정 inherit 부모 요소로부터 상속 .red { width: 100px; height: 100px; background-color: red; float: left;/* 박스를 왼쪽에 정렬함 */ } .blue { width: 100px; height: 100px; background-color: blue; float : right;/* 박스를 오른쪽에 정렬함 */ }

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 21.
• textsms

opacity 속성

● opacity 속성 - 요소의 불투명도를 설정함 - 최소 0에서 최대 1까지 가능 - 0 : 투명도100% - 1 : 투명도0%

• format_list_bulleted Front-End Study/CSS 사전
• · 2022. 10. 20.
• textsms

transition 속성

● transition 속성 - 웹 요소의 스타일 속성이 바뀜 - transition-property : 트랜지션 대상 설정 - transition-duration : 트랜지션 진행 시간 설정 - transition-timing-function : 트랜지션 속도 설정 - transition-delay : 트랜지션 지연 시간 설정 - transtion : 위 4가지의 속성을 한꺼번에 설정

• format_list_bulleted Front-End Study/CSS 사전
• · 2022. 10. 20.
• textsms

트랜지션 (Transition) 속성 정리

트랜지션 (Transition) 속성 정리 1. 트랜지션 (백과사전 바로가기) - 웹 요소의 배경 색이 바뀌거나 도형의 테두리가 원형으로 바뀌는 것처럼 스타일 속성이 바뀌는 것 2. 트랜지션의 유형 속성 설명 transition-property 트랜지션 대상을 설정 transition-duration 트랜지션 진행 시간을 설정 transition-timing-function 트랜지션 속도 곡선을 설정 transition-delay 트랜지션 지연 시간을 설정 transtion 위 4가지의 속성을 한꺼번에 설정 3. 연습문제 .tr1 { width: 100px; height: 100px; background-color: blue; border: 1px solid black; /* 너비를 2초 동안, 높이를 ..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 20.
• textsms

가상 요소

가상 요소 1. 가상 요소 - 내용의 일부만 선택해 스타일을 적용할 때 사용함 - 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(::)를 붙임 2. ::first-line 요소와 ::first-letter 요소 - ::first-line 요소 : 첫 번째 줄에 스타일 적용 - ::first-letter 요소 : 첫 번째 글자에 스타일 적용 ※ br 태그로 글을 나눌 수 있음 걱정도 별을 둘 나는 계십니다. 나는 무덤 새워 이런 버리었습니다. p::first-line { background-color: lightseagreen; } p::first-letter { background-color: lightcoral; } 3. ::before 요소와 ::after 요소 - 내용의 앞뒤에 콘텐츠 ..

• format_list_bulleted Front-End Study/HTML+CSS
• · 2022. 10. 12.
• textsms

테이블 관련 태그

● table, tr, td, th 태그 - table 태그 : 표의 기본 틀을 생성 - tr 태그 : 표의 행을 생성 - td 태그 : 표의 열을 생성 - th 태그 : 표의 제목 셀을 생성

• format_list_bulleted Front-End Study/HTML 사전
• · 2022. 10. 12.
• textsms