[HTML & CSS] img 태그 / 디자인삼성 탑바 제작(1)

[vscode 추가 설정]

• 코드 작성 후 코드 위에 마우스를 올려놓았을 때, 불필요한 정보를 보고싶지 않다면 파일 -> 기본설정 -> 설정으로 진입하여 설정 검색창에 'hover'를 검색하고 '호버 표시 여부를 제거합니다'의 항목의 체크박스를 해제한다.

 

[디자인삼성 탑바 제작]

1차 탑바 목표 디자인

 

[기본 구조 잡기]

• 겉면의 가장 큰 틀의 클래스 네임을  top-bar-section 라고 지정
• top-bar-section은 pc 해상도에 따른 너비를 가지고 있다는 가정하에 너비를 따로 지정하지 않고, 해당 태그 아래에 container라는 클래스를 생성하여 높이를 주고 top-bar-section이 해당 높이를 상속받도록 한다.
• container에 높이를 지정하게 되면 top-bar-section에 100% 상속되고, display: flex 속성을 추가 하여 하위 엘리먼트에도 높이를 100% 상속받도록 할 수 있다.
• container 안에는 이미지, 메뉴바, 아이콘 형태의 태그들이 포함된다.
• 각 태그들은 container를 기준으로 justify-content와 같은 정렬을 한번에 묶어서 지정할 수 없기 때문에 좌측과 우측에 left-box와 right-box를 생성하여 그룹을 나눠준다.
• left-box에는 이미지와 메뉴바, right-box에는 텍스트와 아이콘을 배치한다.
• left-box와 right-box의 너비는 flex-grow: 1;과 flex-basis: 0;을 통해 container의 너비를 1:1 비율로 나눠 갖지만, 유연하게 늘어날 수 있도록 한다.
• 메뉴바는 네비게이션 바라고도 지칭하며, 해당 태그는 코드 작성 시 div태그 대신 nav태그로 작성한다.

html 파일

css 파일

기본 틀 완성

 

 

[img 태그]

• img 태그는 텍스트 취급을 하는 inline 요소이다.
• 언스플래쉬라는 사이트를 통해 필요한 이미지를 구해올 수 있다.
• img 태그의 기본 구조는 <img src="" alt=""> 이다.
• 기본 구조에서도 알 수 있듯이 img 태그는 닫는 태그가 없어서 부모 엘리먼트 역할을 할 수 없다.
• position: absolute나 fixed를 적용할 순 있지만, 부모역할을 할 수 없다.
• src 속성값으로는 이미지의 경로(주소)가 들어온다.
• alt 속성값으로는 이미지에 관련된 텍스트를 작성한다.

See the Pen img태그 by psm817 (@psm817) on CodePen.

 

 

[img 태그 너비높이 중 너비만(높이만) 커스텀]

• img 태그 중 너비와 높이 중 하나만 커스텀을 하면 이미지의 비율이 유지된 채로 커스텀된다. 

See the Pen img태그 너비높이 중 너비만 커스텀 by psm817 (@psm817) on CodePen.

 

 

[img 태그 너비높이 같이 커스텀(object-fit)]

• img 태그 중 너비와 높이를 한 번에 커스텀을 하면 이미지가 찌그러지거나 늘어난다.
• img 태그 속성 중 object-fit: cover;는 찌그러지거나 늘어난 이미지를 펴주면서 중앙을 보여주는 역할을 한다.
• 고정형 이미지에서 object-fit: cover;를 사용하면 찌그러지거나 늘어난 이미지를 펴주면서 중앙을 보여준다.
• 반응형 이미지에서 object-fit: cover;를 사용하면 세로 고정형 반응형 이미지가 구현된다.
• 비디오 태그에서 object-fit: cover;를 사용하면 너비높이를 모두 정상 적용한다. 

See the Pen img태그 너비높이 같이 커스텀(object-fit) by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 17일차 복습 by psm817 (@psm817) on CodePen.