부트스트랩? Twitter에서 개발한 HTML, CSS, JavaScript로 이루어진 오픈 소스 프레임워크 입니다. 웹 페이지 레이아웃, 버튼, 폼, 타이포그래피 등의 다양한 UI 컴포넌트를 쉽게 구현할 수 있습니다. 반응형 웹 디자인을 지원하므로 모바일 기기에서도 웹 페이지가 적절하게 표시됩니다. 오픈 소스로 배포되어 있으며, 무료로 사용할 수 있습니다. 부트스트랩을 이용하면 빠르고 쉽게 깔끔하고 모던한 UI를 만들 수 있습니다. 특징 반응형 웹 디자인 지원 : 모바일 기기에서도 적절하게 웹 페이지가 표시되도록 반응형 웹 디자인을 지원합니다. 다양한 UI 컴포넌트 : 레이아웃, 버튼, 폼, 타이포그래피 등 다양한 UI 컴포넌트를 제공합니다. 쉬운 사용성 : 문서와 예제 코드가 풍부하게 제공되어, 쉽게..

반응형 웹 디자인 다양한 크기의 디바이스에서 일관된 사용자 경험을 제공하기 위한 디자인 방법론 입니다. 그리드 레이아웃, 플렉스 박스, 미디어 쿼리 등의 CSS 기술을 사용합니다. 미디어 쿼리 사이트에 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하는 기술 뷰포트 모바일 기기에서 웹 페이지를 볼 때, 실제 화면에 보이는 영역을 말합니다. 모바일 기기에서는 뷰포트가 다양한 크기로 나타날 수 있으므로, 웹 페이지가 다양한 뷰포트 크기에 대응할 수 있도록 반응형 웹 디자인을 구현해야 합니다. 브라우저에서는 기본적으로 뷰포트가 설정되어 있습니다. 그러나 브라우저마다 뷰포트의 크기가 다를 수 있으므로, 뷰포트를 설정하는 것이 중요합니다. ✅ VS Code에서 만드는 기본 설정이자 가장 많이..

그리드 레이아웃 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 입니다. 2차원 방식이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식 입니다. 그리드 박스는 '그리드 컨테이너'와 '그리드 항목'으로 구성 됩니다. 반응형 디자인에도 유용하게 사용될 수 있으며, 미디어 쿼리와 함께 사용하여 화면의 크기에 따라 격자의 크기와 요소들의 배치를 변경할 수 있습니다. 구성 요소 행(row) : 가로줄 열(column) : 세로줄 그리드 셀 : 행과 열이 만나 이루어지는 하나의 공간 그리드 갭 : 그리드 셀과 그리드 셀 사이의 간격 그리드 아이템 : 그리드 셀 안에서 표현되는 컨텐츠 그리드 컨테이너 : 최상위 부모 요소 기본 속성 display 속성 그리드 레이..

플렉스 박스 레이아웃은 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 입니다. 1차원 방식이란, 가로(row) 혹은 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식을 말합니다. 플렉스 박스 레이아웃 구성요소 주축(main axis) : 플렉스 박스의 진행 방향과 수평한 축을 의미 교차축(cross axis) : 주축과 수직한 축을 의미 플렉스 컨테이너 : display 속성값으로 flex나 inline-flex가 적용된 요소를 의미 플렉스 아이템 : 플렉스 컨테이너와 자식 관계를 이루는 태그 구성 요소를 의미 레이아웃 확인 방법 플렉스 박스 레이아웃의 기본 속성 display 속성 display: flex; / inline-flex; 👉 flex는 적용된 요소의 다음 요..

구글 폰트 적용하기 🔵 글꼴은 시스템에 기본으로 설치된 것도 많지만 실무에서는 시스템에 없는 글꼴이면 웹 폰트 방식으로 추가해서 사용합니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 나눔 펜 스크립트 폰트 사용 하기 1. CSS 파일 내에서 폰트 파일 경로 지정 @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 2. font-family 속성 지정 body { font-family: 'Open Sans', sans-serif; } 아이콘 폰트 사용하기 🔵..

