<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<style>
.age {
display: inline-block;
color: green;
}
.container {
display: inline-block;
}
.name {
display: inline-block;
color: red;
}
.img_container {
display: inline-block;
width: 300px;
height: 150px;
}
.img_container ul li img {
display: inline-block
}
</style>
</head>
<body>
<!-- {} < 얘의 이름은 객체야. 객체는 KEY와 VALUE를 가져 {KEY:Value} 이런식으로 객체를 만든다. -->
<!-- block, inline-block flex -->
<!-- block 한 줄에 하나만 차지해 -->
<!-- a라는 블록요소가있어 화면에 a ,b -->
<!-- block요소는 width:무조건 기본적으로 100% 그래서 같은 행에 아무도 못오게 만들어
블록요소의 해당하는 태그들은 div,p,form,ul,li,dl,dt,dd
-->
<!-- inline-block 요소 태그들 span input button strong img
인라인블록요소는 자신의 컨텐츠 크기만큼만 width를 차지 -->
<!--container 라는 개념이 중요하다
계층구조
div(Wrapper Container)
div(Container)
부모요소(subContainer)
자식요소(children)
-->
<!-- <div><img src=""></div>
<div><input></input></div>
-->
<!-- class는 css를 정의하기 위한 이름이야 근데 이 이름을 접근하려면 .으로 접근해야해 -->
<div class="age">나는 23</div>
<div class="container">
<span class="name">hh</span>
<span>hhh</span>
<span>h22</span>
</div>
<div class="img_container">
<ul>
<li><img src="
https://i.namu.wiki/i/WoiNEG6LXg5epIwmNnH41OUFaW2JCP_BvsGZimQ1BQgnleXEseGKmGuAdlTZ0OG_JrnS_J4ztvLu-gnNPfhRBw.svg"
alt="공군"></li>
</ul>
</div>
</body>
</html>블록 요소(block)는 사용가능한 최대 너비를 가진다
- 같은 행에 아무도 들어오지 못한다 !
- div, p, form, ul, li, dl, dt, dd 등
인라인 블록 요소(inline-block)는 자신의 컨텐츠 크기만큼만 너비를 가진다
- 같은 행에 다른 요소가 들어올 수 있다 !
- span, input, button, strong, img 등
CSS의 적용
- class의 사용 : class를 접근하기 위해서는 .(클래스명)양식의 클래스 선택자를 이용한다
- .(클래스명) 요소 요소 식으로 접근이 가능하다 (ex : .img_container ul li img)
- {}(객체)는 Key와 Value를 가진다 {Key:Value}
컨테이너(Container)의 계층구조
- div(Wrapper Container)
- div(Container)
- 부모요소(subContainer)
- 자식요소(children)
