#TIL (May 2nd, 열여덟번째 이야기) #TIR(CSS layout)

Jung Hyun Kim·2020년 5월 2일
1

CSS Layout 정복하기!


1. Box model

  • margin : border 기준으로 box의 여백을 지정
    - margin (padding 값 또한 동일하게 표시)
    • margin:10px - 상우하좌의 margin값이 10px
    • margin:10px 20px - 상하 10px, 좌우 20px,
    • margin:10px 20px 30px - 상 10px, 좌우 20px, 하 30px
    • margin:10px 20px 30px 40px - 상우하좌의 순으로 값이 지정됨 (시계방향)

  • border : 박스의 테두리

  • padding : 테두리와 content 간의 간격

  html, body {
    margin: 0px;
    padding: 0px; 
  } 
  .box_model {
    width: 300px;
    height: 300px;
    background-color: blue;
    margin-left: 50px;
    padding-left: 50px;
    border: solid 50px red; 
  }

2. Display

레이아웃 디스플레이 속성을 block/inline통해서 속성 변경 가능

  • display : block : inline 요소 -> block 요소로 변경
  • display : inline : block 요소 -> inline 요소로 변경
  • display : inline-block : inline 요소 & block 요소 양쪽 성격을 갖고 있음
  • display : none :아예성격을 없애버림
<span>Hello World</span>
<span>Nice to meet you</span> <!--span은 inline요소인데, 
				block요소로 아래처럼 바꿀수 있음 -->
span { display : block;    // div는 기본으로 block요소를 가지고 있음 
	width: 100px;    
       height: 100px;     
       background-color: red; 
       }
       
<h1>Hello World</h1>   
<h1>Nice to meet you</h1>  <!--h1은 block요소인데, 
				inline요소로 아래처럼 바꿀수 있음 -->
h1 { 	display : inline;      
	width: 100px;    
	height: 100px;     
	background-color: red; 
}

3. Position

  • 속성 값 : static, absolute, fixed, relative

<positioning 확인 법>
1.마진병합이일어나는지?
2.주체 속성 사용가능?
3.부모의높이값이 없을때 자식의 높이값으로 이동할 수 있는지?

모든 html은기본값이 static

  • static : HTML 태그의 기본값으로 위치 정보를 임의로 설정할 수 없음 기본적인 위치 지정 방식인 left, top, right, bottom 속성값이 적용되지 않음

  • fixed : 마진병합현상이렁나지않음, top 적용하면 위쪽상단 기준 100 아래로 바뀜 (3차원), 무조건 브라우저 기준으로 좌표가 형성이됨

  • relative : 마진병합일어남 top.left.bottom,right 사용가능, 자식의 높이값이 부모늬 높이값 영향줌 (2차원/3차원의 성격을 다 가지고 있음)

    -absolute : 마진병합 안일어남, top/left사용가능, 브라우저 기준으로 top 설정됨 (fix)와 같다. 화면에고정되지는 않음


    4. z-index

    layer층의 우선순위 결정하고 싶을때 사용함(position 속성 사용할 시 적용 가능)

    .sideleft {
      position : absolute;
      top: 0;
      right: 0;
      z-index: 1;
    }
  • auto : 기본 값, 지정하지 않은것과 같음

  • number : 배치 순서를 결정하며 숫자가 높을 수록 앞으로 나옴, -1도 올수있음.

    5. float

  • 말 그대로 오른쪽 혹은 왼쪽으로 띄워서 정렬

    • none: 기본
    • inherit : 부모 요소로 부터 상속
    • left/right : 왼쪽 혹은 오른쪽으로 뛰움
  • absolute position(absoulte/fix)은 float을 무시한다

    6. clear

  • float를 사진과 함께 적용하면 글자들이 사진 주위로 둘러싼 형태가 된다 그걸 붙지 않게 하려면 clear 를 사용하면 됨

    	- clear : none
    • clear : left (왼쪽 취소)
    • clear : right (오른쪽 취소)
    • clear : both (오른쪽 왼쪽 둘다 취소)
 <div class="clearfix">
 .clearfix {
  clear: both;}
</div> 
profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글