본문 바로가기

분류 전체보기89

HTML/CSS] a 태그 활용하기 '링크'는 클릭만 하면 연결된 주소로 이동을 해주는 웹문서의 기능입니다. 텍스트를 클릭해서 해당 페이지로 이동할 수도 있고, 이미지를 클릭해서 해당 링크로 이동할 수 있습니다. 그럼 본격적으로 태그, href 속성을 이용해서 링크를 만들어 보겠습니다. 링크 텍스트 1. 태그의 속성 텍스트 · target: 링크한 내용이 표시될 위치를 지정 · download: 링크한 내용을 단순히 보여주지않고 다운로드 · rel: 현재문서와 링크된 문서의 관계 · type: 링크한 문서의 파일 유형 · hrefleng: 링한 문서의 언어 target으로 예를 들어보겠습니다 :) target : 태그의 target 속성은 링크를 클릭했을 때 문서가 열릴 위치를 지정해줍니다. tatget의 속성값은 '_self'와 '_bl.. 2021. 7. 8.
HTML/CSS] 이미지(img) 가운데 정렬 이미지(img) 가운데 정렬 ① text-align ②margin auto ③vertical-align 웹페이지를 만들다보면 이미지(img)를 가운데 정렬하고 싶을 때가 있습니다. 이미지를 가운데 정렬하는 방법은 많은데요. 저는 이번에 ① text-align과 ②vertical-align으로 가운데 정렬을 해보겠습니다. ① text-align img는 텍스트처럼 다뤄지기 때문에 text-align으로 조절이 가능합니다. 태그의 부모태그인 태그에 text-align:center를 적용하면 이미지를 가운데 정렬할 수 있습니다. img{ height: 150px; } div{ text-align: center; } ㄱ ②margin left/right: auto 제가 정말 많이 쓰는 방법인데요 ㅎㅎ 그냥 im.. 2021. 7. 7.
HTML/CSS] 블록요소와 인라인요소 요소의 레이아웃을 결정하는 가장 중요한 요소 두가지를 배워보겠습니다. 바로 '블록요소'와 '인라인 요소'입니다! 블록 레벨 요소 vs 인라인 레벨 요소 블록 레벨(block-level)요소는 혼자 한 줄을 다 차지하는 요소입니다. 너비 100%를 혼자 자 사용하기 때문에 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 대신 margin이나 padding을 이용해 크기가 위치를 조정하기에 좋습니다. , , ~, , , , , , , 등 인라인(inline-level) 레벨 요소는 한 줄을 다 차지하지 않는 요소입니다. 자신의 콘텐츠만큼만 영역을 차지하기 때문에 남아있는 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 있습니다. 즉, 한 줄에 여러개의 인라인 요소를 표시할 수 있습니다. , , , , ,.. 2021. 7. 6.
HTML/CSS] 배달의 민족 폰트 파일 사용하기 요즘 가장 인기 있는 폰트가 뭘까요? 제 생각에는 '배달의 민족 폰트' 인것 같네요. 레트로 감성이 묻어나오는 깔끔한 디자인에 무료 배포라는 엄청난 장점 배민 폰트 열풍을 불고 온 것같네요. 힙한 감성을 더하고 싶다면 배달의 민족 폰트를 강력 추천드립니다. 배달의 민족 폰트는 한나체·주아체·도현체·연성체·기랑해랑체·한나체 Air·한나체 Pro·을지로체· 배민 을지로10년후체, 총 9개가 있습니다. 윈도우용, 맥용이 나눠져 있으니 OS에 맞춰서 다운받아주세요. https://www.woowahan.com/#/fonts 폰트 파일 적용하기 저는 배달의 민족 '한나체'와 '연성체'를 다운받아 폰트 파일을 적용시켜보겠습니다. 1. 폰트 다운로드 (https://www.woowahan.com/#/fonts) 저는.. 2021. 6. 4.