테이블은 어찌 만드나요?

테이블은 어찌 만드나요?

QA

테이블은 어찌 만드나요?

본문

이런 테이블? 은 어찌 만드나요?

가로로 이런 모양으로 3개를 넣고 싶은데 가능할까요? 

 

텍스트도 그렇구 조언 봄 부탁드립니다. 

fe6e58d642c217642fe8992250a6f141_1490239897_895.jpg
 

이 질문에 댓글 쓰기 :

답변 5

가로로 3개 넣고 싶으시다면

 

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="clear:both"></div>

 

이런식으로 float:left 정렬 조건을 줍니다.

그리고 정렬 조건 이후 마지막엔 <div style="clear:both"></div> 이렇게 마무리 해주시구요 

<div style="width:300px; height:390px; text-align:center; background:#0c3c60;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

 

간단하게는 이렇게 구현 가능합니다. 

HTML https://www.homzzang.com/b/html  (div, table 위주)

CSS  https://www.homzzang.com/b/css   (margin, padding, float 위주)

 

HTML CSS 2주 시간내서 전체를 꼼꼼히 공부하시면, 

웬만한 레이아웃은 다 짜실 수 있을 겁니다.

 

양이 많지 않아서 빨리 공부면 3 ~ 5일 정도에 다 공부 가능합니다.

우선 기본적으로 css 의 이해가 우선인것 같습니다.

 

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left; margin-right:10px;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left; margin-right:10px;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="width:300px; height:390px; text-align:center; background:#0c3c60; float:left;">

<span style="font-size:14pt; color:#c9dcea">텍스트1</span><br>

<span style="font-size:12pt; color:#c9dcea">텍스트2</span><br>

</div>

<div style="clear:both"></div>

 

margin-right:10px;

이런식으로 오른쪽에 마진을 10px 주시면 여백을 주실 수 있습니다. 

답변을 작성하시기 전에 로그인 해주세요.
전체 153
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT