[CSS]

ani transition (애니메이션효과) html DOCTYPE html> Document css .box { /* 가로 */ width: 100px; /* 세로 */ height: 100px; /* 배경색 */ background-color: blue; /* 외곽선 */ border: 1px solid black; /* 바깥여백(축약식) - 중앙정렬 */ /* margin: 상하 auto */ margin: 20px auto; /* TODO: 애니메이션 추가 */ /* transition-property: 애니메이션효과를 부여할 속성 나열 */ /* 사용법 : trasition-property: 속성, 속성2 ... */ transition-property: width, height; /* 지속시간..

• format_list_bulleted Css
• · 2023. 8. 16.
• textsms

[CSS] 홈페이지 만들기

기본 속성들 padding(안쪽 여백) margin(바깥 여백) width(가로) height(세로) float(배치) clear(float 초기화) Homepage Layout html DOCTYPE html> Document 사이트 제목 사이드바 본문 꼬리말 css /* 여백 초기화 */ * { padding: 0; margin: 0; } /* 전체 페이지 크기 정하기 */ #container { /* 가로 */ width: 1200px; /* 중앙 정렬 auto (오른쪽/왼쪽 여백을 똑같이 정함(중앙 정렬이 됨))*/ /* 사용법 : margin: 상/하 auto */ margin: 20px auto; } /* 머리말 */ #header { /* 세로 */ height: 120px; /* 임시 */..

• format_list_bulleted Css
• · 2023. 8. 14.
• textsms

[CSS] position

inline html DOCTYPE html> Document 대상 객체 대상 객체 대상 객체 css /* 자동 정렬 : ctrl + alt + l */ /* inline-block(인라인블럭) : div 속성 + 줄바꿈 없음(속성) */ /* 활용 : 세로배치 -> 가로배치 디자인 적용하고자 할때 사용 */ /* 예) ul - li(block 속성, 세로메뉴) -> 가로메뉴(위의 속성 고려) */ .box { /* 가로크기 */ width: 100px; /* 세로크기 */ height: 100px; /* 배경색 */ background-color: red; /* 바깥여백 */ margin: 20px; /* display 속성 */ display: inline-block; } .box2 { /* 가로크기..

• format_list_bulleted Css
• · 2023. 8. 11.
• textsms

[CSS]특수 선택자, 가상 선택자 글꼴, 선택자 우선순위, div ,span

exam_train html DOCTYPE html> Document 열차표 예매 열차번호 출발 도착 출발시간 특실 일반실 소요시간 199 수원 대전 10:00 01:44 230 수원 대전 11:30 01:38 css table { /* 테이블 선사이 간격 붙이기 속성 */ border-collapse: collapse; /* 가로 크기 */ /* 화면단위 : px(고정크기), %(반응형단위) , vw(가로, viewport width), vh(세로, viewport height) */ /* viewport : 모니터의 화면(pc 모니터에 맞추어 보임, 테이블에 맞추어 보임) */ /* 예) 코딩 시 100vw(가로) -> pc , 테블릿 등에서 적절하게 화면을 맞추어 줌 */ width: 610px; ..

• format_list_bulleted Css
• · 2023. 8. 9.
• textsms

[CSS] box collapse schedule

box exam 8 html DOCTYPE html> Document 이용요금 행복카드 소지자는 본인 확인 후 입장료 30% 할인 만 5세 이하, 만 65세 이상 무료 단체는 30인 이상 30% 할인 단체 관람 시 인솔 교사는 무료 css /* 문제 풀이 : 예제 (모든 태그에 박스 적용하기) */ body { /* 사용법 : border: 선두께 선스타일 선색상 */ border: 1px solid red; } h3 { border: 1px solid blue; } p { border: 1px solid green; } ul { border: 1px solid red; } li { border: 1px solid blue; } box exam 9 html DOCTYPE html> Document 이용요..

• format_list_bulleted Css
• · 2023. 8. 8.
• textsms

[CSS] box, border, padding, margin, width

짝수 홀수 행 색상 html DOCTYPE html> Document 첫 번째 두 번째 세 번째 네 번째 다섯 번째 여섯 번째 일곱 번째 css /* 구조 선택자 */ li { /* 목록 앞에 점 없애기 */ list-style-type: none; } /* 2n : 짝수, 2n+1 : 홀수 사용법: 선택자:nth-child(수식) { 속성:값; } */ li:nth-child(2n) { /* 10진수 : 1 ~ 9까지 , 16진수: 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수: 0,1 */ /* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */ /* 색깔 지정 : red, (#16진수 6자리, 색상표 표기) */ background-color: #ff00..

• format_list_bulleted Css
• · 2023. 8. 7.
• textsms