본문 바로가기

CSS10

[CSS] 3일차 CSS (Background-Clip) Background-Clip: 요소 내에서 배경(색상 또는 이미지)가 확장되어야 하는 거리를 정의함.background-clip: border-box; 테두리까지 확장됨background-clip: padding-box; 패딩까지만 확장됨background-clip: content-box; 컨텐츠까지만 background-clip: border-box (this is default): The background extends behind the border. 테두리까지 확장 background-clip: padding-box: The background extends to the inside edge of the border. 엣지까지만 확장 .. 2024. 11. 17.
[CSS] 3일차 CSS정리 (CSS Box Model, Text 스타일링, Image, Input, Transform, animation CSS) 예전에 object-fit 이 뭔지도 잘 모르고 이미지를 정사각형에 맞게 자르기 위해 사용했었는데,여기서 무엇인지 자세히 알게 되었다. 이제는 이해하고 사용할 수 있을듯.Margin, Padding, Border (CSS Box Model)CSS에서 “Box Model”디자인과 레이아웃에 대해 이야기 할 때 사용됨기본적으로 모든 HTML 요소를 감싸는 상자.여백, 테두리, 패딩 및 실제 콘텐츠로 구성됨⇒ 내용 - 패딩 - border - 마진margin: padding: border: border: 1px solid blue;Text 스타일링font-family : 글꼴 변경.font-family: Roboto, Verdana, Arial;// roboto 사용을 못하는 경우, verdana로 돌아감//.. 2024. 11. 17.
[CSS] 2일차 css 정리 (가상클래스, 가상요소) 복습한다는 생각으로 차근차근 하는중이다.처음 안건 베지어 곡선(안써봤는데 이거 만드는 사이트도 있더라)first-of-type과 first-child의 차이점이다.그리고 float과 float clear 헷갈렸는데 이 참에 제대로 잡고 간 것 같아서 기분이 좋다.class 속성특정 요소를 대상으로 지정할 수 있음여러 요소가 동일한 클래스를 가질 수 있음공백으로 구분된 클래스 여러 개를 가질 수 있음css에서는 . 으로 작성transitiontransition: 스타일 변경 시 부드럽게 전환하게 해줌 (흔히 호버링할때 사용됨)선택자가 변화되는 것을 시간의 흐름을 줘서 변화시키는 속성transition: 0.20s 도 가능transition: 속성 시간 속도 지연시간;⇒ 이렇게 투명도 변화시간 0.20초, .. 2024. 11. 16.
[HTML/CSS] 기초 정리 index.html : 기본 페이지로 지정된게 없으면 기본으로 보여짐태그 : 미리 정의된 형식의 텍스트 정의시 사용. 공백여백 : 3부터 리스트 시작 : 리스트 숫자 거꾸로 출력됨. : 네모모양CSS 스타일 적용의 우선 순위인라인 스타일내부 스타일 시트, 외부 스타일 시트웹 브라우저 기본 스타일색을 표현하는 방법RGB : rgb(R, G, B)Hex : #0096FF16진수로 255RGBA : rgb(R, G, B, 투명도 0.5)수치값을 표현하는 방법픽셀 : 고정된 절대값퍼센트 : 상대적 측정em, rem : 환경에 따라 변하는 단위 (가변 단위)em같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됨같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이.. 2024. 11. 16.

티스토리툴바