반응형
웹코딩 공부&공유12
나 혼자 웹 독학 - HTML/CSS를 활용한 나만의 간단 웹 메인 페이지 제작
안녕하세요 베트남에 장기해외실습으로 1년 조금 넘는 시간을 살았었는데요 북부에는 많이 여행다니고 했었는데 어떻게 하다보니 중부, 남부로는 한번도 여행을 가보지 못했어요 살다 보니 베트남어도 어느정도 할 줄 알게되고 많은 친구도 사귀게 되었었는데요 저도 다시 베트남에 가야하는데 언제쯤 다시 갈 수 있으려나 하하.. 코로나때문에 해외 어디 여행이라도 가고싶어도 가질 못하니.. 베트남 중부, 남부로 여행을 가고 싶어서 간단하게 하나 만들어 보았습니다 2020/08/01 - [웹코딩 공부&공유/css] - 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기 안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려..
[html/css] 웹 개발시 폰트형 아이콘을 사용해보자 - FontAwesome 사용법 & 활용하기
안녕하세요 오늘은 폰트형 아이콘을 사용하는 방법을 알려드리겠습니다 저는 메뉴, 로고 등에 텍스트만 있으면 심심해서 이 사이트를 자주 애용하는 편입니다 자주 애용하는 정도가 아니고 항상 사용하는거 같아요 ㅎㅎ 모든 홈페이지에는 텍스트만 있는것 보다는 아이콘을 사용해서 간단하고 더 보기 좋게 만들면 훨씬 깔끔해보이니까요 물론... 저의 생각입니다 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 소개해드릴 사이트는 이 사이트 입니다 Font Awesome 현재는 이런 모습을 하..
[html/css] @keyframes 를 활용한 텍스트 효과 - 첫번째
안녕하세요 @keyframes를 활용한 텍스트 효과를 소개해 드리려고 합니다 간단하고 쉬워서 여러분 모두 따라 하실 수 있습니다 예쁜 텍스트 효과 이 정도이고요 잘 사용할 일은 없지만 그래도 간단하고 이뻐서 알아두시면 좋은 것 같습니다 우선 @keyframes에 대해 알아보겠습니다 쉽게 생각해서 애니메이션 효과를 주고 싶은 곳에 @keyframes를 주시면 돼요 예를 들어) @keyframes test { /* from = 0% */ from { ... } 50% { ... } /* to = 100% */ to { ... } } 이런 식으로 해서 from >> 50% >> to까지 어떤 효과를 줄 건지에 대한 걸 {} 중괄호 안에 넣으시면 됩니다 간단한 효과를 먼저 한번 보자면 하늘 하늘 p { anim..
(공유) 나만 모르는 웹 폰트 사용법이 있다? - 혹시 구글폰트 몰라?
안녕하세요 ~ HTML / CSS를 공부하고 있는 학생입니다 여러분들 보통은 웹 개발에 처음 오게 되시면 다른 동영상이나 다른 개발하시는 분들을 봐도 대부분 Visual Studio Code를 추천하시니까 많이들 사용하시는거 같아요 저도.. 처음에는 bracket을 사용하다가 Visual Studio Code로 넘어왔습니다 위 사진의 텍스트가 기본 텍스트로 지정되어 있습니다 물론.. 저는 깔끔한 걸 좋아하다 보니 서체가 이쁜데 이제 개발을 하시다 보면 어떤 주제에 맞는 폰트들을 사용해야 하실 일들이 분명히 있잖아요?? 이렇게 동글동글하게 예쁜 글씨체도 있네요 그럴 때를 위한!! 3분 안에 할 수 있는 웹폰트 지정법을 알려드리겠습니다 -- 저작권 걱정 없습니다 -- 우선 구글에 "구글 폰트" 검색 또는 아..
나혼자 웹 독학 - css flex(플렉스)를 활용한 메뉴바 만들기
안녕하세요 간단한 html, css를 이용한 menubar를 만들어 보려 합니다 기본적으로 display : flex; 가 들어가는 방식입니다 안녕하세요1 안녕하세요2 안녕하세요3 위와 같이 큰 menubar 라는 박스안에 3개의 div 가 안에 있습니다 (menu_logo, menu_menu, menu_etc) /* 바디 속성 지정 */ body { box-sizing: border-box; margin: 0; padding: 0; } /* menubar 속성 */ .menubar { background-color: lightgreen; font-size: 30px; display: flex; /* 3개의 박스를 담는 가장 큰 박스에 flex*/ justify-content: space-between;..
반응형