위치
-
카카오톡 클론 코딩 #15 네비게이션 바 CSS이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 21. 01:32
이번 포스팅에서는 네비게이션 바를 만들어 보도록 하겠습니다. 앞선 포스트에서 했던 방식대로, 제일 먼저 CSS폴더에 nav-bar.css라는 새 파일을 만들고, style.css에 nav-bar.css를 @import합니다. 그럼 네비게이션 바에 배경색을 지정해주면, 네비게이션 바가 잘 선택 되어있는 지 확인할 수 있습니다. 상태표시줄, 헤더, 네비게이션바는 화면을 스크롤하더라도 그 자리 그대로를 지키고 있습니다. 그래서 position: fixed;를 이용하여 자리를 고정시켜 주겠습니다. (body의 padding에 둘러싸여 있도록 한 설정 제거) position: fixed는 기존에 있던 위치에서 다른 위치에 고정시키도록 설정한 것이기 때문에, position: fixed를 쓸 때는 꼭 width를 ..
-
Inline vs. Block vs. Inline Block이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 26. 05:20
저번시간에는 margin, padding에 대해 배웠고, 이번시간에는 display, 디스플레이에 대해 배우도록 하겠습니다 (다음시간에는 position, 포지션에 대해 배우겠습니다.) 디스플레이하는 방법 3가지, 1> block, 블록, 2> inline-block, 인라인-블록, 3> inline, 인라인에 대해 알아보겠습니다. 1> 먼저, block, 블록이 어떻게 생겼는지 살펴 보겠습니다. 박스 3개를 만든 후, 상자들의 배경색은 빨간색, 폭은 200px, 높이도 200px로 값을 주도록 하겠습니다. 여기에 border는 두께는 2px, 실선, 검은색으로 값을 주겠습니다. 그럼 이제 block, 블록 형태를 확인할 수 있습니다. 즉, block, 블록이란 바로 옆에 아무 것도 없는 디스플레이 형태..