오늘 시험에 나온 html이 이해가 가지 않아 질문합니다.
글쓴이: happyoht11 / 작성시간: 일, 2021/07/25 - 11:28오후
제목과 같이 오늘 시험본 내용중 처음보는 내용이 있어 질문합니다.
html에서 표 또는 일반 텍스트를 출력할 때, 글자 주위에 음영 또는 표 한칸 색채우기를 할 때
@텍스트내용, ~텍스트내용, #텍스트 내용 이런 방식으로 입력하여 조절하는 방법이 있나요?
앞의 기호 중 하나를 선택하여 고르는 문제였는데 저는 처음 보는거라 이해가 안가네요.ㅠㅠ
전문가님들 부탁드립니다.
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td> <!--Jill부분에 @Jill 이런식으로 보기가 있었습니다-->
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>출처: https://hading.tistory.com/129 [Hading]
p.s. 시험에서 제시된 결과물은 첨부된 사진과 같았습니다.
File attachments:
| 첨부 | 파일 크기 |
|---|---|
 예시.JPG | 11.34 KB |
Forums:
CSS(Cascading Style Sheet)
CSS(Cascading Style Sheet) 공부해보셔요.
세벌 https://sebuls.blogspot.kr/
질문을 정확히 이해를 못하겠는데, 어쨌든.. css
질문을 정확히 이해를 못하겠는데, 어쨌든.. css 에서 텍스트 내용을 selector 로 사용했다면 가능은 했을 것 같기는 합니다. (질문을 제대로 이해했다는 전제하에..) jill 의 경우, 첫번째 table 의 2번째 tr 의 첫번째 td 인
table:nth-child(0) > tr:nth-child(1) > td:nth-child(0) {
background-color: #cdcdcd;
}
이정도로 Jill 의 td 를 select 할 수 있을 거고요. 또는
td[class^=@]
이렇게 하면 td 의 class 이름이 @으로 시작하는 경우로 select 할 수 있습니다.
하지만, 님이 말씀하신 것 처럼, td 에 출력되는 내용 중에서 @..., #... 이렇게 구분을 하려면 javascript 를 이용해서 td 의 문자열을 확인하여 css 로 변경을 해야 할 것 같네요. 딱히 css 만으로는 가능할지 모르겠네요.
일단 기본 HTML 만으로는 안되고, CSS 의 selector 에 대해서 공부해 보시면 도움이 될 겁니다. 그리고 javascript 도 아셔야 할 겁니다. 현재의 HTML 은 CSS/Javascript 없이는 앙꼬없는 찐빵 입니다.
댓글 달기