이번 강의에서는 이미지 추가 및 스타일링은 진행 해보자.
step 1. 이미지 파일을 원하는거 다운로드 받아 vocode에 업로드한다. ( drag and drop )
step 2. body에 img 태그를 이용하여 이미지를 추가한다.
<body>
<img src="challenges-trophy.jpg" alt="A trophy">
<h1>Max 'Challenge for Wednesday, january 17th</h1>
<p id="todays-challenge">
Learn about the basic of web development - specifically dive into HTML &CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resorces.</a>
</p>S
</body>
# img의 속성은 hret가 아닌 src에 경로를 입력하여 외부 이미지를 받아온다.
# alt는 이미지가 표시되지 않을 때 표시되는 텍스트로 pre 태그에 기입한 것 처럼 html에 기입한 텍스트 그대로를 출력한다
step 3. css 파일에 img선택자를 등록한다.
실행결과
# 이미지는 html에서 텍스트로 처리한다.
그렇다면 중앙으로 이미지를 보내고 싶다면??
중요 ( html 동작 방식 )
처음에 text-align 속성 값은 center로 지정하려고 했다. 하지만 동작방식을 자세히 보면
text-align은 태그 자체를 배치하는 것이 아닌 태그가 포함하고 있는 컨텐츠를 배치하는데 이미지는 void tag이므로 내부에 컨텐츠가 존재하지는 않는다.
따라서 이미지를 배치하려면 부모 요소인 body 안에 img 컨텐츠를 배치한다.
다음 코드를 css에 추가한다
body{
text-align: center;
}
실행결과
'웹개발 > HTML, CSS 기초' 카테고리의 다른 글
| [html, css 기초] 16. 공유 css 및 파일관리 (0) | 2024.01.19 |
|---|---|
| [html, css 기초] 14. pre 태그 (0) | 2024.01.19 |
| [html, css 기초] 13. 외부 폰트 사용법 (0) | 2024.01.19 |
| [html, css 기초] 12. 파일 병합 및 id (0) | 2024.01.19 |
| [html, css 기초] 11. css 아웃소싱 (0) | 2024.01.18 |
