헤더
-
카카오톡 클론 코딩 #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를 ..
-
카카오톡 클론 코딩 #4 Screen Title이거 공부 했더니 어때?/HTML & CSS & JS 2020. 11. 10. 01:10
이번시간에는 (2) header, 상단을 만들어 보도록 하겠습니다. 먼저 header를 생성하고, 클래스로 header를 다시 명명해 줍니다. 그리고 자식 열, column 2개를 추가해 주겠습니다. 위와 같이, class, 클래스로 명명하고, column으로 사용한 이유는 편리성 때문입니다. 첫 번째 열에는 큰 h1태그를 사용해서, 채팅을 입력 하겠습니다. 두 번째 열에는 여러 아이콘들을 입력하도록 하겠습니다. 그 전에, 아이콘들 사이에 빈 공간, 즉, 간격을 재어보면 대략 25px입니다. 위와 같이, 아이콘 사이의 간격이 25px로 모두 동일하기 때문에, 아이콘들을 하나의 박스, div태그 안에 넣겠습니다. 첫 번째 아이콘은 돋보기이고, 저번 포스팅에서 했던 방식 그대로, Font Awesome에서 ..
-
의미있는 태그 vs. 의미없는 태그이거 공부 했더니 어때?/HTML & CSS & JS 2020. 10. 19. 04:50
이번시간에는 두 가지 종류의 태그, (1) semantic, 의미있는 태그와 (2) non-semantic, 의미없는 태그에 대해서 알아보도록 하겠습니다. 먼저, 의미있는 태그들의 예를 몇 가지 살펴보겠습니다. 예를 들어, h1 태그는 헤더 1이라는 의미로, 의미 있는 태그입니다. 그럼, 이번에는 section태그를 보면, 섹션, 구획을 의미한다는 것을 알 수 있습니다. section태그말고도, article, 항목태그를 사용할 수도 있고, header, 헤더태그도 이용할 수 있습니다. 반면, div태그는 non-semantic tag, 아무런 의미가 없는 태그입니다. 굳이 뜻을 찾자면, division, 나눈다는 정도의 의미를 갖는다고 할 수 있습니다. 즉, div태그는 header, 헤더, foote..