와이번 테크 블로그

제이쿼리도 자바스크립트도 아직 버거워서, CSS정도만 사용해서 사이드메뉴를 만들고 싶어 구글링으로 야매하게 만들었다. 여러 블로그에서 코드를 소개하고 있어서 감사의 말씀 남깁니다. 메뉴 MENU 1 네이버 소메뉴 2 소메뉴 3 소메뉴 4 MENU 2 구글 작은메뉴 2 MENU 3 참고 : [html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 (tistory.com) [html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 TITLE MENU 1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 MENU 2 소메뉴2-1 소메뉴2-2 MYPAGE .side-menu { top: 50px; width: 45px; z-index: 10; background: #ff5858; border-right: 1px ..

오늘은 구글링을 통해서 발품을 많이 팔았다. 그런데 만족할 만한 결과는 얻지 못했다. 목표는 이랬다. 구글 검색창처럼 중앙에 검색필드가 있고 아래에 검색 버튼과 부가 버튼을 만드는 것. HTML문서에는 이렇게 작성한 후 css 문서를 새로 작성했다. 이것도 새로 공부한 것인데 html에서 css를 불러오는 것은 총 3가지가 있다는 것을 알았다. 이런 식으로 쓰거나 위처럼 를 통해 저장된. css를 불러오거나 @import 기능을 통해 불러오는 방법이 있었다. 아무튼 css 문서에는 다음과 같이 작성했다. .search { position: relative; text-align: center; width: 300px; margin: auto; } input { width: 100%; border-radiu..

Naver 바로가기 // 아래는 버튼을 누르면 메세지를 띄우는 예제. 오류 // 아래는 아이디, 패스워드를 입력 할 수 있는 필드 예제. ID : PW : 로그인 // 아래는 버튼 글씨, 배경에 색을 입히는 예제. HTML 삽입 미리보기할 수 없는 소스 font-size는 혹시나 해서 넣어봤는데 적용되는거 보고 놀랬다. 파이썬이나 자바 스크립트 할때보다 코딩 예제 만들고 시험해보는게 쉬워서 좋은 듯.

HTML 예제 "공부를 하다가 Uncaught SyntaxError를 마주했다. 분명 문제는 없어보였는데, 스택 오버플로우를 확인하니 네트워크 문제로 보였다." "p는 paragrah의 약자로 문단을 의미한다." "3번째 작업으로 구글 로고를 가져와봤다. 엣지를 킨 다음 구글 검색창을 열었다. 오른쪽 클릭-검사를 통해 요소를 확인하여 로고의 주소를 알아내었다. img src을 이용해 로고를 가져오고 title='logo'를 사용했다." "한편 이번에는 직접 운영하는 블로그의 이미지를 불러내보았다. 방법은 위의 로고를 가져온 것과 같다." "그냥 가져왔더니 사이즈가 매우 크게 나온다. 즉, 원본 사이즈로 나오는 것을 확인했다. 따라서 'width=400'을 이용해 사이즈를 줄였다." 굴림 크기 22PX H..