본문 바로가기

개발일지157

[11] Text 스타일링하기 구글 폰트 사이트https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com  구글 폰트 사용하기 실습 텍스트1 텍스트span텍스트 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2024. 11. 20.
[10] Margin, Padding, Border(CSS Box Model) CSS에서 "Box Model"이라는 용어는 디자인과 레이아웃에 대해 이야기할 때 사용한다.CSS Box Model은 기본적으로 모든 HTML 요소를 감싸는 상자이다. 여백, 테두리, 패딩 및 실제 콘텐츠로 구성된다.아래 이미지는 상자 모델을 보여준다.padding은 음수로 줄 수 없지만, margin은 음수로 줄 수 있다. padding과 margin의 차이이다. 2024. 11. 20.
[9] Float CSS & Clear CSS float css 속성float CSS 속성은 컨테이너의 왼쪽 또는 오른쪽에 요소를 배치하여 텍스트 및 인라인 요소가 주위를 둘러살 수 있도록 합니다.요소는 페이지의 정상적인 흐름에서 제거되지만 여전히 흐름의 일부로 남아 있습니다. Float 속성을 이용한 Layout 구현float css는 여전히 레이아웃에 사용할 수 있지만 요즘에는 웹 페이지에서 레이아웃을 만들기 위한 훨씬 강력한 도구 Flexbox 및 Grid를 사용합니다. 실습container는 주로 css에서 레이아웃과 스타일을 정의하기 위해 사용되는 클래스이다. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor inc.. 2024. 11. 20.
[8] 가상 클래스(의사 클래스) & 가상 요소(의사요소) 가상 클래스(pseudo-class)별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있다.가상 요소(pseudo-element)가상 클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능하다.1. 가상 클래스(의사 클래스) = pseudo-class 실습 Mouse Hover A B C " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스-> before와 after를 자주 사용함 2024. 11. 19.
[7] A 버튼 만들기(class 속성, transition), B버튼 만들기, C 버튼 만들기(box-shadow) A 버튼 만들기(class 속성, transition) class 속성 C 버튼(box-shadow)실습버튼에 마우스를 갖다대면 흐려지고, 버튼을 클릭하면 색상이 변경되는 모습을 확인할 수 있다.c버튼은 그림자가 생기는 것을 확인할 수 있다./* transition: background-color 3s, color 0.15s;설명 : CSS에서 요소의 스타일이 변경될 때, 애니메이션 효과를 설정하는 데 사용됩니다.(1) transition 속성CSS 속성의 변화에 부드러운 전환 효과를 적용(2) background-color 3sbackground-color 속성의 변화에 대해 애니메이션 효과를 적용합니다.전환 시간이 3초로 설정(3) color 0.15scolor 속성(텍스트 색상)의 변화에 대해 애니.. 2024. 11. 19.
[6] CSS 속성과 수치 값 표현 방법 CSS 속성 수치 값 표현 방법 2024. 11. 18.

티스토리툴바