일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- react redux
- 협업프로젝트
- first-child
- 자바스크립트
- line-through
- Redux
- React state
- 카우치코딩
- 인라인블럭
- javascript코딩테스트
- redux toolkit
- foreach
- db.json
- JavaScript
- Redux store
- sort
- redux 사용방법
- useParams
- JSON
- couchcoding
- 콜백함수
- useSearchParams
- React onClick
- toString
- react
- useEffect
- 6주포트폴리오
- 자바스크립트배포
- 블럭요소
- javascript React
- Today
- Total
개발하는 루루언니
CSS로 HTML 요소 : float 와 그리고 부모요소 자식요소 높이 너비 값 맞추기 본문
float 뜻 : [배. 기구등이 ] 둥둥 뜨다 , 떠다니다 ,부유하다
float : left 왼쪽정렬
float : right 오른쪽 정렬
margin auto : 요소를 중앙으로 보내는것 ( 마진을 골고루 분배) =>
블럭요소만 된다 / 인라인 요소는 안된다./ 인라인-블록도 안된다.
** 실습 **
<style>
.parent{
border: 5px solid red;
width: 600px;
height: 100px;
}
.child{
background-color: gold;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
여기서 주의깊게 봐야할것은
1. parent 는 부모 child는 자식 값인데 부모값에 높이를 100px
2. 자식값엔 높이를 200px 을 줘버리면 위와 같은 자식이 부모를 뚫고 나오는 격이 되버린다.
이렇게 알맞게 모양을 내기위해선
3. 부모값인 parent 부분의 css 에 높이값을 애초에 주지 않고 자식값에만 주는것이다.
✔ 여기서 의문? 기본값이 왼쪽에 들어가져 있는데 애초에 float :left 가 되어 있나요?
답은 float 는 none 이 기본값으로 되어 있습니다.
✔여기 float를 : left를 줘버리면 어떻게 될까?
자식요소에 float left를 주는순간 부모안으로 들어가지 않고 둥둥떠다니며 왼쪽으로 붙는다.
부모요소는 자식요소가 없다고 판단해 높이값을 잃습니다.
✔자식요소에 float가 있으면 부모요소는 높이값을 잃는데..그럼 어떻게 해야할까?
높이값을 찾아주는 방법은 2가지가 있다.
1. 부모값에 높이값을 직접 주는거다
부모의 높이값이 200px 인데 자식값이 높이값이 300px이 되버린경우 또 저런 현상이 나타난다
2. 부모가 높이값을 지정하지말고 overflow : hidden 을주며 높이값을 맞춰주는것이다.
이렇게하면 자식이 200px든 200px이든 자식요소의 높이값의 변화에 따라
부모는 자식의 높이값만큼 자동적으로 맞춰주는 것이다.
강제로 높이값을 주는것보단 overflow :hidden을 주는것이 효율적이다.
✔이렇게 자식요소가 중앙으로 가게 하려면? 어떻게 할까?
margin : auto를 하면 중앙으로 갈 수 있는데
주의할점은 인라인 요소 , 인라인+블럭요소 는 안되고 블럭요소만 된다는것이다.
만약 우리가 <span>태그를 사용해 인라인 요소로 작성을 한경우에는 적용이 안되며
display : block 을 지정해 준 다음에야 margin: auto를 통해 해당 이미지 처럼 줄 수 있는것이다.
✔ 그럼 인라인하고 인라인블록은 어떻게 중앙으로 보내죠?
자식요소에서 margin : auto 하는게 아닌 부모요소에서
text-align : center을 하여 맞춰주면 된다.
<style>
.parent{
border: 5px solid red;
width: 600px;
overflow: hidden;
text-align: center;
}
.child{
background-color: gold;
width: 200px;
height: 100px;
display: inline-block;
/* float:right */
}
</style>
</head>
<body>
<div class="parent">
<span class="child">
</span>
주의할점 :
1. 인라인 + 인라인블록 요소는 부모요소에 text-aline을 줘서 center을 해야한다.
2. div 같은 블럭요소일 경우는 자식요소에 margin : auto를 주면 가운데로 간다.
생각보다 헷갈릴 수 있는데 역시 사용해보면서 익히는게 최고인듯하다..
은근 CSS가 복잡할수있다곤 하지만 익숙해지면 또 괜찮아 질거라 믿는다.
'컴퓨터 정보 > html.css.js 기초' 카테고리의 다른 글
목록 리스트 만들때 주의해야할 점! (ol ul li ) (0) | 2022.11.28 |
---|---|
HTML5 핵심 자주사용하는 태그 정리 (텍스트,서식,문단) (0) | 2022.11.28 |
CSS 포지셔닝 : clear = float속성 상속해제 (0) | 2022.11.28 |
display 속성에 사용하는값 : block, inline-block, inline (0) | 2022.11.28 |
인라인+블록 요소 img 간단요약 (0) | 2022.11.28 |