개발하는 루루언니

CSS로 HTML 요소 : float 와 그리고 부모요소 자식요소 높이 너비 값 맞추기 본문

컴퓨터 정보/html.css.js 기초

CSS로 HTML 요소 : float 와 그리고 부모요소 자식요소 높이 너비 값 맞추기

혜닝혜루 2022. 11. 28. 17:08
728x90
반응형

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가 복잡할수있다곤 하지만 익숙해지면 또 괜찮아 질거라 믿는다.

728x90

'컴퓨터 정보 > 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
'컴퓨터 정보/html.css.js 기초' Related Articles more