inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tìm hiểu HTML và CSS bằng cách làm theo

Tạo tiêu đề

profile__picture 사진 크기 조정

Đã giải quyết

326

didwl07126808

1 câu hỏi đã được viết

0

<header class="header">
        <nav class="header__content">
            <div class="header__buttons">
                <a href="index.html" class="header__home">
                    <img src="assets/icons/logo.svg" alt="logo">
                </a>
            </div>
            <div class="header__search">
                <img src="assets/icons/search.svg" alt="search">
                <input type="text" placeholder="Search...">
            </div>
            <div class="header__buttons">
                <a href="#none">
                    <img src="assets/icons/home.svg" alt="home">
                </a>
                <a href="#none">
                    <img src="assets/icons/shop.svg" alt="shop">
                </a>
                <a href="#none">
                    <img src="assets/icons/messenger.svg" alt="messenger">
                </a>
                <div class="profile__picture">
                    <img src="assets/images/avatar.png" alt="user picture">
                </div>
            </div>
        </nav>
    </header>
.header {
    width: 100%;
    height: 44px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    border-bottom: 1px solid #DBDBDB;
}

.header__content {
    width: 100%;
    max-width: 975px;
    padding: 0 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__logo {
    margin-top: 5px;
}

.header__search {
    width: 216px;
    height: 28px;
    display: none;
    align-items: center;
    position: relative;
}

@media (min-width: 768px) {
    .header__search {
        display: flex;
    }
}

.header__search img {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 8px;
    left: 8px;
}

.header__search input {
    width: 100%;
    height: 100%;
    background-color: #FAFAFA;
    padding: 4px 10px 4px 28px;
    border: 1px solid #DBDBDB;
    border-radius: 4px;
    outline: none;
    font-size: 12px;
    /* 폰트 굵기 */
    font-weight: 300;
    color: #999999;
    text-overflow: hidden;
    white-space: nowrap;
}

.header__search input:focus {
    color: #262626;
}

.header__buttons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile__picture img{
    width: 24px;
    border-radius: 50%;
}

css의 .profile__picture부분에서 저는 강의처럼 말고 뒤에 img를 넣어야지만 사진 크기가 조정되는데 img를 안붙혀도 되는 이유가 궁금합니다!

HTML/CSS

Câu trả lời 1

0

John Ahn

안녕하세요!
general.css에
img {
max-width: 100%
}

이 부분 소스코드가 생략이 된 것 같습니다 !
감사합니다!

0

didwl07126808

아! 감사합니다!

header_logo

0

167

1

인스타그램 실습

0

275

1

유튜브 실습

0

305

1

a-button:hover , active에 다음과 같은 에러 메시지가 뜹니다.

0

378

2

도표 자료 (해결)

0

326

1

grid-template-columns에 대하여

0

197

1

flex-shrink 질문입니다

0

215

1

가상 클래스(의사 클래스)의 정의가 이해가 되지 않습니다.

0

221

2

스토리 생성하기 부분에서

0

173

1

안녕하세요 강사님 질문 있습니다.

0

328

1

Abutton 만들기 css가 인식이 안돼요.

0

337

1

유튜브 사이드바 생성할때 bottom 0

0

356

1

영상 자료를 다운받아도 자료가 보이지 않습니다.

0

374

1

인라인 요소, 블록 요소

0

290

1

css 질문 있습니다 !!

0

272

1

자료 pdf 파일로 보내 주실수 있는지 질문드립니다.

0

344

1

nth-child(2n+1)에 대해 궁금해요

0

495

1

개발블로그 내용정리 게시 가능 여부

0

408

1

nth child에 대한 개념

0

407

2

도표자료를 열 수 없습니다.

0

331

1

header태그

0

325

1

<strong>과 같은 semantic 태그와 SEO, 실무의 사용이 궁금합니다!

0

360

1

도표 자료 pdf 파일로 아이패드로 어떻게 옮기나요?

0

1185

1

창이 일정크기 이상 줄어들지 않아요

0

313

1