이미지📷

HTML - <img>

• 이미지를 웹사이트에 추가한다.

<img alt="" src="">

• alt : 서버에서 이미지를 불러올 수 없을 때 대신 보여주는 텍스트
• src : 이미지 파일 경로 또는 url

CSS - <background-image>

• 배경 이미지를 추가한다.

<div class="backgroundImg"></div>

.backgroundImg {
	/*배경 이미지 url 지정*/
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  
	/*
	div의 너비, 높이를 지정하지 않으면 div요소의 내용에 따라 크기가 정해진다.
	이 코드에서는 div요소에 내용이 없으므로 width, height를 지정하지 않으면 화면에 나타나지 않는다!
	(width: 0px, height: 0px)
	*/
	width: 300px;
  	height: 300px;
  
	/*
	배경 이미지의 사이즈를 따로 지정하지 않으면 div의 크기보다 원본 이미지가 훨씬 크기 때문에 이미지의 일부분만 보이게 된다.
	background-size를 100%로 한다는건 div의 사이즈에 꽉 차게 이미지 크기를 지정한다는 의미이다.	
	*/
	background-color: aquamarine;
  	background-size: 100%;
}

Block / Inline

Block 요소

• block요소 옆에는 다른 요소가 올 수 없다.
• width가 화면 전체를 차지한다.
• <header>,<footer>,<p>,<div> 등등 대부분 요소가 block 요소이다.

Inline 요소

• inline요소는 바로 옆에 다른 요소가 온다.
• content만큼의 width를 가진다.
• <span>등이 inline 요소이다.
• width, height 등을 설정할 수 없다.

inline으로 바꾸는 방법은 float도 있다!

• 웹 요소를 문서 위에 떠 있게 한다.
• float : left; → 문서의 왼쪽으로 배치
• float : right; → 문서의 오른쪽으로 배치
• flex와 grid가 나온 이후에는 잘 사용하지는 않는다.
• 예전 코드에서는 볼 수 있다.(옛날 웹 페이지 유지보수 등)

display

• inline : 기본값, 요소를 inline요소처럼 표시한다.
• block : 요소를 block요소처럼 표시한다.
• inline-block : 요소는 inline인데 block처럼 표시한다.
• none : 요소를 안보이게 한다. 차지하던 공간도 사라진다.

display로 interactive한 웹 만들어보기!

• 방법
  1. display가 none인 클래스를 적용한다.
     → 평소에는 보이지 않는다
  2. 사용자가 클릭 등 반응을 하면 JavaScript가 display가 block인 클래스로 바꾼다.
     → display가 none에서 block으로 바뀌므로 없던 요소가 나타나는 것처럼 보인다!
     예시) 네이버 등의 검색창에 입력하는 순간 관련 검색어 리스트가 뜬다!

Semantic Web & Tag

Semantic Web & Tag 정리 포스트 바로가기↗

어제에 비해 공부량이 너무 적다. 분발하자!