자바 스크립트 질문입니다ㅜㅜ(내공 400)
-
게시물 수정 , 삭제는 로그인 필요
안녕하세요, 현재 html과 css를 독학으로 어떻게든 공부하고 있는데 자바 스크립트는 아직 잘 몰라서 도움을 받고자 질문 드립니다. 한 페이지 내에서 다른 html파일을 추가하지 않고 각 요소를 클릭했을 때 상자 안의 내용이 다르게 뜨게끔 하고 싶고 onclick을 이용하면 될 것 같은데 명령어를 어떻게 줘야하는지 감이 안 잡혀서 질문드려요. 사진은 현재 html과 css로 구성해둔거고, 여기서 B, C, D(원래는 아이콘 이미지이나 현재 빈 동그라미로 대체해두었습니다.)와 하단의 before, after를 누르면 현재 모든 포맷의 위치는 그대로면서 각 스텝에 맞게 내용이 바뀌도록 하고 싶은데요. 자바 스크립트로 명령어를 어떻게 줘야하는걸까요? B를 누르면 A와 B 사이의 막대기 색깔도 변하게 하고 싶습니다. 막대기는 <p>를 써서 border를 준거구요.
아래는 제가 짜둔 html과 css 파일입니다.
현재는 html 파일입니다.
<div class="step_section">
<div class="step_box">
<div class="step_container">
<div class="step_head_left">
<div class="step_icon"></div>
<p>멘트1</p>
<p class="step_blue">멘트2</p>
</div>
</div>
<div class="step_choose">
<p id="step_line0"></p>
<div class="step_choose1">
<div class="step1_img"></div>
<p>A</p>
</div>
<p id="step_line1"></p>
<div class="step_choose2">
<a href=""><div class="step2_img"></div></a>
<p>B</p>
</div>
<p id="step_line2"></p>
<div class="step_choose3">
<a href=""><div class="step3_img"></div></a>
<p>C</p>
</div>
<p id="step_line3"></p>
<div class="step_choose4">
<a href=""><div class="step4_img"></div></a>
<p>D</p>
</div>
<p id="step_line4"></p>
</div>
<div class="step_choose_section">
<div class="step_choose_box">
<div class="step_choose_box_container">
<div class="step_choose_box_left">
<p1>step1.</p1>
<p2>멘트</p2>
</div>
<p>스텝 설명</p>
<div class="a">
<p1>1</p1>
<p2>1'</p2>
</div>
<div class="b">
<p1>2</p1>
<p2>2'</p2>
</div>
<div class="c">
<p1>3</p1>
<p2>3'</p2>
</div>
</div>
<div class="step_choose_box_right">
<div class="step_left_img"></div>
</div> </div>
<div class="step_choose_box_bottom">
<p1>← before</p1>
<p2>next →</p2>
</div>
</div>
</div>
</div>
밑은 css 파일입니다.
/*step_section*/
.step_section{
width: 100%;
height: auto;
}
.step_box{
width: 100%;
height: 790px;
margin: 0 auto;
}
.step_container{
width: 1440px;
margin: 40px auto 0 auto;
}
.step_head_left{
display: flex;
flex-direction: row;
width: 90%;
}
.step_icon{
background: url(../img/main_service.png)no-repeat;
width: 32px;
background-size: contain;
}
.step_head_left p{
font-size: 20px;
margin-right: 10px;
}
.step_blue{
color: #264374;
font-weight: bold;
}
.step_choose{
width: 100vw;
height: auto;
margin-top: 40px;
display: flex;
}
.step_choose1, .step_choose2, .step_choose3, .step_choose4{
width: 25%;
height: 100px;
}
.step1_img, .step2_img, .step3_img, .step4_img{
width: 100px;
height: 100px;
margin: 0 auto;
}
.step1_img{
background: url('../img/main_step_one_bl.png') no-repeat;
background-size: contain;
}
.step2_img{
background: url('../img/main_step_two_gr.png') no-repeat;
background-size: contain;
}
.step3_img{
background: url('../img/main_step_three_gr.png') no-repeat;
background-size: contain;
}
.step4_img{
background: url('../img/main_step_four_gr.png') no-repeat;
background-size: contain;
}
#step_line0{
width: 80%;
height: 2px;
border: #243E6C 2px solid;
background-color: #243E6C;
z-index: -1;
margin: auto 0;
}
#step_line1, #step_line2, #step_line3, #step_line4{
width: 80%;
height: 2px;
border: #c3c3c3 2px solid;
background-color: #c3c3c3;
z-index: -1;
margin: auto 0;
}
.step_choose1 p, .step_choose2 p, .step_choose3 p, .step_choose4 p{
width: 100%;
font-size: 18px;
margin: 20px auto 0 auto;
}
.step_choose_section{
width: 1440px;
height: 360px;
margin: 100px auto;
}
.step_choose_box{
height: 360px;
border: #2d3259 3px solid;
border-radius: 15px 15px 0 0;
display: flex;
}
.step_choose_box_container{
width: 848px;
margin: 40px 0 0 40px;
}
.step_choose_box_left{
margin-bottom: 20px;
}
.step_choose_box_left p1{
color: #2D3E59;
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.step_choose_box_left p2{
color: #3d3d3d;
font-size: 20px;
font-weight: 20px;
}
.step_left_img{
background: url('../img/main_img1.png') no-repeat;
width: 520px;
height: 286px;
}
.step_choose_box_container p{
font-size: 22px;
counter-reset: #3d3d3d;
margin-bottom: 20px;
width: 800px;
}
.a, .b, .c{
font-size: 18px;
display: flex;
font-weight: bold;
}
.a p1, .b p1, .c p1{
color: #3d3d3d;
margin: 0 20px 5px 0;
}
.a p2, .b p2, .c p2{
color: #2d3259;
text-decoration: underline;
}
.step_choose_box_right{
width: 520px;
margin-top: 40px;
}
.step_choose_box_bottom{
margin: 0 auto 0 auto;
width: 100%;
height: 60px;
background-color: #2D3E59;
border-radius: 0 0 15px 15px;
display: flex;
}
.step_choose_box_bottom p1{
margin: auto 0 auto 40px;
font-size: 18px;
font-weight: bold;
color: #fefefe;
width: 79%;
}
.step_choose_box_bottom p2{
margin: auto 0 auto 40px;
font-size: 18px;
font-weight: bold;
color: #fefefe;
float: right;
}
한 페이지 내에서 다른 html파일을 추가하지 않고 각 요소를 클릭했을 때 상자 안의 내용이 다르게 뜨게끔 하고 싶고 onclick을 이용하면 될 것 같은데 명령어를 어떻게 줘야하는지 감이 안 잡혀서 질문드려요. 사진은 현재 html과 css로 구성해둔거고, 여기서 B, C, D(원래는 아이콘 이미지이나 현재 빈 동그라미로 대체해두었습니다.)와 하단의 before, after를 누르면 현재 모든 포맷의 위치는 그대로면서 각 스텝에 맞게 내용이 바뀌도록 하고 싶은데요. 자바 스크립트로 명령어를 어떻게 줘야하는걸까요? B를 누르면 A와 B 사이의 막대기 색깔도 변하게 하고 싶습니다. 막대기는 <p>를 써서 border를 준거구요.
아래는 제가 짜둔 html과 css 파일입니다.
현재는 html 파일입니다.
<div class="step_section">
<div class="step_box">
<div class="step_container">
<div class="step_head_left">
<div class="step_icon"></div>
<p>멘트1</p>
<p class="step_blue">멘트2</p>
</div>
</div>
<div class="step_choose">
<p id="step_line0"></p>
<div class="step_choose1">
<div class="step1_img"></div>
<p>A</p>
</div>
<p id="step_line1"></p>
<div class="step_choose2">
<a href=""><div class="step2_img"></div></a>
<p>B</p>
</div>
<p id="step_line2"></p>
<div class="step_choose3">
<a href=""><div class="step3_img"></div></a>
<p>C</p>
</div>
<p id="step_line3"></p>
<div class="step_choose4">
<a href=""><div class="step4_img"></div></a>
<p>D</p>
</div>
<p id="step_line4"></p>
</div>
<div class="step_choose_section">
<div class="step_choose_box">
<div class="step_choose_box_container">
<div class="step_choose_box_left">
<p1>step1.</p1>
<p2>멘트</p2>
</div>
<p>스텝 설명</p>
<div class="a">
<p1>1</p1>
<p2>1'</p2>
</div>
<div class="b">
<p1>2</p1>
<p2>2'</p2>
</div>
<div class="c">
<p1>3</p1>
<p2>3'</p2>
</div>
</div>
<div class="step_choose_box_right">
<div class="step_left_img"></div>
</div>
</div>
<div class="step_choose_box_bottom">
<p1>← before</p1>
<p2>next →</p2>
</div>
</div>
</div>
</div>
밑은 css 파일입니다.
/*step_section*/
.step_section{
width: 100%;
height: auto;
}
.step_box{
width: 100%;
height: 790px;
margin: 0 auto;
}
.step_container{
width: 1440px;
margin: 40px auto 0 auto;
}
.step_head_left{
display: flex;
flex-direction: row;
width: 90%;
}
.step_icon{
background: url(../img/main_service.png)no-repeat;
width: 32px;
background-size: contain;
}
.step_head_left p{
font-size: 20px;
margin-right: 10px;
}
.step_blue{
color: #264374;
font-weight: bold;
}
.step_choose{
width: 100vw;
height: auto;
margin-top: 40px;
display: flex;
}
.step_choose1, .step_choose2, .step_choose3, .step_choose4{
width: 25%;
height: 100px;
}
.step1_img, .step2_img, .step3_img, .step4_img{
width: 100px;
height: 100px;
margin: 0 auto;
}
.step1_img{
background: url('../img/main_step_one_bl.png') no-repeat;
background-size: contain;
}
.step2_img{
background: url('../img/main_step_two_gr.png') no-repeat;
background-size: contain;
}
.step3_img{
background: url('../img/main_step_three_gr.png') no-repeat;
background-size: contain;
}
.step4_img{
background: url('../img/main_step_four_gr.png') no-repeat;
background-size: contain;
}
#step_line0{
width: 80%;
height: 2px;
border: #243E6C 2px solid;
background-color: #243E6C;
z-index: -1;
margin: auto 0;
}
#step_line1, #step_line2, #step_line3, #step_line4{
width: 80%;
height: 2px;
border: #c3c3c3 2px solid;
background-color: #c3c3c3;
z-index: -1;
margin: auto 0;
}
.step_choose1 p, .step_choose2 p, .step_choose3 p, .step_choose4 p{
width: 100%;
font-size: 18px;
margin: 20px auto 0 auto;
}
.step_choose_section{
width: 1440px;
height: 360px;
margin: 100px auto;
}
.step_choose_box{
height: 360px;
border: #2d3259 3px solid;
border-radius: 15px 15px 0 0;
display: flex;
}
.step_choose_box_container{
width: 848px;
margin: 40px 0 0 40px;
}
.step_choose_box_left{
margin-bottom: 20px;
}
.step_choose_box_left p1{
color: #2D3E59;
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.step_choose_box_left p2{
color: #3d3d3d;
font-size: 20px;
font-weight: 20px;
}
.step_left_img{
background: url('../img/main_img1.png') no-repeat;
width: 520px;
height: 286px;
}
.step_choose_box_container p{
font-size: 22px;
counter-reset: #3d3d3d;
margin-bottom: 20px;
width: 800px;
}
.a, .b, .c{
font-size: 18px;
display: flex;
font-weight: bold;
}
.a p1, .b p1, .c p1{
color: #3d3d3d;
margin: 0 20px 5px 0;
}
.a p2, .b p2, .c p2{
color: #2d3259;
text-decoration: underline;
}
.step_choose_box_right{
width: 520px;
margin-top: 40px;
}
.step_choose_box_bottom{
margin: 0 auto 0 auto;
width: 100%;
height: 60px;
background-color: #2D3E59;
border-radius: 0 0 15px 15px;
display: flex;
}
.step_choose_box_bottom p1{
margin: auto 0 auto 40px;
font-size: 18px;
font-weight: bold;
color: #fefefe;
width: 79%;
}
.step_choose_box_bottom p2{
margin: auto 0 auto 40px;
font-size: 18px;
font-weight: bold;
color: #fefefe;
float: right;
}
#자바 스크립트 #자바 스크립트 문법 #자바 스크립트 기초 #자바 스크립트 다운로드 #자바 스크립트 배열 #자바 스크립트 자바 차이 #자바 스크립트 오류 #자바 스크립트 주석 #자바 스크립트 for문 #자바 스크립트 실행
