CSS

CSS - [ Bootstrap ]

부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크이다. 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다 https://getbootstrap.com/ 참조 메인 화면에서 Get started 클릭 부트스트랩을 사용하려면 미리 만들어져있는 css와 js 파일이 필요하다. CSS는 CDN 방식으로 연결하면 되고, js는 Bundle과 Seperate 2가지 방식이 있다. 부트스트랩은 외부에서 Popper js라는 패키지를 가지고와서 활용하고 있다. Bundle은 Popper 패키지를 부트스트랩과 묶어서 제공하는 것이고, Seperate는 분리해서 제공하는 것이다. 만약 Popper js를 이미 프로젝트에서 사용하고 있다면 Bund..

CSS - [ 3D 애니메이션 (요소 뒤집기) ]

마우스를 올리면 요소가 뒤집히고 뒤에 있는 요소의 내용이 출력되도록 3D 애니메이션을 설정해보자. 우선 Html에 아래와 같이 앞면을 나타낼 요소와, 마우스를 올리면 나타날 뒷면을 나타낼 요소를 만들어준다. CSS에서 우선 요소를 감싸고 있는 container에 가로 세로 너비를 지정해주고(뒤에서 container에 hover 가상 선택자를 주고 container에 마우스를 올리면 3D 애니메이션 효과가 나타나도록 할건데, block 요소이므로 너비를 지정해주지 않으면 item의 범위 밖에서도 마우스를 올리면 효과가 나타나버림!), 원근감을 느낄 수 있도록 perspective 속성을 준다. 그리고 item에는 크기를 지정해주고 border-box로 box-sizing을 변경 후 요소가 뒤집혔을 때 뒷면..

CSS - [ YouTube iframe API ]

브라우저에 유튜브 영상 출력해보기! https://developers.google.com/youtube/iframe_api_reference?hl=ko API 문서 참조 우선 영상이 출력될 요소를 구성해보자. 영상은 일반적으로 16:9의 비율이므로 그에 맞춰보겠다. 먼저 Html에 item과, item을 감싸고 있는 container 요소를 만든다. 그리고 css에서 container 요소에 width 값을 주고, item 요소에 % 단위의 width와 patting-top를 주면 그에 맞는 비율의 요소 크기가 그려진다. 즉 아래에서 width : padding-top 이 100:56.25 이므로 16:9의 비율로 만들어졌다고 보면 된다! youtube ifram을 만들 때는 아래와 같이 html에 요소..

CSS - [ position 이용 가운데 정렬 ]

1. 수직 가운데 정렬 아래와 같이 container 안에 item 클래스를 가진 div 태그를 만든다. 그리고 css로 크기와 색상을 준다. 그러면 아래와 같이 출력된다. 요소를 수직 가운데 정렬 할 때에는 정렬할 요소의 높이를 지정하고, position absolute값, top bottom 0 값, 그리고 위 아래 margin을 auto 값을 준다. 정렬할 요소에 position 값을 주었으므로, 부모 요소에도 position 값을 설정해주어야 한다.(static 제외) 부모 요소에는 position relative 값을 준다. 이를 정리해보면 -> item의 position이 absolute 이므로 container를 기준으로 위치가 변경되게 된다. top과 bottom에 0을 주었으니 아래 사진..

CSS - [ Google fonts / Google Material Icons ]

1. Google fonts 구글에 google fonts 라고 검색해서 들어가면 여러 폰트들을 확인할 수 있다. 여기서 nanum 을 검색해서 나눔 고딕체를 선택한다. (폰트는 생각보다 용량이 크므로 하나의 페이지에서 폰트를 너무 남발하지 않는게 중요하다. 사용할 폰트만 명시해서 사용하도록 하자!) 여기서 400과 700 두께를 select하고 link 태그를 복사해서 index 파일에 붙여넣기 해준다. index.html 파일에 넣을 때 main.css 삽입 링크보다 위에 넣어주도록 하자. 여기서 끝!이 아니라! 링크 태그 아래쪽에 있던 font-family 를 복사해서 css파일의 body 태그 선택자 안에 넣어줘야 완성이다. 폰트는 상속되므로 body태그에 적용해주면 안의 태그들에 모두 적용될 것..

CSS - [ 속성(변환 Transform) ]

이제 css의 변환 효과에 대해 살펴보자. transform : 요소의 변환 효과 지정 속성. 띄어쓰기로 구분해서 [ transform: 변환함수1 변환함수2 변환함수3 ...; ] 와 같이 여러 함수를 한번에 사용할 수 있다. transform에 사용할 수 있는 변환 함수는 크게 2D 변환 함수와 3D 변환 함수로 나뉜다. 각각 살펴보자! 2D 변환 함수 translate(x, y) : x축과 y축 이동. translateX(x) 나 translateY(y)와 같이 한 쪽 축으로만 이동시킬 수 있다. 참고로 함수의 소괄호 사이에 작성하는 x, y 값 등을 인수(=인자, Argument) 라고 한다. scale(x, y) : 크기를 배로 늘려줌. rotate(deg) : 요소를 회전시킴(각도). skew..