04. 실제 html 홈페이지 구현해보기

"bootstrap" 을 활용하여 실제 html 홈페이지를 구현해보려 한다.

구현하고자 하는 홈페이지는 아래의 사이트창이다.

https://artculture4u.co.kr/question

FAQ | 널 위한 99티켓

99명의 아트러버를 위한 특별한 초대장

artculture4u.co.kr

<!DOCTYPE html>

<html>

<head>

<style>

#question {

text-align: left;

}

#faq {

text-align: left;

}

div {

text-align: center;

}

#header {

text-align:center;

float:center;

}

#section2 {

display: block;

margin : auto;

}

#footer {

color:gray;

padding:3px;

float:center;

}

</style>

rel="stylesheet"

integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"

crossorigin="anonymous">

src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

</head>

<img src="https://contents.sixshop.com/uploadedFiles/135012/default/image_1640064463891.png"

width="15%" height="15%" />

</a>

</div>

<a class="nav-link active" aria-current="page" href="https://artculture4u.co.kr/about">About</a>

</li>

</li>

</li>

</ul>

</div>

</li>

</li>

</ul>

</div>

<hr/>

네비게이션 바_각 영역 클릭 시, 지정된 링크로 이동(SHOP 클릭 시)

자주 하는 질문

</h1>

</br>

<p>

Q. 결제 당일 티켓 사용이 가능한가요?</br>

네, 가능합니다. 배송 상품이 아니므로 예매 당일부터 바로 사용하실 수 있습니다.

</p>

<p>

Q. 현장에서 티켓 사용은 어떻게 하나요?</br>

널 위한 99티켓은 전시장 현장에 도착 후 데스크에서 '널 위한 문화예술'의 예매자임을 말씀해주신 뒤,

예매시 입력하신 연락처와 성함을 알려주시면 입장이 가능합니다.

전시장마다 보다 정확한 확인을 위해 주문번호가 필요할 수 있으니,

사전에 주문번호를 미리 확인해주세요.</p>

<p>

Q. 환불 규정은 어떻게 되나요?</br>

기간한정상품으로 예매 후 7일 이후엔 취소와 환불이 불가합니다.

예매 후 7일 이내로 취소하실 경우 환불을 도와드리고 있습니다.

info@artcultrue4u.kr로 주문번호와 성함을 말씀해주시면 24시간 이내 확인해 환불 진행해드립니다.

환불이 정상적으로 처리된 이후, 환불 금액 입금까지 카드/은행사에 따라 3~7 영업일이 소요될 수 있습니다.

</p>

</div>

<p>

Q. 주문번호는 어디서 볼 수 있나요?</br>

로그인 개인정보 주문내역 주문상세정보 페이지에서 13자리 주문번호를 확인하실 수 있습니다.

</p>

<p>

Q. 비회원으로 주문했는데 주문번호가 기억나지 않아요.</br>

로그인 비회원 주문 조회하기를 통해 확인하실 수 있습니다.

비회원 고객께서는 주문번호를 통해 예매 정보를 확인하실 수 있으므로

예매 시 주문번호를 캡쳐하는 것을 추천드립니다.

기타 문의는 info@artcultrue4u.kr로 '전화번호/성함'과 함께 문의 부탁드립니다.

</p>

<p>

Q. '99티켓'과 '최저가 할인 티켓'은 무엇이 다른가요?</br>

'99티켓'은 높은 할인율을 비롯해 전시 굿즈 등 특별한 혜택이 추가된 프리미엄 티켓 상품입니다.

최소 99장부터 선착순 한정 수량 판매됩니다.

'최저가 할인 티켓'은 프리미엄 혜택은 없으나 시중 가격의 최저가로 티켓을 구매하실 수 있는 상품입니다.

</p>

</div>

1:1 문의

</h1>

</br>

</div>

<label for="exampleFormControlInput1"

class="form-label">이메일</label>

<input type="email" class="form-control"

id="exampleFormControlInput1" placeholder="hong@example.com" name="mem_email">

</div>

<label for="exampleFormControlTextarea1"

class="form-label">주문 번호 * <h6>(주문자 대조 목적입니다. 주문을 하지 않으셨다면 기입하지 않으셔도 됩니다.)</h6></label>

</div>

<label for="exampleFormControlTextarea1"

class="form-label">문의 내용 *</label>

<textarea class="form-control"

id="exampleFormControlTextarea1"

rows="3" name="mem_contents" required></textarea>

</div>

<hr/>

integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"

crossorigin="anonymous"></script>

</form>

</body>

</html>

[전체 코드]

<!DOCTYPE html>

<html>

<head>

<style>

#question {

text-align: left;

}

#faq {

text-align: left;

}

