코딩 스쿨에 오신것을 환영합니다~~

질의응답 게시판

 
HTML/CSS 입문 ex7-3 질문드립니다.
황 * 주 | 2022-02-06
▷ 첨부파일 : border-collapse_bordrer-top(표).png (16361 Byte)      [저장]

6~8행에 table {border-collapse: collapse: collapse;}와
12~14행에 table {border-top: solid 3px orange;}

위 두 개의 css 값은 같은 table 태그를 선택하여 꾸며주는 것인데
왜 다른 행에 입력해야 하나요?

실제로 12행을 지우고 6행 table 태그에 border-top css 값을 같이 넣어봤더니
orange 색상이 구현되지 않는 것 같습니다. (아래와 같이)

table {border-collapse: collapse: collapse;border-top: solid 3px orange;}

확인 부탁드려요!



  • 관 * 자
  • 2022-02-06 (12:07)
안녕하세요.

한 줄에 같이 넣어도 됩니다.

말씀하신 부분을 다음과 같이 해보세요.

table {border-collapse: collapse; border-top: solid 3px orange;}

^^
  • 황 * 주
  • 2022-02-06 (21:34)
빠른 답변 감사드립니다!
제가 질문할 때 코드를 잘못 써서 올렸네요 ㅠㅠ
코드 오류가 아니라 제가 선생님이 말씀하신 대로 써도 '첨부 파일'처럼 border-top 오렌지 색상이 없는 상태로 구현이 됩니다... ㅠㅠ 
  • 관 * 자
  • 2022-02-07 (01:46)
안녕하세요.

table { 
border-collapse: collapse; 
border-top: solid 3px orange; 
}
table, th, td { 
border: solid 1px #cccccc; 
}

와 같이 하면 두 번째 table 선택자의 명령 border: solid 1px #cccccc; 이 적용되기 때문에 
앞에서 그린 3픽셀 오렌지 경계선이 그 다음 그려진 1픽셀 두께의 선에 의해 없어지게 됩니다.

CSS는 위에서 부터 순차적으로 적용이됩니다.

따라서 위와 같은 경우에는 마지막의 회색 경계선이 그려지게되는 것입니다.

table, th, td { 
border: solid 1px #cccccc; 
}
table { 
border-collapse: collapse; 
border-top: solid 3px orange; 
}

다음과 같이 해보시면 3픽셀 오렌지 경계선이 그려집니다.

함 해보시기 바랍니다.^^
  • 황 * 주
  • 2022-02-07 (12:33)
아 그렇군요! 아래쪽에 입력했어야 했는데 위에 입력해서 구현이 되지 않은 거군요. 이해했습니다. 감사합니다 ^^!