디지털 노마드를 꿈꾸며/CSS7 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 | 간단해서 잊어버리기 쉽지만 알면 유용한 CSS 1. 굵은 글자 굵기를 약하게 줄이고 싶을 때 font-weight: normal; 2. 줄간격 설정하고 싶을 때 line-height: 150%; 3. 원래 이미지의 크기를 유지하되 설정한 이미지 크기보다 화면의 크기가 작아질 때 (그림이 잘리지 않고) 자동적으로 작아지도록 하고 싶을 때 img{ max-width: 100%; } 4. 메뉴를 고정시키면서 스크롤 가능하게 하고 싶을 때(스크롤 해도 가장 상위에 보이게 하고 싶을 때) nav{ position: fixed; z-index: 1; } 5. 헤더의 배경화면을 - img폴더에 있는 사진으로 지정하면서 - 그림이 반복되지 않으면서 - 화면 전체를 꽉 채우도록 하면서 - 그림이 화면 위로 올라가도록 하고 싶을 때 header{ background-.. 2020. 6. 3. display: relative는 언제 사용하면 좋을까? 뭔지는 잘 모르겠지만 이것저것 따라하다보면 자주 등장하는 속성 중 하나는 display였어요. 저번 포스팅에서 display속성에는 5가지가 있었는데, 이론적으로 설명을 읽는다고 해도 사실 실전에 활용하지 않는 이상 개념이 잘 와닿지 않더라구요. 계속해서 웹사이트를 클로닝 하는 과정에서 relative를 사용하는 부분이 있어서 다시 한 번 정리해보고자 합니다. 까지는 어찌저찌 잘 했고(이전 포스팅 참고하셔도 좋아요!) 그리고 봤더니, 네비게이션 메뉴 때문에 기존에 있던 사진의 위쪽이 짤렸더라구요. 메뉴가 z-index: 1;로 앞으로 나와있다보니 뒤에 위치한 사진과 메뉴가 겹치는 부분이 사라지게 되어버렸어요. Position 여기서 다시 position을 소환해 봅니다. 이 부분에서 오늘 적용해 볼 건 .. 2020. 6. 2. 이전 1 2 다음