div {

text-align: center;

}

#header {

text-align:center;

float:center;

}

#section2 {

display: block;

margin : auto;

}

#footer {

color:gray;

padding:3px;

float:center;

}

</style>

rel="stylesheet"

integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"

crossorigin="anonymous">

src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

</head>

<img src="https://contents.sixshop.com/uploadedFiles/135012/default/image_1640064463891.png"

width="15%" height="15%" />

</a>

</div>

<a class="nav-link active" aria-current="page" href="https://artculture4u.co.kr/about">About</a>

</li>

</li>

</li>

</ul>

</div>

</li>

</li>

</ul>

</div>

<hr/>

자주 하는 질문

</h1>

</br>

<p>

Q. 결제 당일 티켓 사용이 가능한가요?</br>

네, 가능합니다. 배송 상품이 아니므로 예매 당일부터 바로 사용하실 수 있습니다.

</p>

<p>

Q. 현장에서 티켓 사용은 어떻게 하나요?</br>

널 위한 99티켓은 전시장 현장에 도착 후 데스크에서 '널 위한 문화예술'의 예매자임을 말씀해주신 뒤,

예매시 입력하신 연락처와 성함을 알려주시면 입장이 가능합니다.

전시장마다 보다 정확한 확인을 위해 주문번호가 필요할 수 있으니,

사전에 주문번호를 미리 확인해주세요.</p>

<p>

Q. 환불 규정은 어떻게 되나요?</br>

기간한정상품으로 예매 후 7일 이후엔 취소와 환불이 불가합니다.

예매 후 7일 이내로 취소하실 경우 환불을 도와드리고 있습니다.

info@artcultrue4u.kr로 주문번호와 성함을 말씀해주시면 24시간 이내 확인해 환불 진행해드립니다.

환불이 정상적으로 처리된 이후, 환불 금액 입금까지 카드/은행사에 따라 3~7 영업일이 소요될 수 있습니다.

</p>

</div>

<p>

Q. 주문번호는 어디서 볼 수 있나요?</br>

로그인 개인정보 주문내역 주문상세정보 페이지에서 13자리 주문번호를 확인하실 수 있습니다.

</p>

<p>

Q. 비회원으로 주문했는데 주문번호가 기억나지 않아요.</br>

로그인 비회원 주문 조회하기를 통해 확인하실 수 있습니다.

비회원 고객께서는 주문번호를 통해 예매 정보를 확인하실 수 있으므로

예매 시 주문번호를 캡쳐하는 것을 추천드립니다.

기타 문의는 info@artcultrue4u.kr로 '전화번호/성함'과 함께 문의 부탁드립니다.

</p>

<p>

Q. '99티켓'과 '최저가 할인 티켓'은 무엇이 다른가요?</br>

'99티켓'은 높은 할인율을 비롯해 전시 굿즈 등 특별한 혜택이 추가된 프리미엄 티켓 상품입니다.

최소 99장부터 선착순 한정 수량 판매됩니다.

'최저가 할인 티켓'은 프리미엄 혜택은 없으나 시중 가격의 최저가로 티켓을 구매하실 수 있는 상품입니다.

</p>

</div>

1:1 문의

</h1>

</br>

</div>

<label for="exampleFormControlInput1"

class="form-label">이메일</label>

<input type="email" class="form-control"

id="exampleFormControlInput1" placeholder="hong@example.com" name="mem_email">

</div>

<label for="exampleFormControlTextarea1"

class="form-label">주문 번호 * <h6>(주문자 대조 목적입니다. 주문을 하지 않으셨다면 기입하지 않으셔도 됩니다.)</h6></label>

</div>

<label for="exampleFormControlTextarea1"

class="form-label">문의 내용 *</label>

<textarea class="form-control"

id="exampleFormControlTextarea1"

rows="3" name="mem_contents" required></textarea>

</div>

<hr/>

integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"

crossorigin="anonymous"></script>

</form>

</body>

</html>

'기타' 카테고리의 다른 글

02. Oracle - Django 연결 환경설정 (1)	2023.03.16
01. SQL Developer(Oracle), HeidiSQL(MySQL) (0)	2023.03.14
03. 화면정의서 만들기(화면설계 시) (0)	2023.03.07
02. 메뉴구조도 만들기(화면설계 시) (0)	2023.03.07
01. 프로젝트 전체과정은 어떻게 진행되는가? (0)	2023.03.07

알고리즘

04. 실제 html 홈페이지 구현해보기_bootstrap 활용

'기타' 카테고리의 다른 글

티스토리툴바

04. 실제 html 홈페이지 구현해보기_bootstrap 활용

'기타' 카테고리의 다른 글

'기타' Related Articles

티스토리툴바