CSS

자신이 설정한 요소의 크기에 다운 받아 온 배경이미지를 넣었을 때 이미지의 크기가 맞지 않아 깨지는 현상이 있다 이 때 background-size를 사용하여 배경이미지의 크기를 적합하게 설정할 수 있는 속성이다.배경을 요소를 다 채울 수 있게 최대 크기에서 이미지를

css float 정리

CSS (Cascading Style Sheet) 에서 cascading 의 의미는 "종속 , 계단식 , 위에서 아래로 흐르는" 이라는 의미를 가지고 있다 이 말은 css 코드에 순서가 있다는 의미를 가지고 있다는 말도 된다. 계단식 (cascade) 특징은 동일한 우

1. Box Model

position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. 요소를 배치하기 위해 사용되는 속성값으로는 static , relative , absolute , fixed , sticky 5가지 방법이 있다.static은 모든 html 요소의 기본값이다. rela

flextbox는 Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지 않은 경우에도 복잡한 계산 없이 문서 내의 요소간 공간을 배치, 정렬 ,분산을 자동으로 해준다.선언은 정렬을 하고자하는 요소들을 지니고 있는 부모요소

1. media query 요즘에는 컴퓨터뿐만 아니라 핸드폰,태블릿pc 등 여러가지 화면의 크기를 가진 전자기기들로 홈페이지를 보게된다. 이 때 홈페이지가 크기에 맞게 변형 되어야 사용자가 보기에 무리가 없다. 크기에 맞게 변형할 수 있게 만드는 것이 media qu

Typography 란 타이포그래피는 문자 배열, 문자 디자인과 문자 상형을 수정하는 기술과 예술이다. 상형문자는 창조되고 다양한 일러스트레이션 기법으로 수정된다. 글자의 정돈은 서체의 선택, 포인트 사이즈, 선 길이, 선 간격, 문장 사이의 간격 맞춤과 단어 사이의

😈 직접 가져와 사용하는 방법 1. fonts.google.com 접속하기 2. 원하는 스타일 폰트 선택 ![](https://images.velog.io/images/bohun-kim/post/662a3027-2d4c-42bf-8cc3-41a539e70aa8/

transtion 과 animation 효과를 사용하면 일정 시간에 걸쳐 속성값을 부드럽게 변화시킬 수 있는데 이것을 제어하는 것을 가능하게 해주는 효과이다.트랜지션은 스스로 작동되지 않는다 (1. html의 가상클래스를 이용한 :hover , :active | 2.

box shadow는 요소의 테두리를 감싼 그림자 효과를 추가하는 속성이다. horizontal offset : 수평방향으로 움직이며 수치를 + 를 줄수록 그림자가 상자 오른쪽으로 생성되고 - 는 그 반대로 생성된다.horizontal offset : 수직방향으로 움직

css 의 선택자

프로젝트를 하다가 지정된 컨테이너에 글자 수가 넘어갔을 때 숨길 수 있는 방법에 대해 알아보았다. 사용해야할 속성으로는 text-overflow , overflow , white-space 이다. text-overflow : 공백 문자를 처리하는 법을 지정하는 속성ov

가상 요소 선택자는 CSS에서 특정 요소의 가상 요소를 스타일링하기 위해 사용되는 선택자로 이 선택자는 HTML에 직접적으로 표시되지 않는 가상 요소를 대상으로 스타일을 적용할 수 있다.시맨틱한 구조 유지: 가상 요소를 사용하면 HTML에 직접적으로 추가하지 않고도 디

사용자가 텍스트를 선택할 때 나타나는 선택 영역(마우스로 텍스트를 드래그 행위)의 스타일을 지정하는데 사용되는 CSS 선택자이다.일반적으로 이러한 선택자를 사용하여 텍스트가 선택될 때의 배경색, 텍스트 색상 등을 사용자 정의할 수 있다.