coding/html + css 100
text-indent CSS 들여쓰기 내어쓰기
css로 들여 쓰기와 내어 쓰기를 할 수 있는 text-indent 사용방법을 알아봅시다. 1. text-indent div{ text-indent : 1em; } text-indent text-indent에서 indent는 "들여쓰다"라는 뜻으로 글자 들여 쓰기라는 직관적인 속성입니다. 속성 값으로는 들여 쓰고 싶은 공간만큼 거리를 숫자로 적어주시면 됩니다. 단위는 px, em, % 등이 있습니다. - 2. text-indent 적용 예시 text-indent 적용 예시 text-indent 적용 예시입니다. 제 포트폴리오 사이트 중 일부인데요. 표시된 부분이 속성 값만큼 들여 쓰기 된 모습입니다. 1em을 주면 위의 이미지만큼 들여쓰기 됩니다. 포트폴리오를 직접 확인하고 싶으신 분은 아래 버튼을 눌러..
css 테두리 둥글게
css의 border-radius 기능을 이용해 테두리를 둥글게 만들어보겠습니다. 1. 테스트용 코드 각진 테두리 먼저 테스트용으로 코랄색의 박스를 하나 만들었습니다. 디자인은 테스트용이니 원하시는 디자인으로 꾸며주세요. 아래에 예제를 첨부해둘 테니 지금은 그냥 봐주세요~ - 2. 테두리 둥글게 div{ border-radius:50px; } border-radius 테두리를 둥글게 만드는 css 코드는 border-radius 입니다. 값으로는 원하는 만큼의 숫자를 적어주세요. 숫자가 클수록 둥근 모양이 됩니다. - div{ border-top-left-radius:50px; } border-radius 한쪽만 네 꼭짓점 중 하나만 선택해주면 한쪽만 둥글게 만들기도 가능합니다. border-top-le..
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에서 특수기호를 입력해주는 코드 ② 세미콜론..
