html class 선언 코드 질문

조회수 282회

html 막 시작한 코딩 초보입니다. class 선언하고, 검색창(input)란에 image를 씌우려고 class를 선언했는데, 적용이 안됩니다. 엉뚱한 코드에만 적용이 됩니다 ㅠㅠ 무엇이 문제일까요??

<head>

  <style type="text/css">
    .search {
    position: relative;
    width: 300px; }

  input {
    width: 100%;
    border: 1px solid #bbb;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px; }

  img {
    position : absolute;
    width: 17px;
    top: 10px;
    left: 120px;
    margin: 0; }
  </style>

<img src = "wikipidia-main.jpg" style = "width: 20em; height: 5em;" alt = "위키백과">

<div class="search">
  <input type="text" placeholder="검색어 입력">
  <img src="search_top_en_US.gif">
</div>


</head>

1 답변

  • 이걸로 해보시겠어요?

    /* .search 클래스를 갖는 요소 안에 있는 img 요소에 다음 규칙을 적용한다 */
    .search img {
        position : absolute; /* 이하 생략 */
    }
    

    그나저나 헤드가 너무 크네요! 머리("head") 안에 이미지며 입력칸 등의 몸("body")이 들어가 있다니 아주 기형아가 따로 없군요. </head></style> 바로 뒤로 이동시키시고, 나머지는 <body> 태그로 감싸 주세요.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)