본문 바로가기

개발새발

 (5)
[HTML, CSS] 가운데 정렬 이번에 처음으로 웹프로그래밍 프로젝트 진행하면서, 고충을 겪게 되었던 의외의 부분이 가운데 정렬입니다. 이는 가운데 정렬 방법을 하나 배웠다고 할 때, 어떤 요소에는 적용되고 어떤 요소에는 적용되지 않는 경우가 빈번했기 때문입니다. 앞선 이유로 프로젝트 당시에는 모든 방법을 다 적용해 보면서 문제를 해결했습니다. 이후 프로젝트 내용을 복습하면서 고충의 이유를 알게 되었는데, 바로 ‘요소에 대한 이해 부족’이었습니다. 가운데 정렬은 요소의 종류에 따라 방법이 달라지기 때문입니다. 요소의 종류는 다음과 같이 2가지로 나뉩니다. 요소 종류 1. 블록 요소, ex) ~ , 2. 인라인 요소 / 인라인 블록 요소 ex) , , 각 요소에 해당하는 가운데 정렬 방법은 다음과 같습니다. 가운데 정렬 - 블록 요소 뿡..
[HTML, CSS, Bootstrap] 세로 메뉴바 구현 다음 기획서에 쓰인 바와 같이 세로 메뉴바를 구현한 내용은 다음과 같습니다. 세로 메뉴바 구현 1 2 3 해당 메뉴바는 다음과 같이 활용할 수 있습니다.
[HTML, JavaScript] 비밀번호 일치 확인 비밀번호 일치 확인 구상 다음 기획서에 쓰인 바와 같이 기능을 구현하려 했으나, 암호를 맞추면 유튜브로 접속이 되도록 기능을 추가하는 것이 재밌을 것 같았습니다. 해당 홈페이지의 비디오가 Hype Boy 하니 버전 뮤직비디오였기에 홈페이지 내에 작성된 Hype Boy 가사를 보고 (가사 = 힌트) 입력 필드에 다음 가사를 입력한 후 (다음 가사 = 비밀번호) 확인 버튼을 누르면 뉴진스 공식 유튜브로 접속 다음과 같은 기능을 기획하게 되었습니다. 비밀번호 일치 확인 구현 이와 같은 비밀번호 일치 확인을 구현한 내용은 다음과 같습니다. 너 없이는 매일 매일이 확인 앞선 코드에서 사용된 window.open의 구성입니다. window.open(url, name); name 인수에서는 팝업 창의 속성을 지정할 ..
[HTML, JavaScript] iTunes Search API 활용 iTunes Search API 필요성 다음 기획서에 쓰인 바와 같이 버튼을 누르면 무작위로 뉴진스의 노래를 추천하는 기능을 구현하고 싶었습니다. 이와 같은 기능을 구현하기 위해선 뉴진스의 노래 목록이 필요했습니다. var musicList = [ "Attention", "Hype Boy", "Cookie", "Hurt", "OMG", "Ditto", "Zero", "New Jeans","Super Shy", "ETA", "Cool With You", "Get Up", "ASAP"]; 처음에는 뉴진스의 노래 제목을 직접 배열에 넣는 방법을 선택했습니다. 하지만 이는 일일이 넣어야 한다는 번거로움과, 뉴진스가 신곡을 낼 때마다 업데이트해야 한다는 문제점이 있습니다. 위와 같은 문제는 외부에서 노래 목록을 ..
[HTML, CSS] div 태그로 레이아웃 구현 레이아웃의 필요성 레이아웃이란 요소를 배치하는 작업을 의미합니다. PPT와 같이 그동안 해왔던 디자인은, 내가 넣고 싶은 요소를 넣고 싶은 위치에 바로 배치할 수 있었습니다. 하지만 HTML은 기본적으로 정해진 배치가 있기 때문에, 내가 원하는 대로 배치를 하고 싶다면 레이아웃을 미리 구성해야 합니다. 백문이 불여일견이라는 말이 있듯이, 이제부터는 저의 프로젝트 기획서를 바탕으로 레이아웃을 만드는 과정을 보여드리겠습니다. 레이아웃의 설계 위 사진은 작성한 기획서를 통해 설계한 레이아웃입니다. 이와 같은 설계를 HTML로 구현한 결과는 다음과 같습니다. 레이아웃의 구현 title_layout img_layout text_layout 레이아웃을 만드는 여러 가지 방법이 있지만, 해당 게시글에서는 div 태그..

티스토리툴바