기술 용어가 확실하지 않다 - HTML/CSS/자바 스크립트 테이블 질문

Question

나는 HTML/CSS/Javascript와 관련된 질문을 가지고있다. 그러나 나는 오랫동안 모든 것에 대한 기술 용어를 잊어 버린 것처럼 정확히 묻는 방법을 확신하지 못한다. .

내 궁극적 인 목표는 (코드) 다음을 수행 웹 페이지의 요소를 구성하는 것입니다

전 누구죠 즉, 클릭하면 변수를 표시 (그래픽 버튼이 아닌 HTML "버튼") 클릭 할 수있는 요소의 수 특정 물건에 대한 흥미로운 세부 사항을 제공하는 텍스트의 양. 가능한 경우 이러한 버튼을 "강조 표시"하는 방법이 필요합니다 (이미지를 위/아래 또는 왼쪽/오른쪽으로 클릭 할 때 좌표로 바꾸는 CSS 속임수를 풀 수있는 방법을 알고 있지만 방법을 잘 모르겠습니다.) 이것을 내가 의도 한대로 작동하도록하십시오).

- 각 버튼 앞에 어떤 종류의 라벨을 부착 할 수 있습니다. (원래 독창적 인 계획은 HTML 테이블에 모든 것을 던지려고했기 때문에 레이블을 입력 할 수있는 버튼의 한쪽에 열을 넣을 수있었습니다.)

- 세부 정보 상자가 나타나면 이미지 배경이 표시되도록 허용합니다.

- 버튼과 제목 표식이 세부 정보 창의 한쪽에 있고 세부 정보 상자 자체가 다른쪽에 표시되도록 구성되어 있습니다.

예 :

나는 지금까지 과일 (사과, 오렌지, 바나나, 배)의 이름을 가지고 그 왼쪽에 열을 가지고있다. 이 이름 바로 옆에있는 열에는 과일 이름별로 일련의 단추가 있습니다 (과일 이름 당 하나의 단추가 있으므로 한 줄에 "Apple", 그 다음에 {button}, 다음 줄에는 "Orange", 그 다음에는 {button} 기타.). 이 버튼을 클릭하면 맨 오른쪽에 각 과일에 대한 자세한 설명과이 상세 텍스트 뒤에 배경 이미지 (모든 세부 상자의 동일한 이미지)가 표시됩니다. 이 배경 이미지 및 모든 텍스트는 버튼을 클릭 할 때까지 숨겨집니다. 같은 버튼을 두 번 클릭하면 텍스트가 다시 숨겨지는 것이 좋습니다.

이 모든 것을 위해 이미지를 구성하는 데 아무런 문제가 없지만 코드가 손실됩니다. 이 모든 것을 일종의 HTML 테이블로 코딩 할 수 있습니까? 그렇다면이 코드를 체계적으로 유지할 수 있습니까? 맨 왼쪽 열 (예)에 배경 이미지가 있고, 그 위에 교체 가능한 텍스트가 있으므로 (그래픽 수를 줄임) 가능합니까?

내 질문 및 표현이 기술적으로 기술적이지 않은 경우 사과드립니다. 나는 오랫동안 간단한 HTML 페이지에 익숙해졌으며 실제로 CSS/Javascript를 배웠지 않습니다. 내 질문이 이해가되지 않는다면, 나는 내 목표를 더 잘 설명하기 위해 이미지를 그리는 것보다 행복 할 것이다.

미리 답변 해 주셔서 감사합니다.

Answer 1

글쎄, 당신이 원하는 것을 할 수있는 유일한 "올바른"방법은 없습니다. 이 문제를 해결하기위한 수십 가지 방법이 있습니다. 1) 솔루션 구축에 어느 정도의 시간을 투자하고 싶습니까? 2) 프로젝트에 다른 기술 (예 : 부트 스트랩 또는 jQuery)을 추가하면 문제가됩니까?

는 일반적인 관점에서 그것을 찾으려면 :

내가이 같은 상황에 도움이 생각하는 곳들은 엄지 손가락의 규칙이있다. 귀하의 페이지에있는 모든 것은 사각형입니다. 모두. 당신이 정말로하고있는 일은이 직사각형의 이름을 지정하고, 스타일을 지정하고 조작하는 것뿐입니다.

HTML 페이지에 생성 한 모든 요소, ID 또는 클래스는 CSS 또는 자바 스크립트로 조작 할 수 있습니다.그리고 당신의 HTML 페이지에 존재하지 않는다면, CSS 또는 자바 스크립트로 그것을 만들 수 있고 그리고을 조작 할 수 있습니다.

단추로 특별히 언급 된 항목이 아닌 "단추"로 만들 수있는 것은 무엇이든 있습니다. "단추"가되고 싶은 사각형을 선택할 수 있습니다. 당신은 그 (것)들을 그 (것)들 같이 표적으로하고 작풍을 주어야 할 것입니다.

(조언으로 HTML의 <button> 기능을 사용하는 것이 좋습니다. 표준화 된 의미는 모두에게 좋으며 CSS를 사용하여 원하는 모양과 느낌을 변경할 수 있습니다.

더 구체적으로 :

페이지에 정보를 숨기기 또는 표시를 처리하는 기존의 방법은 사용하는 자바 스크립트 및/또는 jQuery를하는 것입니다.

모든 공통 html 요소에 클래스 이름 class="example-class"을 조작하도록 지정하고 ID 이름 id="example-id"을 조작 할 고유 요소를 제공하십시오.

Here's the jQuery page regarding .hide() and .show(). (이러한 메서드에 특정 문제가있는 경우 Stack Overflow가 도움이됩니다.) html로 명명 한 클래스 나 ID를 대상으로합니다.

페이지를 구성하는 데있어 일반적으로 <div> 태그를 사용하고 중첩하는 것이 좋습니다. 부트 스트랩에는 필요한 역할을 수행하는 데 도움이되는 특수 클래스가 있습니다. 가로 방향을 돕는 class="row", 세로를 돕는 class="col-SIZE-NUM", 섹션 구성에 도움이되는 class="well"이 있습니다.

부트 스트랩의 메인 페이지에는 옵션에 대한 개요가 있습니다. Here.

위의 모든 사항은 바닐라 CSS와 바닐라 자바 ​​스크립트로도 수행 할 수 있습니다. 여기서 일을 좀 더 쉽게하고 싶다면 (또는 할 수 있는지) 결정하는 것은 당신에게 달려 있습니다.

희망이 도움이됩니다.