Even if I searched for the response type, there was no explanation why I couldn't apply width=100% so I asked.

If I apply width=100%, I think it fills the entire screen. By the way, is this a reaction type?

Short answer: Yes.

Long answer:

I think it's better to deal with what "responsive" is in the first place. The term reactive is more like a term introduced to describe something that is not adaptive because the mobile web at the beginning has always been in this URL format.

m.naver.com
m.daum.net
m.facebook.com

Why was it this URL? Why was m. always preceded by the original PC version site address? Because it's cool? Of course, that may be the reason, but ultimately, if you show the original PC version website on your mobile, everything will look too small, so you need to configure a separate website and style sheet that adapts to the mobile environment. A separate site that is fully mobile-adapted, with different menu locations, site structures, and even different web page loading speeds and image quality.

Here, let's just remember that in this process, "Because mobile has a small screen width, when showing a picture, width: 100%; to make it a picture that uses the entire width" has settled as a best practice.

Anyway, one day, people discover that media query is applicable. Huh? If the width of the screen satisfies max-width: 768px, you can increase the font size Then, can't you change everything besides the size of the letters as much as you want? No, wait a minute. Then we don't have to pay twice the maintenance fee by creating a PC version site and a mobile version site separately in the first place, right? Can't you just develop one website and CSS that responds well depending on whether the screen width is large or small?

Since this discovery, we've established a paradigm called reactive web design that doesn't necessarily have to adapt websites to any device environment, just load them first and then react to your loaded environment. These sites, for example, are reactive. After you access, try changing the size of the browser window without refreshing.

https://developer.mozilla.org/ko/docs/Learn/CSS (Mozilla Foundation Developer Document Site)
https://yuptogun.com (mm...) This is my personal homepage. I can't think of an example)

And responsive webs have been presented with more complex best practices and practices because they are more demanding and more complex than adaptive webs. For example, holding width: 100% when showing a picture is appropriate when it is on mobile, and if you react like that in your PC browser, it becomes even weird. On a wide screen, it looks natural when you put additional restrictions such as max-width: 640px;. In addition, there have already been a lot of other topics that you might be curious about in the future.

So let's talk about technology and wrap it up.

This is what I understood so far and there may be wrong information, so I strongly recommend you to experience and learn from here. Anyway, I hope it was helpful to some extent.