김숭늉 마음대로

Udemy Section2 (5일차) - 이미지, 배경, 간격 본문

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
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

Udemy Section3 (7일차) - CSS박스, 선택자, 결합자, 클라스, HTML레이아웃, 블록/인라인 elements  (0) 2023.02.12
Udemy Section3 (6일차) - 고급 css  (0) 2023.02.12
Udemy Section2 (4일차) - CSS, 글꼴, Void  (0) 2023.02.11
Udemy Section2 (3일차) - CSS 색상, 단축키 등  (0) 2023.02.10
Udemy Section2 (2일차) - HTML 및 CSS 기초  (0) 2023.02.08
'IT/웹개발 (100일 도전)' Related Articles more