coding/html + css 98
og 태그 미리보기 이미지 넣기
og 태그를 이용해 링크의 미리 보기 이미지, 설명, 제목을 넣어보겠습니다. 1. og 태그 og 태그를 이용한 미리 보기 화면 og 태그가 무엇이냐면 위의 이미지처럼 카톡이든 어디서 링크를 보낼 때 미리보기로 나오는 이미지, 제목, 설명을 설정해주는 태그입니다. html에 메타태그로 추가해주시면 됩니다. - og 태그 사용 이 메타태그 3줄을 복사해서 og 이미지 넣기 위의 코드처럼 넣었는데 이미지가 뜨지 않으신다면 flask 설치가 안되어있어서 그럴 수도 있습니다. flask를 설치해주시거나 간단하게 위의 예시처럼 이미지 주소를 그냥 적어주세요. 이상으로 og 태그를 이용해 미리 보기 이미지를 넣는 방법을 알아보았습니다. 도움이 되셨다면 공감과 댓글, 구독을 부탁드립니다. [같이 보면 좋은 포스팅] ..
css 변수 사용 방법
홈페이지 제작 시 컬러, 패딩, 마진 등등 반복해서 같은 값을 사용해야 하는 경우가 많습니다. 여기에 변수를 사용하면 웹 페이지의 통일성을 유지하는 것은 물론이고 유지보수도 손쉽게 관리할 수 있습니다. :root :root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만, 벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다. 그런데 변수의 범위를 전체에 적용하기 위해 html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요. ▼ 자세한 설명은 아래 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사..
html 특수기호 코드 -엔티티코드(entity code)
코드 작성시에 특수기호를 사용해야하는 경우가 있습니다. 특수기호는 그대로 쓰면 오류가 생길수도 있는데요 코드로 어떻게 표현하는지 알아봅시다. 1. 자주 사용하는 특수기호 코드 특수기호 엔티티코드 의미(영어) 의미(한글) non-breaking space 공백 > greater than 보다 크다 & & ampersand 그리고(앰퍼샌드) " " double quotation mark 큰 따옴표 ' ' single quotation mark(apostrophe) 작은 따옴표 자주 사용하는건 이정도이고 나머지는 그때그때 검색해서 찾아보시면 됩니다. 주의하실점은 맨 끝에있는 ;(세미콜론)까지가 한 묶음입니다. 꼭 같이 적어주셔야해요. 엔티티 코드 ① html에서 특수기호를 입력해주는 코드 ② 세미콜론..
css flexbox 게임으로 배워보자
지난번 포스팅에서 select 게임을 했던 것 기억하시죠? 이번에는 flexbox 게임을 가져와봤습니다. 1. flexbox froggy flexbox는 css에서 그리드를 조절해주는 스타일입니다. display 속성 값으로 사용하고 여러 가지 옵션을 넣어주면 편리하게 사용할 수 있어요. 저도 아직 배우는 중이라 정리가 된다면 이것만 따로 포스팅해보겠습니다. 오늘은 그 옵션을 익혀볼 게임인 flexbox froggy을 소개해드립니다. 보이시는 것 처럼 개구리를 연잎 위로 올려주면 됩니다. 첫 문제인만큼 아예 정답도 알려줍니다. justify-content은 아이템의 배치에 대해서 설정할 수 있는 속성이에요. flext-end는 끝에서 정렬 가로로 되어있으니 오른쪽 정렬이 되겠죠? 그런 속성 값입니다. 자..
css 선택자 게임
css를 처음 접하시는 분들은 Select. 즉, 선택자를 잡는 것이 어려울 거예요. 저도 처음에는 냅다 외우기만 해 가지고 이해하 하나도 안 됐었거든요. 그런데 이게 게임으로 쉽게 이해하는 방법이 있다고 합니다. 1. 접시 선택하기 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 접시를 선택하면 되는 게임이에요. 보기에는 어려워 보이는 데 막상 하면 생각보다 쉽답니다. 오른쪽에 보시면 설명도 나와있어서 살펴보시면 좋아요. 영어 기는 하지만 그래도 대충 해석이 없어도 알 수 있어요. 이렇게 마우스를 올리면 자기가 어떤 태그 인지도 알려줘요 귀엽죠. 접..
