본문 바로가기
반응형

⭐ 코딩 기초/HTML, CSS23

📱 CSS 미디어 쿼리 요약! 미디어 쿼리란? 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 (자연스러운 변화는 반응형, 끊기는 변화는 적응형) 브라우저 가로폭에 따라 CSS 속성이 달라지도록 함 .media { /* PC의 경우 */ background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { /* 모바일의 경우 */ background-color: yellow; } min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체 미디어쿼리 테스트 방법 크롬 개발자 도구 이용 미디어쿼리 사용시 주의사항 viewport 입력하.. 2023. 4. 10.
📐 레이아웃에 영향을 미치는 CSS 속성 (display, float, clear) display : Block과 Inline 바꿈 p { display: inline; } a { display: block; } a { display: inline-block; } inline-block은 둘 다 inline, block, inline-block에 대한 차이는 아래 글 참고 🖥️ HTML 인라인(Inline), 블록(Block) 비교하기! HTML 태그의 성격에는 두 가지가 있습니다. 바로 인라인(Inline)과 블록(Block)입니다. 이 둘의 차이점에 대해 알아봅시다! ⭐ 인라인(Inline) 특징 See the Pen blog/inline html by dobbyjang0 (@dobbyjang0) on CodePen. x programming4myself.tistory.com flo.. 2022. 9. 25.
🎞️ CSS 애니메이션(Animation) 요약! CSS로 애니메이션을 줘보자 애니메이션(Animation) 이란? 한 CSS 스타일에서 다른 CSS 스타일로 부드럽게 전환시켜 주는 것 애니메이션은 로드된 이후 바로 시행됨. 그러나 설정으로 조건에 따라 일어나게 만들 수도 한 번만 일어나게 할 수도, 아님 계속 반복하게 할 수도 있음 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임으로 구성 🐍 prefix 작성시 유의사항 : prefix 똑같이 달아야함 CSS에서 애니메이션 사용하는 방법 키프레임 작성하기 @keyframes namehere { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } } 키프레임이란 애니메이션의 중간 상태를 .. 2022. 9. 25.
🎞️ CSS 트랜스폼(Transform)과 트랜지션(Transition) 요약! 인터렉션 디자인에 유용한 트랜스폼, 트랜지션, 애니메이션 CSS 트랜스폼 ⭐ 트랜스폼(Transform)이란? .transition { transform : rotate(45deg); transform : scale(2, 3); } 특정 오브젝트를 각도를 튼다거나 크기나 위치를 변경하는 것 단독으로 사용할 경우 변형 과정이 보이거나 하지는 않음 transform : 함수명(변수); 형식으로 입력 🐍 행렬 변환? ⭐ 트랜스폼의 종류 2D 트랜스폼 ⭐ translate(tx, ty) : 지정된 크기만큼 x축과 y축 이동, trnaslateX(tx), translateY(ty) ⭐ scale(sx, sy) : 지정된 크기만큼 x축과 y축으로 확대 축소 scaleX(sx), scaleY(sy) ⭐ rotate(.. 2022. 9. 25.
📐 CSS 박스모델 요약! 박스 모델 : 박스 형태의 콘텐츠 block 요소에만 적용 가능 content, padding, border, margin으로 구성 content : 내부 컨텐츠 padding : 내부 여백 border : 테두리 margin : 외부 여백 margin과 padding 작성 방법 (비슷하므로 같이 서술) margin-top, right, bottom, left : 방향을 따로 입력 margin 값 1개 : 모든 방향에 같은 마진이 적용 margin 값 2개 : 상하, 좌우 순서로 적용 margin 값 4개 : 상, 우, 하, 좌 순서로 적용 margin : | | auto auto : display속성에서 지정한 값에 맞게 적절한 값을 자동으로 지정함 🐍 화면 가운데 배치 하려면 left와 right를 .. 2022. 9. 25.
📐 CSS 배경 속성 요약! CSS 배경 관련 속성 background-color - 배경 색 지정하기 background-image - 배경 이미지 지정 background-image: url('images/bg3.jpg') 배경 이미지 지정, 상대경로, 절대경로, url 사용 가능 🐍 background-image와 img 태그 차이점 img 태그 : seo, 성능, 웹 접근성 좋다 백그라운드 이미지 css : 디자인적으로 조작할 때 더 편리 background-clip - 배경 적용 범위 조절하기 background-clip : border-box | padding-box | context-box border-box : 박스 모델의 가장 외곽인 테두리까지 적용 padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 .. 2022. 9. 25.
반응형