Media query
media query는 웹사이트를 반응형으로 만들어준다. 범위를 수직선으로 나타내보면 이런식이다. 그렇다면 min일때는 어떨까? https://github.com/ehddud1006/dongpu2/commit/89ce059e1ebc277e036b948604cedad6d29d11bf
mobile friendly test
내가 만든 웹사이트가 모바일에서도 잘 작동하는지 반응형으로 잘 제작이 되었는지 테스트하는 사이트가 있다. https://search.google.com/test/mobile-friendly 모바일 친화성 테스트 - Google Search Console Search Console 정보 Search Console에서는 해킹된 콘텐츠 감지와 같은 중요한 사이트 오류를 알리고 콘텐츠가 검색결과에 표시되는 방식을 관리할 수 있도록 돕습니다. search.google.com
Z-index
z-index을 배우기에 앞서 이런 형태의 div를 생성했다. 이런식으로 red의 div안에 yellow를 포함시키면 어떻게 될까? 이런식으로 겹치게 된다. 이제 position을 absolute로 주면. 모든 div가 겹쳐진다. 순서는 red위에 yellow 위에 blue가 있을 것이다. 이제 노란색 블록과 파란색 블록을 조금씩 움직여준다. 이 stack 순서는 html 코드의 순서를 따른다. blue div가 코드순에서 제일 아래에 위치하므로 블루가 가장위에 있는 것처럼 보이는 것이다. 하지만 우리는 이러한 stack순서를 위해 html 코드의 순서까지 고려하기는 힘들다. 그래서 z-index를 사용한다. z-index를 1로 바꾸어주게되면, red가 가장위에 올라오게 된다. 세가지 div가 모두 z..
부트스트랩 Card
card Header , Body , Footer로 나눌 수 있다. card 를 만들어서 footer는 필요가 없어서 제거했다. 그리고 헤더와 바디를 채웠다. 하지만 문제점이 발생했다. 카드가 전체를 차지했다. 나는 0 0 0 이런식으로 한줄에 같이 있길 원한다. 그렇다면 어떻게 해야할까? 바로 로 감싸주면 되었다. 하지만 또 문제점이 발생했다. 크기를 줄이면 반응형으로 작동하지 않는다. 이를 해결하려면 어떻게 해야할까. 바로 부트스트랩 그리드 class="row"와 class="col-lg-4"를 사용하는 것이다. 하지만 이래도 오류가 또 발생하고 마는데. 데스크탑 크기가 아닐경우 이런식으로 이상한 배치가 되었다. 해결방법은 class="col-lg-4"와 class="col-md-6"를 같이 쓰는 것..
부트스트랩 Examples
부트스트램 Examples에 들어가면 이미 만들어져 있는 템플릿이 많다. 잘쓰면 유용할 것 같다. https://bootsnipp.com/ HTML Snippets for Twitter Boostrap framework : Bootsnipp.com A design element gallery for web designers and web developers. Find snippets using HTML, CSS, Javascript, jQuery, and Bootstrap. bootsnipp.com 또한 사용이 가능한데 로그인을 검색해보면 다른 분들이 만든 로그인코드를 볼 수 있다.
부트스트랩 Carousel
Carousel을 사용하면 slide가 넘어가는 화면을 만들 수 있게된다. 넘어가는 속도가 너무 답답하다면 변경할 수도 있는데, 디폴트가 5초였다. 위의 사진에서 data-bs-옵션=""으로 설정을 바꾸라고 하였다. 간격을 1초로 해봐야겠다. 확실히 빠르게 바뀐다. 또한 data-bs-pause="hover" 사용하면 마우스를 올리면 멈춘다. 이제 정적으로 내가 슬라이드를 넘길 수 있도록 만들 것이다. 보라색: 버튼의 아이디와 슬라이드 박스의 아이디는 같아야한다. 붉은색: 정적슬라이드 기능을 사용하기 위해서는 false로 선언해야한다, 파란색: active는 지금 화면에 보이는 슬라이드를 나타낸다.
css 배운점 + 이미지 회전
https://developer.mozilla.org/ko/docs/Web/CSS/padding padding - CSS: Cascading Style Sheets | MDN padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다. developer.mozilla.org 잘 안쓰다보니 또 까먹었다. 다시 복습하자. 또한 이미지를 회전 시키고 싶었다. 구글에는 없는게 없다. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate() rotate() - CSS: Cascading Style S..
티스토리 favicon 설정 (타이틀로고)
방학이라 블로그에 공부한 것을 기록한다고 블로그를 많이 사용하는데 로고가 까만색이라 거슬렸는데 이참에 바꿔버렸다. 근데 이게 좀 복잡한게 favicon은 ico라는 확장자명으로 변경해주어야하는데 https://convertico.com/#google_vignette ConvertICO.com - Convert PNG to ICO and ICO to PNG files This free online icons converter allows you to convert PNG to ICO files with ease. convertico.com 여기에 들어가서 1.크기 정해주고 2.변경할 png 파일(png만 가능하다) 업로드하고 3.클릭하면 된다. 그러면 이제 ico 파일을 만들었으니 티스토리에서 설정하는방법..
Font AweSome
https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 오랜만에 FontAwesome에 들어가서 아이콘을 좀 사용하려고 하는데.. 갑자기 이런게 뜨길래.. 조금 얼탔다. 그냥 무시하고 Kits에서 Free Icons를 눌러서 원하는 아이콘을 검색하면 되었다. 부트스트랩과 마찬가지로 Font Awesome 또한 사용하기 위해서는 CDN을 사용해야한다. 복사해서 head에 붙여넣어주자. 이런식으로 말이다. 이제 원하는 아이콘을 찾았다면 복사해서 붙여넣어주면 된다. 짜잔..