pbSpace 웹 페이지 개설:PureCSS 일부 버그 수정

PureCSS는 Javascript를 사용하지 않는 드롭다운을 지원합니다. 개인적으로 따로 구현해서 쓸 수도 있겠지만, UI 색상이나 디자인이 맘에 들어서 부분적으로 사용하게 되었습니다.

그런데, 구현하고 보니 화면에서 드롭다운 메뉴 영역이 있는 아래 부분은 마우스를 가져다 대면 드롭다운 메뉴가 뜨면서 화면에 멀쩡히 보이는 드롭다운 아래 링크를 클릭할 수 없는 현상이 일어났습니다.

<div>태그를 제거하고 <header>태그에 결합하거나, 소스를 Pure 전체 CSS에서 메뉴 전용 소스로 변경해 보는 등 별 삽질을 다 했습니다만, 결론적으로 해당 부분에 position:absolute를 주는 것이 해법이었습니다.

그러고 나니 margin-top 값을 -로 지정해주지 않으면 너무 많은 공백이 발생해서 채워줬습니다.

그동안은 항상 PureCSS 템플릿이나, Bootstrap 템플릿으로만 웹사이트를 구축해왔던 만큼, 이렇게 스스로 웹사이트를 CSS 다뤄가며 예쁘게 만들어본 것은 처음입니다.

Google 웹폰트도 예쁘게 만드는데 크게 한 몫 했습니다. 최근 한국어 글꼴들이 많이 늘은 덕분입니다.

[ 헤드부분: 비효율적으로 link 태그를 사용했습니다. 한국어 폰트의 경우 subset=korean을 설정해주지 않으면 잘 표기되지 않는 경우가 많은데, 이를 해결하기 위해서였습니다. earlyaccess때는 그런 일이 없었는데, 신기하네요. 나중에 비효율적인 태그를 효율화시킬 예정입니다.]

<meta charset="utf-8">

<title>pbSpace</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Gugi&amp;subset=korean" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">

<link href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Cute+Font&amp;subset=korean" rel="stylesheet">

<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<link rel="stylesheet" href="pbui.css">

[문제의 메뉴 부분입니다. position:absolute와 margin-top 값을 주니 어느정도 해결됩니다. 짧게 쓰기 위해 header 안 태그는 생략했습니다.]

<header class="pure-menu pure-menu-horizontal pbheader" style="position: absolute; margin-top: -50px"></header>

결과적으로 이렇게 완성되었습니다. 이제 저 종이상자 공간 텍스트 아래에 위치한 메뉴들 벡터 이미지 배치시켜야 하는데.. 그건 나중에 해야 할 것 같군요.