코로 넘어져도 헤딩만 하면 그만

홈페이지라면 게시판 정도는 있기 마련! ...해서 게시판 틀을 display:table; 로 짜는 법을 배워봤다. 서치를 하거나, 글을 남기는 건 백엔드랑 이어지는데 데이터베이스 다루는 법은 못 배워서 디자인만 해봄. - 서치 창 만드는 법 전체 제목 내용 작성자 검색 .search-box { form { display: flex; justify-content: center; select { width: 120px; position: relative; padding: 0 15px; border: 1px solid #ccc; } input { width: 300px; height: 60px; margin: 0 10px; padding: 0 15px; border: 1px solid #ccc; } butto..

보통 웹페이지에서 헤더header 부분과 맨 밑의 푸터footer은 여러 번 공통적으로 등장한다. 이처럼 반복되는 부분을 모든 서브페이지 html 마다 쑤셔넣는 것은 비효율적이기 그지없다! 따라서 공통되는 부분들은 다른 파일로 분리한 뒤 짧게 링크 한줄로 넣어주는 방식(가령, css파일이나 js파일을 연결하는 것처럼.)을 취하는 편이 현명할 것이다. 하지만 이 방법은 로컬에서는 쓸 수 없어서 서버의 힘을 빌려야만 한다. 여러 방식이 있겠지만 이번엔 오토셋을 써봤다. 오토셋 http://autoset.net/xe/ 은 apm setup(아파치 웹서버 / php / MySQL)을 전부 한번에 설치하도록 도와주는 프로그램이다. 이 셋은 상호 보완적으로 작동하며 서버를 쉽게 돌릴 수 있게 한다. 비록 지금은 업..

깃허브란? 소스를 효율적으로 분산 관리하는 시스템인 '깃Git'을 쓴 프로젝트를 지원하는 일종의 클라우드라고 할 수 있다. 클라우드에 코드를 올리고 내려받는 식으로 진행되며 쉽게 백업, 복원, 추적, 공유, 협업, 수정이 가능하다는 강점을 가진다. 협업이 필요한 개발 분야에서 꼭 언급되는 곳이라고. 깃으로 로컬 저장소에 먼저 저장을 한 뒤, 작업한 부분을 깃허브에 올리는 방식으로 이뤄진다. 그렇다면 깃허브에 새로운 코드 파일을 저장하는 방법을 아주 가볍게만 알아보자. 이를 위해서는 깃허브 https://github.com/ 에 가입이 되어 있어야 한다! 1. 작업하던 코드 에디터를 열고 거기서 터미널을 연다. 본인이 VS Code를 에디터로 쓰고 있기 때문에 이걸 기준으로 적겠다. 터미널(단축키 ctrl..

확장 프로그램 중에서도, js 쓸 때 console을 생성해주는 프로그램을 깔아봤다. 매번 consloe:log()를 써서 확인하기도 귀찮을 때가 있으니... 한번 깔아두면 두고두고 쓸 것 같다. 깔고 나서 따로 손볼 거는 딱히 없고 그냥 확장 프로그램에서 다운 받으면 끝이다. 이후 원하는 곳을 블럭으로 잡고 ctrl + alt + L 단축키를 누르면 바로 아래에 코드가 생성된다. 필요 없어져서 일괄 주석처리 할 때는 shift + alt + c 고, 삭제할 때는 shift + alt +d 쓰면 된다. 그럼 빠르고 쉬운 코딩 완성.

아직 제대로 써보지 못한 사이트들도 있다. 유료, 무료 여부는 나중에 기재. 아마 대부분은 무료일 것이다... 아이콘 모음 - FontAwesome : 여러모로 구글 폰트와 더불어 가장 유용하게 쓰고 있는 아이콘 사이트. 무료 아이콘들도 꽤 있고... 하여튼 예쁜 건 유료다. 가입해야 하는 듯. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com - XEIcon : 한국 사이트, 여러 벡터 아이콘들을 받을 수 있다. 라이브러리에서 다운 가능. http://xpr..

AOS 사이트 https://michalsnik.github.io/aos/ 에서 간단하고 자주 쓰이는 JS효과들을 쉽게 이용해보자. Fade, Flip, Zoom과 같이 가벼운 움직임을 통해 사이트에 생동감을 불어넣을 수 있다. 또한 duration을 통해 속도를 조절할 수도 있다. 사이트 내에 들어가면 어떻게 작동하는지 바로 샘플로 보여줘서 감을 잡기 쉽다. 맨 아래쪽에서 다운로드 클릭, 이후 받은 알집 파일 중에서도 dist 폴더 내에 있는 aos라는 이름을 가진 css파일과 js 파일을 각각 작업 중인 폴더에 넣어준다. 이후 이 둘을 모두 html에 link를 통해 연결해주고, html의 부분 맨 위쪽에 AOS.init();라고 한 줄 적어두면 세팅 완료. 이제 효과를 적용하고 싶은 부분에 샘플에 ..

풀다운 메뉴 pull down menu, 다른 말로 드롭다운 Drop-down 메뉴는 상단 헤더 영역에 주로 들어가는, 페이지를 바꿀 수 있게 돕는 메뉴다. 긴 설명보다 눈으로 직접 보는 게 깔끔할 것이다. 1. 기존에 만들어둔 헤더-메뉴 css 파일 중에서 헤더의 하위 항목에 아래처럼 full 클래스를 추가해준다. css가 아니라 scss로 작성한 코드니 참고. &.full { height: 400px; overflow: hidden; #gnb .list .depth01 { transition: none; } #gnb .list .depth02 { transition: none; border-radius: 0; li { transition: none; } } #gnb .list > li:hover .d..

웹 페이지의 맨 위에 있는 투명한 배경 헤더가, 스크롤을 내리는 행위에 맞춰 함께 따라 내려오며, 글씨가 더 잘 보이도록 배경이 생기는 레이아웃이 존재한다. 헤더가 계속 위에만 있는 구조라면 상관 없겠지만... 스크롤을 내릴 때 헤더가 따라 내려오며 바뀌는 효과는, 대체 어떻게 만드는 걸까? 이런 헤더는 js와 css를 사용해서 만들 수 있다. 일반적 헤더 구조까지는 다 만들어둔 걸 가정하고 시작한다. 1. 우선 html의 헤더는 id="header"을 갖고 있어야 한다. id가 있어야 script에서 헤더 제어가 가능하다. 또한 헤더의 배경색으로는 아무것도 넣지 않고, position:fixed; 를 처리해서 스크롤을 내려도 상단에 계속 고정되게 한다. 2. css 파일 header css부분 아래쪽에..