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

트랜지션 (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

테이블 관련 태그 정리

테이블 관련 태그 정리 1. 표 만드는 태그 (백과사전 바로가기) - , , , 태그 : 기본적인 표를 제작 - 태그 : 표의 기본 틀을 제작 - 태그 : 행을 제작 - 태그 : 셀(열)을 제작 - 태그 : 표의 제목 셀을 제작 제목 셀 1행 2열 1핼 3열 제목 셀 2행 2열 2행 3열 2. colspan, rowspan 속성 - 행 or 열 합치기 - colspan 속성 : 가로로 합침 - rowspan 속성 : 세로로 합침 이름 연락처 주소 자기소개 3. 표에 제목 붙이기 - 태그일 경우, 제목 타이틀 소 제목 타이틀 이름 연락처 주소 자기소개 - 태그일 경우, 제목 타이틀 소제목 이름 연락처 주소 자기소개

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

주요 선택자

주요 선택자 1. 전체 선택자 - 스타일을 모든 요소에 적용할 때 사용 - * (별표)를 사용 HTML5 웹 프로그래밍 h1 {background-color: lightseagreen;} /* 마진과 패딩을 0으로 설정하여 브라우저 창에 바짝 붙게 함*/ * { margin: 0; padding: 0; } 2. 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일을 적용 제목 타이틀 소제목 타이틀1 내용내용내용내용내용내용내용.... 소제목 타이틀2 내용내용내용내용내용내용내용.... h2 {color: blue;} /* p 선택자를 정의하면 웹 문서의 모든 p 요소들에 스타일이 적용됨 */ p { font-size: 12px; margin-left: 20px; } 3. 클래스 선택자 - 특정 부분에 스타일..

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

주석처리

주석처리 1. HTML의 주석처리 - 로 주석처리함 2. CSS의 주석처리 - /* */ 로 주석처리함 3. Javascript의 주석처리 - // 로 주석처리함

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