제가 http://www.roadbook.co.kr/48 사이트에서
"362 페이지의 아래 소스에서
article table#notice th 선택자에
text-align:center; 속성이 빠져 있네요. 제목 글자들을 책의 그림과 같이 중앙으로 맞추어 주려면
text-align:center; 속성을 추가해 줘야 할 것 같습니다."
라고 문의를 했었는데요.
답변을 주셨는데요.
"<<양용석 저자의 답변입니다. 오타 외에 기타 질문 사항은 가능하면 Q&A 게시판을 이용해주세요~~~.>>
기본적으로 th 는 속성이 중앙정렬입니다.
따라서 굳이 속성을 지정하지 않더라도 중앙으로 정렬됩니다.
다만 상속에 의하여 왼쪽 또는 오른쪽으로 정렬되었을 경우에 한해 속성을 따로 지정해야 합니다."
그런데 제가 해결하지 못하는 문제가 하나 있어서 추가 질문드립니다.
익스플로러의 경우는 text-align:center; 를 지정하지 않더라도 모든 th항목이 중앙정렬이 되는데요.
크롬이나 파이어폭스 브라우저에서는 text-align:center; 를 지정하지 않으면 왼쪽정렬이 되더라구요.
익스플로러 뿐만 아니라 크롬이나 파이어폭스 브라우저 모두 th상에서 텍스트가 중앙정렬이 되는데요.
왜 이 코드 부분에서는 지정을 하지 않으면 크롬이나 파이어폭스 브라우저에서 중앙정렬이 되지 않는지 모르겠습니다.
제가 코딩한 소스 뿐만 아니라 제공해주고 있으신 첨부파일에서도 동일한 증상이 나타나거든요.
이 부분이 도대체 어디에 영향을 받아서 그런지 모르겠습니다.
한번 확인해 보시고 답변 주시면 감사하겠습니다.
"362 페이지의 아래 소스에서
article table#notice th 선택자에
text-align:center; 속성이 빠져 있네요. 제목 글자들을 책의 그림과 같이 중앙으로 맞추어 주려면
text-align:center; 속성을 추가해 줘야 할 것 같습니다."
라고 문의를 했었는데요.
답변을 주셨는데요.
"<<양용석 저자의 답변입니다. 오타 외에 기타 질문 사항은 가능하면 Q&A 게시판을 이용해주세요~~~.>>
기본적으로 th 는 속성이 중앙정렬입니다.
따라서 굳이 속성을 지정하지 않더라도 중앙으로 정렬됩니다.
다만 상속에 의하여 왼쪽 또는 오른쪽으로 정렬되었을 경우에 한해 속성을 따로 지정해야 합니다."
그런데 제가 해결하지 못하는 문제가 하나 있어서 추가 질문드립니다.
익스플로러의 경우는 text-align:center; 를 지정하지 않더라도 모든 th항목이 중앙정렬이 되는데요.
크롬이나 파이어폭스 브라우저에서는 text-align:center; 를 지정하지 않으면 왼쪽정렬이 되더라구요.
익스플로러 뿐만 아니라 크롬이나 파이어폭스 브라우저 모두 th상에서 텍스트가 중앙정렬이 되는데요.
왜 이 코드 부분에서는 지정을 하지 않으면 크롬이나 파이어폭스 브라우저에서 중앙정렬이 되지 않는지 모르겠습니다.
제가 코딩한 소스 뿐만 아니라 제공해주고 있으신 첨부파일에서도 동일한 증상이 나타나거든요.
이 부분이 도대체 어디에 영향을 받아서 그런지 모르겠습니다.
한번 확인해 보시고 답변 주시면 감사하겠습니다.
2013.07.10 10:19:05 (*.55.66.41)
저자님께서 파폭에서는 적용이 안된다고 하셨는데요.
그건 아닌 것 같습니다.
아래 소스를 가지고 IE, 크롬, 파폭 모두 테스트 해보면 th부분에 대한 글자가 중앙에 잘 나타납니다.
하지만, 위에서 질문드린 소스에서는 이상하게도 text-align:center; 를 지정하지 않으면
IE에서는 중앙정렬이 되지만, 크롬이나 파폭에서는 그냥 왼쪽 정렬로 나와 버린다는 겁니다.
이게 왜 그런건지 모르겠네요. 한번 확인 해 봐주세요. 저는 현재까지 해결점을 찾지 못했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
그건 아닌 것 같습니다.
아래 소스를 가지고 IE, 크롬, 파폭 모두 테스트 해보면 th부분에 대한 글자가 중앙에 잘 나타납니다.
하지만, 위에서 질문드린 소스에서는 이상하게도 text-align:center; 를 지정하지 않으면
IE에서는 중앙정렬이 되지만, 크롬이나 파폭에서는 그냥 왼쪽 정렬로 나와 버린다는 겁니다.
이게 왜 그런건지 모르겠네요. 한번 확인 해 봐주세요. 저는 현재까지 해결점을 찾지 못했습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
2013.07.10 11:45:09 (*.8.73.101)
해당 소스에 보시면 #wrap 부분에 text-align:left; 가 적용되어 있는데 여기서 상속을 받은 것입니다.
따라서 해당 테이블의 th 부분을 text-align:center를 적용해야만 크롬과 파폭에서는 가운데 정렬이 되는 것입니다. 하지만 IE에서는 상속을 전혀 받질 않네요. 따라서 IE에서는 가운데 정렬이 되고, 나머지 브라우저에서는 가운데 정렬을 적용해야만 합니다.
지금 만든 소스도
#wrap {
width:971px;
text-align:left;
margin:0;
}
CSS 에 #wrap을 넣고 HTML 부분에 div id="wrap" 을 이용해서 테이블을 감싸 보시기 바랍니다.
따라서 해당 테이블의 th 부분을 text-align:center를 적용해야만 크롬과 파폭에서는 가운데 정렬이 되는 것입니다. 하지만 IE에서는 상속을 전혀 받질 않네요. 따라서 IE에서는 가운데 정렬이 되고, 나머지 브라우저에서는 가운데 정렬을 적용해야만 합니다.
지금 만든 소스도
#wrap {
width:971px;
text-align:left;
margin:0;
}
CSS 에 #wrap을 넣고 HTML 부분에 div id="wrap" 을 이용해서 테이블을 감싸 보시기 바랍니다.
(저자 양용석 드림)