디지털 노마드를 꿈꾸며33 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. CSS | <nav> 상단에 고정시키는 방법 예전에 했던 클로닝을 다시한번 복습중인데 또 다른 어려움에 봉착했습니다. 분명 예전에 배웠던 건데 아직도 익숙하지 않아서 똑같은 지점에서 헤매는 상황이에요. 바로 네비게이션 메뉴를 고정시키는 것입니다. 원하는 모양은 웹페이지를 스크롤해서 화면을 내려도 계속해서 메뉴가 상단에 고정되도록 하는 거에요. 현재까지 완성시킨 모습은 다음과 같습니다. display: inline-block을 이용해서 각각의 메뉴들을 가로로 정렬시켰고, 각각 메뉴의 ul, li의 여백들을 없앤 상태로 개별 메뉴인 li에 오른쪽, 왼쪽 여백을 15px씩 줬습니다. 지금까지 모습에 해당하는 CSS는 이러합니다. 지금부터는 상단에 메뉴를 고정시키는 작업을 할거에요. 어떤 CSS를 활용해야할까요? 바로 position입니다. Positon.. 2020. 5. 30. CSS | <nav> 메뉴들을 가로로 정렬시키기 또 다른 문제가 발생했습니다. 계속해서 홈페이지 클로닝을 하고 있는데 아주 기초적인 듯 하지만 제 머릿속에서는 도저히 생각나지 않는 문제... 현재 홈페이지 상단의 메뉴 상태는 이러합니다. 를 적용해서 메뉴를 구성하는 것도 이제 좀 알겠고, 각각을 과 로 지정하는 것도 알겠습니다. 하지만 제가 결과적으로 만들어내야 하는 모양은 content, works, experience, behance, twitter, linkedin이 가로로 쭉- 나열되어야 해요. 여기서 뭘 어째야 하는건지....? CSS에 적용했었던 건 알겠는데, 예전에 연습할 때 했었던 기억이 날듯 말듯 하긴 한데 무엇을 어디에 어떻게 적용해야 하는 지 당최 기억이 나질 않습니다. 다시 돌아가서 구글 창에 열려있는 현재 진행중인 웹페이지를 분.. 2020. 5. 15. 이전 1 2 3 4 5 ··· 9 다음