CSS 변환 효과는 요소를 회전, 이동, 크기, 기울기 조절 등의 변환을 적용하는 것을 의미합니다. transform 속성 2차원 좌표 이동하기 🔵transform: translate() 함수는 요소를 현재 위치에서 일정 거리만큼 이동하고 싶을 때 사용 합니다. translate(x, y) : x축과 y축을 동시에 이동 합니다. translateX() : x축으로 이동 합니다. translateY() : y축으로 이동 합니다. 2차원 확대 또는 축소하기 🔵transform: scale() 함수는 요소를 확대하거나 축소할 수 있습니다. transform: scaleX(n) : x축 방향으로 n배 확대 transform: scaleY(n) : y축 방향으로 n배 확대 transform: scale(n, n)..

애니메이션 속성은 전환 효과 속성과 함께 CSS3에서 새로 추가됐는데, 전환보다 더 정확하고 부드럽게 제어 가능합니다. 키 프레임 정의하기 애니메이션 키 프레임은 애니메이션 동작을 구성하는 단계들을 정의하는 것 입니다. 요소가 어떤 상태에서(from) 어떤 상태로 변하는지(to)를 정의 합니다. @keyframes 키프레임명 { from { } to { } } @keyframes 키프레임명 { 0% { } 50% { } 100% { } } animation-name 속성 animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정 합니다. animation-name: 키프레임명; animation-duration 속성 애니메이션 지속 시간 설정 animation-duration: 지속시간;..

전환? 요소(element)의 속성(property)이 변경될 때부드럽게변경되는 효과 제공 예) 요소의 배경색이 변경될 때 바로 변경되는 것이 아니라 일정 시간이 지나면 서서히 변경되는 효과를 줄 수 있습니다. 전환 효과가 없는 경우 뭔가 허전한 느낌. 전환 효과 적용한 경우 아까보다 부드러운 느낌 트랜지션과 속성 transition-property : 트랜지션의 대상 지정 transition-duration : 트랜지션을 실행할 시간 지정 transition-delay : 트랜지션의 지연 시간 지정 transition-timing-function : 트랜지션의 실행 형태 지정 transition : 속성 한꺼번에 지정 📌 전환 효과는 반드시 transition-property 속성과 transition..

1번 - 그림자 효과 위의 이미지를 CSS만 사용해서 아래의 이미지처럼 표시 하세요. 이미지 테두리에 1px짜리 회색(#ccc) 실선을 그립니다. border-radius 속성을 사용해서 사각형을 원형으로 변경 box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가 합니다. 내가 작성한 코드 2번 - 화면 배치 태그 안에 태그 4개와 태그 1개가 포함되어 있습니다. 해당 화면처럼 article 요소를 격자 형태로 배치 하세요. section의 폭은 800px article요소의 너비 350px, 높이 200px, 마진과패딩 10px article요소의 border 라인은 두께 1px, 색상은 (#ccc) 실선을 그립니다. 내가 작성한 코드 강아지 용품 준비하기 강아지 집 강아지가 편히 쉴 ..

⭐위치 속성으로 HTML 요소 배치 위치 속성은 요소를 상대적으로 또는 절대적으로 배치할 수 있습니다. postion 속성 👉 position은 요소의 위치를 지정하는 데 사용되는 속성 position 속성을 지정하면 top, right, bottom, left 속성을 이용하여 요소의 위치를 조정할 수 있습니다. 각 속성은 요소를 기준으로 지정된 거리만큼 이동시킵니다. position 속성과 함께 사용되는 속성으로 z-index가 있습니다. z-index는 요소의 쌓임 순서를 지정하는데 사용됩니다. 값이 높을 수록 위에 쌓이게 됩니다. position 속성은 레이아웃을 구성하는 데 매우 중요한 역할을 합니다. 특히 absolute와 fixed 값은 요소를 자유롭게 배치할 수 있도록 도와줍니다. 그러나 이..