천천히 알아가는 세상

안녕하세요 이번에는 Bootstrap에 대해서 알아보겠습니다. 부트스트랩 (Bootstrap) 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크입니다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와줍니다. 공식 사이트 링크 사용 방법 대부분 부트스트랩을 사용할 때는 CDN 링크를 불러와서 사용합니다. 여기서는 CDN 링크를 불러오는 방법으로 진행합니다. 구글에 bootstrap라고 입력 후 Getting started로 접속합니다. 사이트로 접속하면 Guide에 대한 문서를 볼 수 있습니다. 여러 내용 중에서 2번 항목을 찾습니다. CDN links 관..

안녕하세요 이번에는 CSS에서 Animation에 대해서 알아보겠습니다. 자세하게 보고 싶으신 분은 공식 홈페이지에 있는 문서를 참조하시면 됩니다. animation mdn web docs 바로가기 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션보다 다음 세 가지 이유에서 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할 때가 있습니다. CSS 애니메이션은 frame-ski..

안녕하세요 이번에는 CSS의 display 속성에 대하여 알아보겠습니다. display 속성에 따라서 한 줄을 차지하거나 글자 크기만 차지하거나 여러 가지 형태가 가능합니다. 1. inline span 태그처럼 내용에 따라서 크기가 결정, 크기 조절 불가 span-inline1 d-inline1 div 태그의 기본 속성은 block이지만 css로 inline 속성을 부여한 상태라서 아래 이미지와 같이 div 태그도 span 태그처럼 태그 내부 요소의 크기만큼 자리를 차지합니다. 또한 inline 속성이라 다음 줄로 안 넘어가고 한 줄에 연속으로 입력이 됩니다. 2. block div 태그처럼 한 줄을 차지하는 속성, 크기 조절 가능 d-block2 d-block3 d-block4 div 태그는 기본적으로..

안녕하세요. 이번에는 transform에 대하여 알아보겠습니다. 해당 글에서는 간단한 예시 코드만 보여드릴 예정이라 자세한 내용은 아래 링크를 통해서 접속하시면 자세한 내용을 확인하실 수 있습니다. mdn web docs 페이지 바로가기 transform CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 해당 코드 외에도 다른 여러 가지 속성을 설정할 수 있습니다. skew rotate scale 2. transform 속성 transform-origin: center; 해당 개체의 기준점을 변경 함 transform: rotate(-90deg); 기준점을 기준으로 개체를 돌림 ..

안녕하세요. 이번에는 css의 z-index 기능에 대하여 알아보겠습니다. z-index 태그를 화면에 표시할 때 순서를 바꿀수 있는 속성이며, 태그의 position 값이 relative, absolute 인 경우에만 적용 가능합니다. z-index 값을 설정하지 않으면 기본 코드에 따라서 배치가 됩니다. 만약 부모의 z-index가 1이고 자식이 10이여도 부모를 따라가기 때문에 자식도 1을 받는다. 노란색 원에 z-index: 10 값을 지정하여 초록색 원 밑에 있어야할 노란색 원이 위로 배치된 모습입니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 초록색 원보다 위에 존재합니다. 파란색 원은 코드의 마지막 줄에 해당하기 때문에 z-index를 적용하지 않아도 ..