본문 바로가기

display:flex2

[#2 JavaScript] 자바스크립트를 활용한 구글 검색엔진 사용하기 오늘은 HTML & CSS & Javascript를 활용해서 구글 검색엔진을 사용하는 방법을 알려드리겠습니다 사실, 엄청나게 간단하기 때문에 별다른 코드사용은 없으며, 오늘의 핵심은 URL 주소창 입니다 모습이 전체적으로 똑같지는 않지만, 검색엔진을 빌려와서 구현한다는것에 초첨이 맞춰져 있으므로, 검색창 이외에는 작동을 하지 않습니다 접근방법 옛날 사이트들을 보면 우측 상단에 검색기능을 만들어 놓고, 검색을 하게 되면 검색 사이트로 바로 넘어가는 모습을 볼 수 있었습니다 아마, 이런 방식으로 진행이 되었지 싶습니다 우선, 구글을 기준으로 하겠으며 주소창을 먼저 보도록 하겠습니다 구글에 제 블로그 이름 "솔하라이프"를 검색하고 난 후, URL 주소창을 보게되면 https://www.google.com/se.. 웹코딩 공부&공유/javascript 2021. 6. 6.
나혼자 웹 독학 - 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;.. 웹코딩 공부&공유/css 2020. 8. 1.