IT/웹개발 (100일 도전)
Udemy Section2 (5일차) - 이미지, 배경, 간격
김숭늉이
2023. 2. 11. 17:58
728x90
1. 외부이미지를 html에 넣기
넣고자 하는 이미지 파일을 끌고 와서 붙임
- img 는 바디영역에 붙임
- img는 빈 태그!
<img src="challenges-trophy.jpg" atl="A trophy">
'atl'는 폴백텍스트, 스크린 리더들이 읽을수 있고 이미지 로딩에 실패하였을때
atl 는 추가해야하는 필수 중요한 요소임!!!
2. 이미지 가운데로 오게하기
body {
text-align: center;
}
-> 이미지를 텍스트로 간주함
*
3. 정렬, 배경색상, 마진 일괄설정
body {
text-align: center;
background-color: rgb(233, 215, 207);
margin: 50px;
}
4. 2주차 내용 html 추가 필요시
새로운 html에서 느낌표를 치고 엔터를 누르면 기본 골격을 다 가지고옴
-> 그런다음 타이틀 부분부터 수정하자
5. 메타 영역 설명
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> -> 화면에서 사용중인 문자를 브라우저에 알리는 역할
<meta http-equiv="X-UA-Compatible" content="IE=edge"> -> 지금은 안필요하니까 삭제
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -> 모바일(다른기기)에서도 잘보이게하는 반응형 웹에 대한 내용임!
<title>My upcoming cahllenges</title>
</head>
<body>
</body>
</html>
6. html 파일명 지정시 중요사항
엄밀히 말하자면 필수는 아니지만 대시(-)를 제외한 특수 문자를 사용하지 않고 파일 이름을 모두 소문자로 지정하는 건 매우 일반적인 규칙입니다. 파일 이름이 여러 단어로 구성된 경우 공백(공백)으로 구분하지 말고 대시를 사용하세요. 따라서 Online Shop.html 대신 online-shop.html을 사용해 주세요
7.“의사-선택자“란 무엇입니까?
-> a:hover와 같은 선택자
728x90
반응형