데브마우스

부트스트랩 공식 홈페이지에서 제공하는 예제 사이트입니다. 네비게이션 바, 푸터, 헤더등 사이트 제작에 필요한 요소가 있습니다. 사이트 제작의 예시 같은 '사용자 지정 컴포넌트'도 있습니다. 부트스트랩 5.3 한글 한글 공식 문서 사이트 https://getbootstrap.kr/docs/5.3/getting-started/introduction/ Bootstrap 시작하기 Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요. getbootstrap.kr 일부 번역되지 않은 부분이 있습니다. 한글 예시 사이트 https://getbootstrap.kr/docs/5.3/examples/ 예시 프레임워크의 일부를 사용하는 것부터 사용자 지정 ..

Font Awesome이란 무엇인가요? Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators. Font Awesome은 인터넷의 아이콘 라이브러리와 툴킷이며, 수백만명의 디자이너, 개발자 그리고 컨텐츠 크리에이터들에게 사용되고 있습니다. 출처: Font Awesome 공식 홈페이지 Font Awesome 첫페이지의 소개처럼 Font Awesome을 사용하여 웹 사이트를 더 예쁘게 만들 수 있습니다. 무료 사용자도 사용할 수 있는 무료 아이콘들이 있습니다. 회원가입을 하셔야 사용이 가능합니다. 아래 사이트가 공식 홈페이지입니다. https://f..

CSS 선택자란 무엇인가요? CSS에서 원하는 스타일을 적용시키기 위해서, 요소를 선택해야합니다. CSS에서 요소를 선택하는 방법은 여러가지 방법이 있습니다. CSS를 잘다루는 사람 일수록 선택자를 잘 다뤄서 CSS의 코드의 길이를 짧게 할 수 있습니다. CSS3 선택자 종류 사용 방법 설명 전체 선택자 * {속성 선언;} 모든 태그에 스타일을 적용합니다. 타입 선택자 태그 {속성 선언;} 지정한 태그에 스타일을 적용합니다. 클래스 선택자 .클래스 이름 {속성 선언;} 지정한 클래스에 스타일을 적용합니다. 아이디 선택자 #아이디 {속성 선언;} 지정한 아이디에 스타일을 적용합니다. CSS3 복합 선택자-작성중 구분 조합 방법 설명 후손 선택자 선택자 A 선택자 B 선택자 B가 선택자 A에 반드시 포함되어..

CSS의 단위 현실 세계에서는 cm, m, inch 등 다양한 단위가 있습니다. 그리고 단위에는 이것을 기준으로 1cm라고 한다는 등 기준이 있습니다. 그렇다면 CSS에서는 어떤 단위가 있으며 어떻게 기준을 잡을까요? CSS에는 총 4가지 기준이 있습니다. px(픽셀) % em,rem vw,vh px(Pixel, 픽셀) 픽셀은 고정된 사이즈를 의미합니다. 반응형이 아니며 사용자가 웹 브라우저의 크기를 줄이거나 늘려도 크기를 그대로 유지합니다. This is parent div This is child div /* style.css */ .parent { height: 200px; width: 300px; border: 1px solid red; } .child{ height: 400px; width: 6..

상속이란 무엇인가요? 일상생활 속에서 상속이란 자식이 부모의 재산을 물려받는걸 뜻합니다. CSS에서는 부모 스타일이 자식 까지 영향을 미치는 것을 상속이라고 정의합니다. 상속되지 않는 속성도 inherit이라는 속성 값을 사용하여 강제로 부모로부터 자식에게 상속시킬 수 있습니다. 단, 자식을 제외한 후손(손자)에게는 적용이 되지 않으며, 모든 속성이 강제 상속되지는 않습니다. 상속의 주의점 .redbox {color:red}는 모든 후손에게 상속 시킬 수 있습니다. 하지만 display:flex는 자기 자신과 자식을 꾸미는 요소이기에 상속시킬 수 없는 속성입니다. 즉 모든 후손에게 까지 적용이 되어야 상속이라 할 수 있습니다.

CSS란 무엇인가요? CSS란 Cascading Style Sheets의 약자로써 웹 페이지를 꾸며주는 연쇄 스타일 시트입니다. 1996년 CSS버전1이 출시되었으며 글 작성 시점에서 CSS의 최신버전은 CSS3입니다. 왜 CSS를 사용하나요? 초기의 웹 페이지는 HTML만 있었습니다. 그러다보니 문서를 아름답게 꾸밀 수 없었습니다. 웹 문서를 더 아름답게 꾸미기 위해 CSS를 사용했습니다. 문서 작성을 HTML이 담당한다면 디자인은 CSS가 담당합니다. CSS 적용 방법 CSS는 HTML 파일 내부에 적용하거나 별개의 .CSS 파일을 만들어서 적용시킬 수 도 있습니다. 적용 방법 예시 파일 내부의 HTML 태그에 적용 CSS를 HTML 태그에 적용 파일 내부의 파일 외부의 별개의 파일로 적용 CSS 적..

보호되어 있는 글입니다.

부트스트랩이란 무엇인가요? 부트스트랩은 CSS 프레임워크입니다. CSS와 JS를 통하여 미리 개발되어 있습니다. 덕분에 개발자가 직접 CSS를 작성하지 않아도 미리 자바스크립트와 CSS를 활용하여 작성된 프레임워크를 제공하며 더 빠르게 개발할 수 있습니다. 부트스트랩은 상업적 이용이 가능합니다. 부트스트랩은 모바일기기나 컴퓨터처럼 해상도가 큰 다양한 환경에서 사용할 수 있도록 반응형 웹에 특화되어 있습니다. 부트스트랩을 사용하는 방법으로, CDN을 통해 HTML 파일에 부트스트랩 링크를 넣어서 사용할 수도 있으며 부트스트랩 파일을 다운로드해서 서버와 함께 제공할수도 있습니다. 부트스트랩 사용시 개발자들끼리 같은 버전을 사용해야 하는 이유는 뭔가요? 다른 사람과 협업하거나 교재를 보고 공부중이시라면 같은 ..