Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

블로그

종속관련&화면 정가운데 배치하기 본문

CSS

종속관련&화면 정가운데 배치하기

오구리 2020. 5. 28. 22:42
728x90

200x200크기의 컬러 박스를 화면의 정가운데 배치하기

1. calc이용

HTML

1
2
3
4
5
6
7
8
<body>
  
    <!-- color 박스를 200*200/배경 노랑색으로 학 화면의 정가운데로 보내시오 -->
    <div class="color">
        <a href="#">빨간색입니다.</a>
        <a href="#" class="green">녹색입니다.</a>
    </div>
</body>
 cs

CSS

1
2
3
4
5
6
7
<style>
        body{background-color:#f0f0f0;}
        .color{width:200px; height:200px; background-color:#ff0; position:absolute; left:calc(50% - 100px); top:calc(50% - 100px);}
         /*
       중앙으로 보내려면 위,왼쪽 -100씩(color의 크기가 200이니까)
        */
</style>
 cs

 

2. 위치값에서 -하기 

1
2
3
4
5
6
.color{color:#f00; 
width:200px; 
height:200px; 
background-color:#ff0; 
position:absolute; 
left:50%; top:50%; margin:-100px 0 0 -100px;}
 cs

 

위,왼쪽에 50%퍼 주고 마진값을 사각형 넓이 반을 빼주기.

 

 

 

두번째 글씨 녹색으로 바꾸기

1
2
3
4
 <style>
       .color{width:200px; height:200px; background-color:#ff0; position:absolute; left:calc(50% - 100px); top:calc(50% - 100px);}
       .color .green{color:#0f0;}   /* 상속 시킬 경우에는 부모를 써줘야한다. */
 </style>       
 cs

상속 시킬 경우에는 부모를 써주기

저작자표시

'CSS' 카테고리의 다른 글

CSS background-size 속성  (0) 2020.05.30
float의 문제점  (0) 2020.05.28
CSS 텍스트스타일 text-transform 속성 - 텍스트 대·소문자 변환하기  (0) 2020.05.23
CSS display속성 - 화면 배치 방법 결정하기  (0) 2020.05.22
CSS 레이아웃(float,clear,overflow속성)  (0) 2020.05.22
'CSS' Related Articles more