본문 바로가기

지금, 개발하기81

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.
HTML/CSS] 크롬 개발자 도구로 네이버 디자인 바꾸기 내가 원하는대로 웹페이지를 구현하였습니다. 그런데 만들고 나니 마음에 안드는 부분이 있네요. 폰트 색깔만 조금만 바꾸고 싶습니다. 그런데 매번 VScose를 켜서 이색 ~ 저색~바꾸고 실행시키기가 여간 귀찮네요. 화면에서 바로바로 바꾸면서 잘어울리는 색깔을 볼 순 없을까요? 당연히 있습니다! '크롬 개발자 도구' 를 이용하면 쌉가능입니다. '개발자도구'란 크롬에서 지원하는 툴로 HTML 구조나 CSS스타일을 변경할 수도 있고, JavaScript 디버깅, HTML통신상태 체크, 성능진단 등 다양한 기능을 쓸 수 있습니다. 우리는 이중에서 개발자도구를 통해 CSS스타일 아주 손쉽게 바꿔보겠습니다. 그럼 한번 해볼까요? 1. 크롬에서 '개발자 도구'를 켜려면 마우스를 우클릭을 해서 '검사'를 눌러주세요. 또.. 2021. 6. 2.
HTML/CSS] 구글 폰트 설정 웹 페이지만 구현하다 보면 예쁜 폰트를 사용하고 싶을 때가 있습니다. 힙하고 예쁜 무료 폰트를 쓰고 싶을 땐 어떻게 해야할까요? 이럴때는 구글에서 무료로 제공 되는 Google Font를 사용하면 됩니다. 한글도 예쁜 폰트가 많아요! 사용법도 아주 간단합니다. 1. 구글 폰트 사이트로 들어가주세요! https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 첫 페이지에 들어가면 다양한 폰트들을 볼 수 있습니다. 우리는 여기서 한글 폰트만 선택해서 적용해 볼 꺼예요. 2. laguage에서 'Korean' 클릭 3. 원하는 한글 폰트 클릭!.. 2021. 6. 1.