사이먼's 코딩노트

[marquee]이번에는 marquee 태그를 적용하여 글자가 움직이는 효과를 적용해봅시다.marquee는 글자나 그림 등을 상하좌우로 움직이는 연출을 하고 싶을 때 사용하며, MS에서 Explorer에 적용하기 위해서 만들어낸 태그이다.아래 URL 주소를 참고하여 CSS만을 활용하여 여러가지 형태의 marquee를 확인해보고 실제로 적용시킬 수 있다.참고용 주소 : https://www.quackit.com/css/codes/marquees/See the Pen 240705(marquee) by psm817 (@psm817) on CodePen. [스크롤 바]이번에는 기존에 존재하는 스크롤 바를 커스텀해봅시다.딱히 필요한 라이브러리는 없으며, CSS만을 활용하여 스크롤 바 디자인을 할 수 있다.See..

[밑줄 효과 만들기]이번에는 각 메뉴에 마우스를 올려놓았을 때 밑줄이 그려지는 효과를 적용해봅시다.테일윈드를 사용하여 HTML 자체에서 클래스명을 통해 기본 디자인을 주는 방법도 함께 적용해봅시다.See the Pen 밑줄효과 by psm817 (@psm817) on CodePen.각 메뉴의 이름이 작성된 span 태그에서 position: relative를 적용한다.밑줄이 새겨질 부분은 ::after를 사용하여 배경 색을 칠해줘야 한다.after에 포함된 속성은 position: absolute와 실제 부모 격인 span 태그의 글자를 기준으로 아래에 있어야하고 왼쪽부터 그려져야되기 때문에 left: 0, top: 100%를 적용한다.top: 100% 대신 bottom: 0을 하게되면 밑줄의 heig..

[리눅스 기본 명령어]이번 포스팅에서는 리눅스에서 가장 기본적으로 사용되는 명령어에 대해서 알아봅시다.일반적으로 Windows 운영체제에서는 일반 cmd창에서 리눅스 명령어를 사용할 수 없기 때문에 Virtual Box를 통해 Ubuntu를 설치하기도 하는데, 이번 명령어 실습은 간단하게 git bash를 통해 연습해도 무방하다.Mac OS는 Windows와 다르게 기본 터미널에서 리눅스 명령어를 사용할 수 있다. [명령어 모음집]ls : list라는 뜻으로 전체 파일 리스트 출력한다.ls -l : 파일 리스트을 출력하는데 ls보다 더 자세한 정보를 출력한다.ll : ls -l과 같은 기능을 하지만 Mac Os에서는 사용할 수 없는 명령어다. ls -al : ls -l를 통한 정보에서 숨김파일을 포함하여..

[Linux 소개]이번 포스팅에서는 리눅스에 정의에 관련하여 몇 가지 소개하고자 한다. [Linux란?]Linux(리눅스)는 리누즈 토발즈에 의해 만들어진 컴퓨터 운영체제로 자유 소프트웨어와 오픈 소스 개발의 가장 유명한 표본이다.컴퓨터 역사상 가장 많은 참여자가 관여하고 있는 오픈 소스로 누구나 개발에 참여하고 코드를 볼 수 있는 프로젝트이다.리눅스는 GNU 프로젝트의 일환으로써 GNU 프로젝트란 GNU is not Unix의 줄임말로, 리처드 스톨먼의 주도하에 시작된 공개 소프트웨어 프로젝트이다.우리가 보편적으로 많이 사용하는 Windows도 OS 중에 하나이며, Linux는 서버 관리 용도로 많이 사용한다. [리눅스 구조]리눅스의 구조는 응용프로그램, Shell, Kernel, 하드웨어 4가지로 분..

[음악 커뮤니티 사이트 제작]앞서 페이지별 기능 설명을 마치고 아래는 완성된 기능을 모두 담은 시연 영상입니다.구현된 모든 코드는 저의 깃허브 리포지터리에서 확인하실 수 있습니다.첫 팀 프로젝트를 진행하면서 협업에 대해서 배운 점도 많고, 제 실력으로 웹 자체를 구현할 수 있을 지에 대한 의구심이 들었었는데, 열심히 고민해보고 노력해서 이런 멋진 결과를 만들어내서 너무 만족한 한 달이였습니다.웃음이 나오는 재밌는 영상은 아니지만, 첫 작업인 만큼 귀엽게 봐주세요~~깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account ..

[음악 커뮤니티 사이트 제작]지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [커뮤니티]사이트 상단 헤더 메뉴의 커뮤니티를 통해 모든 회원이 작성한 게시물을 열람할 수 있습니다.커뮤니티는 총 3가지 타입으로 공지, 자유, 친목 게시판으로 구분되어 있습니다.로..

[음악 커뮤니티 사이트 제작]지난 포스팅에 이어 각 페이지별 기능 소개를 진행할 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [차트 목록]사이트 상단 헤더 메뉴의 차트 목록을 통해 TOP100과 장르별 차트를 열람할 수 있습니다.TOP100은 음악의 좋아요(추천) 수가 많은 순서대로 나열되며, 만일 해당 ..

[음악 커뮤니티 사이트 제작]지난번 E-R 다이어그램을 통해 데이터베이스를 소개한 데에 이어 이번에는 모든 기능이 구현된 각 페이지를 소개해드릴 예정입니다.각 페이지별로 구현된 기능 코드와 html, css는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [메인페이지]메인페이지는 서비스 접속 초기화면으로 화면 페이지의 기본 구조는 상단 메뉴를 나타내는 헤더, 중간 본문,..

[음악 커뮤니티 사이트 제작]지난번 포스팅에 이어 이번에는 E-R 다이어그램을 통해 데이터베이스 설계에 대해서 설명드릴 예정입니다.데이터베이스 설계 후 프로젝트에 작성된 엔티티 코드는 따로 포스팅되지 않을 예정이니 코드를 보고 싶으시다면 아래 깃허브 리포지터리를 방문 후 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [ERD 소개 및 설명]아래 사진은 실제 DB 설계와 함께 작성된 ERD(Entity Relationship Diagram)이다.테이블은 총 ..

[음악 커뮤니티 사이트 제작]음악 커뮤니티 사이트라는 주제 4인 1조의 팀 프로젝트를 진행하였습니다.'음악 커뮤니티 사이트 제작' 카테고리에서는 팀 프로젝트를 진행하면서 구현 및 설계된 데이터베이스와 각 화면 페이지에 대한 설명을 작성하고자 합니다.각 페이지의 대한 코드 구현은 따로 포스팅되지 않을 예정이니 코드를 참고하고 싶으시다면 아래 깃허브 리포지터리를 방문해 주시길 바랍니다. 깃허브 리포지터리 주소 : https://github.com/psm817/Apollon GitHub - psm817/ApollonContribute to psm817/Apollon development by creating an account on GitHub.github.com [프로젝트 개요]다음은 음악 커뮤니티 사이트(..