pogun 코딩 공부 저장소

1. CSS Animation 속성이란?: CSS animation 속성을 활용하면 HTML 요소에 다양한 애니메이션 효과를 적용할 수 있다.: 이번 글에서는 @keyframes를 사용한 색상 변경 및 위치 이동 애니메이션을 예제로 작성했습니다.1-1. 색상이 바뀌는 애니메이션: @keyframes를 이용하여 요소의 배경색이 변경되는 애니메이션을 만들 수 있다..box1 { animation-name: ani1; animation-duration: 1s;}@keyframes ani1 { from { background: red; } to { background: blue; }} 설명:: animation-name: ani1; → 적용할 애니메이션 이름을 ani1로 지정: animat..

CSS Transform란?: CSS의 transform 속성을 활용하면 요소의 크기를 조정하거나 위치를 이동시키고, : 회전하거나 왜곡하는 등의 다양한 변형 효과를 줄 수 있다.: scale, translate, rotate, skew, 그리고 transform-origin을 활용한 변형 방법을 정리하겠다!1. 크기 변형 (scale) : scale() 함수는 요소의 크기를 확대하거나 축소하는 데 사용된다..box1:hover { transform: scale(1.5); /* 요소의 크기를 1.5배 확대 */} 추가 설명: : scaleX(n): X축 방향으로 n배 확대/축소 : scaleY(n): Y축 방향으로 n배 확대/축소: scale(n, m): X축과 Y축을 각각 n배, m배 확대/축소 ..

기본 예제 코드*{margin: 0; padding: 0;}.box1{padding: 20px; margin-bottom: 10px; background:#ccc;}.box1 p{width: 100px; height: 100px; margin: 0; background:#f03;}.box1:hover p{width: 300px;}: 이렇게하면 마우스를 박스에 갖다대면 자식 박스 크기가 한번에 width: 300px로 바뀜transition 적용 후*{margin: 0; padding: 0;}.box1{padding: 20px; margin-bottom: 10px; background:#ccc;}.box1 p{width: 100px; height: 100px; margin: 0; background:#f0..

: 이런식으로 "[ ]" 대괄호 안에 사용!: .box3 클래스에 a태그 안에 target속성을 가지면 색을 넣어라.: 마친가지로 title 속성을 가진 a 태그한테 색을 넣어라.href$='hwp' : hwp로 끝나는 태그한테 밑줄을 없애라.href*='hwp' : 포함하는title^='en' : 시작하는속성 선택자선택자[속성] 선택자[속성="값"]단일 속성 선택선택자[속성="값"], 선택자[속성="값"] 속성 다중 선택선택자[속성$="값"]값으로 끝나는선택자[속성*="값"]값을 포함하는선택자[속성^="값"]값으로 시작하는

1. 배경 속성(background): CSS에서 background 속성은 요소의 배경색, 배경 이미지, 반복 여부, 위치 등을 설정할 수 있다.속성설명 background-color 배경색을 설정 background-image 배경 이미지를 설정 background-repeat 배경 이미지 반복 설정 (repeat, no-repeat, repeat-x, repeat-y) background-position 배경 이미지의 위치 지정 (center top, left bottom 등) background-size 배경 이미지 크기 설정 (cover, contain, auto, 100px 50px 등) background-attachment 배경 이미지 스크롤 여부 설정 (scroll, ..

선택자설명적용 대상그룹 선택자 : A, B, C 여러 개의 요소를 한 번에 선택 .box p, .box h3, .box a 가상 클래스 선택자 :nth-child(n) 부모의 전체 자식 중 n번째 요소가 특정 태그라면 선택 .box1 p:nth-child(2) 수열 선택자 :nth-of-type(n) 같은 타입 요소 중 n번째를 선택 .box2 p:nth-of-type(1) 1. 그룹 선택자( Group Selector ): 여러 개의 선택자를 동시에 적용하고 싶을 때 사용  예제:.box p, .box h3, .box a { background: red;}: .box 내부의 p, h3, a 태그에 빨간 배경 적용 p tag h3 tag a tag h2 t..

선택자적용 대상예제 후손 선택자 : 부모 후손 부모 내부의 모든 하위 요소 div p 자손 선택자 : 부모 > 자식 부모의 직속 자식만 div > p 인접 형제 선택자 : 형제1 + 형제2 특정 요소 바로 다음 형제 h1 + p 일반 형제 선택자 : 형제1 ~ 형제2 특정 요소 이후의 모든 형제 h1 ~ p 후손 선택자 : 부모 안의 모든 하위 요소에 적용 자손 선택자 : 직속 자식에게만 적용 형제 선택자 : 같은 부모를 가진 요소들 중 특정 위치의 형제 선택1. 후손 선택자( Descendant Selector )부모요소 후손요소 { 스타일 속성;}: 모든 하위 요소(자손 + 후손)를 선택하는 방식 : 부모 요소 안에 있는 모든 하위 요소(직접 포함된 자식뿐만 아니라 그 안의..

Margin : 바깥 여백 / Border : 테두리 / Padding : 내부 여백 / Content : 콘텐츠 영역Margin / Padding의 방향 설정 (시계 방향) : Top → Right → Bottom → Left  margin, padding의 방향 설정 (시계 방향): CSS에서는 시계 방향으로 값을 지정 순서: top → right → bottom → left.box { margin: 10px 20px 30px 40px; /* top(10px) → right(20px) → bottom(30px) → left(40px) */}.box { padding: 10px 20px 30px 40px; /* 위(10px) → 오른쪽(20px) → 아래(30px) → 왼쪽(40p..

단위설명특징px픽셀 단위 고정 크기, 웹에서 많이 사용 em부모 크기 기준가변 크기, 반응형 웹에 유용%백분율부모 크기 기준, 반응형 웹에 적합pt포인트 (1/72인치)인쇄 매체에서 사용pc파이카 (12pt)인쇄 디자인에서 사용cm, mm, in센티미터, 밀리미터, 인치실제 물리적 크기 단위, 프린트용언제 어떤 단위를 써야 할까?웹 개발 → px, em, %반응형 디자인 → em, %인쇄물 디자인 → pt, pc, in, cm, mm1. 고정 크기 단위 (절대 단위): 절대 단위(Absolute Units)는 특정 크기로 고정되며, 환경에 따라 변하지 않는다.1. cm (센티미터) .cm { font-size: 1cm;} 설명: 1cm(센티미터) 크기의 폰트 특징: 화면에서 크기를 정확히 측정하는..

CSS란?: CSS(Cascading Style Sheets)는 HTML을 꾸미는 스타일 시트입니다.활용 용도: 텍스트 스타일 (색상, 크기, 글꼴): 배경 설정 (색상, 이미지): 레이아웃 조정 (위치, 크기, 정렬)CSS 적용 우선순위 (높은 순서대로)1. !important (가장 강력함, 모든 규칙을 무시하고 적용됨)2. 인라인 스타일 (style="")3. ID 선택자 (#id)4. 클래스 선택자 (.class), 속성 선택자 ([type="text"]), 가상 클래스 (:hover 등)5. 태그(요소) 선택자 (p, h1, div 등)6. 기본 브라우저 스타일 (CSS가 없을 때 적용되는 기본값)**적용 우선순위 알아두는 게 좋음!!**CSS 적용 방법 (3가지)적용 방식특징사용 예시인라인특정..