본문 바로가기

HTML19

CSS | hover, transition: 버튼에 마우스 올릴 때 색깔 변화시키기 웹페이지 클로닝이 거의 끝나가고 있습니다. 예전에 처음 시도했던 것 보다는 더 수월하게 지나가고 있지만 아직도 디테일한 부분에서는 서툴러요. 그 중 hover over color를 바꾸는 것에 대해서 공유해보고자 해요! hover over라는 건 마우스를 클릭하기전 커서를 올렸을 때 상태인데 오늘 적용해볼 건 제가 만든 버튼에 마우스를 즉, 커서를 올렸을 때 버튼에 색 변화를 주는 거에요. 아래 그림처럼 add me in linkedIn에 마우스를 올려도 변화가 없는 상태입니다. 이제 이 상태에서 버튼에 커서를 올렸을 때 변화를 주기 위한 CSS를 추가하려고 합니다. class="button"이 이미 있기 때문에 hover기능을 추가합니다. 커서를 올렸을 때 바탕은 검정, 글씨색은 흰색으로 바꾸기 위해서.. 2020. 6. 4.
CSS | id 활용법: 같은 페이지 내에서 이동시키기 여전히 웹페이지 클로닝 중입니다. 오늘 기억하려고 포스팅에 함께 공유하는 부분은 같은 페이지 내에서 링크 시키는 방법이에요. 예를 들면, 같은 페이지 내에서 A라는 부분을 눌렀을 때 A에 해당하는 섹션으로 화면을 자동으로 보여주는 거에요. 요즘은 한 웹페이지를 길게 만들어서 메뉴를 누르면 자동으로 그 메뉴에 해당하는 섹션으로 화면이 내려가도록 해 놓은 것들이 많더라구요. 속성 id 한 페이지 내에서 이렇게 이동시킬 수 있는 방법으로 오늘 활용해볼 것은 id입니다. id는 class와 다르게 특정한 부분에만 적용시킬 CSS를 지정할 수 있는 속성이에요. html에서는 id=" "로 쓰고, id를 지정하고 싶은 태그 안에 입력해주시면 되요. CSS에서는 #을 이용합니다. 예를 들면, #id이름{ }이렇게 지.. 2020. 6. 3.
CSS 다양한 배경이미지 사용으로 감각적인 첫화면 만들기 맘에 드는 여러개의 이미지를 찾았는데, 그걸 배경화면에 다 넣어보고 싶다면? 가능할까요? backgroud-image를 이용하면 가능하더랍니다! 넣고싶은 이미지의 url을 연결해서 컴마로 쭉 써주기만 하면 끝! 그리고 각각 이미지의 크기와 위치를 조정해주기만 하면 되요. 연습용으로 처음 만들어본 저만의 웹페이지 입니다. 요즘 코로나니 뭐니 해서 건강해져 보려고 주스를 만들어 먹고 있는데, 일명 '부스터 주스'라는, 그걸 주제로 웹사이트를 만들어 보고 있습니다. 아무튼, 우여곡절 끝에 헤더를 만들어놓긴 했는데, 배경색인 salmon을 더 돋보이게, 그리고 웹사이트가 주스에 대해서 알리고자 한다는 것을 더 효과적으로 사용할 순 없을까요? 무료 사진 공유 사이트에서 눈여겨 봤던 주스에 관련된 이미지를 찾아봤습.. 2020. 4. 18.
HTML 형식요소 외 label, select, textarea, button, fieldset, legend, datalist, output 1. HTML 형식(forms) 형식 요소는 텍스트 영역, 체크박스, 버튼, 제출버튼 등과 같은 사용자가 입력하는 형식을 정의한다. 1-1. 속성 형식 요소 자체에 포함되는 속성에 action, target, method등이 있다. - action은 제출한 형식이 실행되도록 하는 것이고 - target은 제출한 형식을 어떻게 보이도록 하는지 지정하는데, 새로운 브라우저에서 열거나(_blank) 지정된 영역 안에서 열거나, 현재 창에서 여는 방식이 있다. - method는 형식 요소에 입력값을 제출할 경우 get이나 post의 방법을 사용하는 것이다. post는 민감하거나 개인적인 정보를 제공하는 경우 주소에 형식 요소를 표시하지 않는 것이다. get은 기본값으로 형식 요소를 주소 안에 드러낸다. 1-2... 2020. 4. 14.

티스토리툴바