css border 속성 관련 질문 드립니다.
조회수 619회
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{border:2px solid red;}
</style>
</head>
<body>
<div>
aaa
</div>
</body>
</html>
안녕하세요, 현재 웹퍼블리싱에 관심이 생겨 유투브를 보며 알음알음 혼자 따라해보고 있었는데요. 도중에 궁금증이 생겨 질문을 드리게 되었습니다!
css에서 div 태그에 border 값을 주면 이상한(?) 모양새가 되는 이유를 여쭙고 싶습니다!
div에 class 선택자로 border 값을 주면 왼쪽 상단에 네모박스 같은 것도 안뜨고, 선 굵기도 일정하게 나오는데요.
태그 선택자로 div에 스타일을 줬을 때만 왼쪽 상단에 네모박스가 생기고 선의 굵기가 제각각 나옵니다. 답변주시면 정말 가려운 곳이 해결될 것 같습니다. 감사합니다.
4 답변
-
저는 브라우저에서 차이가 없게 나오는데... 생긴다는 네모 박스가 어떤 것인지 모르겠네요
class selector 만 쓰고 나머지 똑같은데 차이가 없습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .divClass{ border: 2px solid red; } </style> </head> <body> <div class="divClass"> aaa </div> </body> </html> -
https://i.stack.imgur.com/gEvyr.jpg 이미지 여기 있습니다 ㅜ
- 다른 css에 의해 덮어씌워진 것 아닐까 싶은데요... 브라우저 데브툴 에서 div에 걸리는 스타일, 덮어씌워지는 스타일을 볼 수 있으니 확인해보세요 rahon6000@gmail.com 2023.10.15 18:42
- 네 답변 정말 감사합니다! 이승원 2023.10.15 21:36
-
아예 덮어씌우는 css가 없도록 새 파일 만들어서 border속성 하나만 적용해도 결과가 같더라구요.. chrome 오류인지 뭔지 모르겠지만 아시는 분들은 답변 부탁드립니다. ㅜㅜ
첫번째, div 태그에 태그 선택자로 border 적용한 경우 (문제 상황)
[이미지 첨부] https://ibb.co/MRrDc9S
두번째, p 태그에 태그 선택자로 border 적용한 경우 > 똑같은 블록 속성이라 실험해봤는데 정상적으로 출력됨 > 문제 없음
[이미지 첨부] https://ibb.co/9grTJpM
세번째, div 태그에 class 선택자로 border 적용한 경우 > 선택자를 class 선택자로 바꿔 실험해봤는데 정상적으로 출력됨 > 문제 없음
[이미지 첨부] https://ibb.co/QcQM819
위의 상황을 봐서는 div 태그에 태그 선택자로 적용했을 때만 저런 현상이 나는 것 같은 데 둘이 무슨 문제가 있는 건지.. 이것 때문에 하루종일 궁금해 미치겠네요..
혹시 몰라 제가 쓴 문서도 그대로 첨부할게요
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{border: 2px solid red;} </style> </head> <body> <div> aaa </div> </body> </html> -
주신 이미지의 소스 쪽을 잘 보실께요. 이런 게 보입니다.
<div id="__endic_crx__">...</div>이것도
div입니다. 그러면 이div에도border가 적용이 되겠죠. 제 추측으로는, 이div는1px*1px짜리 투명div라서, 제일 왼쪽 제일 상단 구석에 조그맣게 있는 파란 네모로 표현되는 것 아닌가 싶습니다.길쭉한 div의 하단도 마찬가지입니다. 여기에도 잘 보시면 이런 게 보입니다.
<!-- Code injected by live-server --> <script>...</script>모르긴 몰라도 저 script 태그 안쪽에 뭔가 안 보이는 div가 있을 겁니다. 걔도 div는 div니까 border가 그려지겠지요. 그래서 결과적으로 마치 "선 굵기가 일정하지 않은" 것처럼 보이는 겁니다. 굵기가 2px인 border가 그려져 있고, 그 안에, 바닥에 딱 붙어서, 또 굵기가 2px인 border가 그려진 거지요.
질문자님이 짠 적 없는 코드라고 해도 개발자콘솔에서 살펴보면 뭔가 더 추가되는 경우가 있습니다. 어떤 자바스크립트들은 document에 뭔가를 더 추가로 write하거든요. 그런 유령 요소들이 검출되고 있는 것 아닌가 생각됩니다. 컴퓨터는 거짓말 안해요. 개발자 콘솔로 더 깊이 들여다보시겠어요?
댓글 입력