국비지원 JAVA 풀스택 과정

[HTML+CSS3] 보더레디어스

ODaram 2022. 9. 23. 12:12

02. 보더레디어스

· 박스의 모서리를 둥글게 : 보더 레이어스

· text-transform 의 속성 두가지 : uppercase , capitalize

· div 박스의 origin(기준값) : 왼쪽 위

·  border-radius 에 값을 두개만 주었을때 : 

<!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>02.보더레디어스</title>
  <style>
    h2 { text-align:center; text-transform:capitalize; }
    /* text-transform : uppercase : 소문자를 모두 대문자로 변경해줌 */
    /* text-transform : capitalize : 첫글자만 대문자로 변경해줌*/
    .wrap { position: absolute; left:50%; top: 100px; 
                /* position : 박스의 위치를 왼쪽에서 50%, 
                                     위에서 100px 아래의 위치로 지정한다. */
                /* 박스의 origin(기준값)은 왼쪽위 이다. */
                width: 500px; margin-left:-250px;
                /* padding : 박스 바깥쪽 여백 */
                background: gray; }
    
    .corner1 { width: 200px; height: 200px; position: relative; left: 50%;
                     background: red; border-radius: 50px;}
                     /* border-radius : 박스의 모서리를 둥글게 처리한다. */
    .corner2 { width: 200px; height: 200px; left: 50%;
                     background: orange; 
                     border-radius: 40px 100px 40px 100px;}
                     /* 박스의 모서리마다 다른 크기로 둥글게 처리한다. */
                     /* 1값이 왼쪽 상단, 2값이 오른쪽 상단, 
                         3값이 오른쪽 하단, 4값이 왼쪽 하단 */
    .corner3 { width: 200px; height: 200px;left: 50%;
                     background: yellow; 
                     border-radius: 130px 10px;}
                     /* 1값으로 왼쪽 상단 + 오른쪽 하단,
                         2값으로 오른쪽 상단 + 왼쪽 하단 의 모서리를 둥글게 처리 */
    .corner4 { width: 200px; height: 200px; left: 50%;
                     background: green; 
                     border-radius: 150px -30px;}
    .corner5 { width: 200px; height: 200px; left: 50%;
                     background: blue; border-radius: 90px;}
  </style>

</head>
<body>
  <div class="wrap">  
    <!-- 부모 박스로 자식 박스를 감쌀 때 사용하는 이름이 wrap,container이다. -->
    <h2>border-radius</h2>
    <div class="corner1"></div>
    <div class="corner2"></div>
    <div class="corner3"></div>
    <div class="corner4"></div>
    <div class="corner5"></div>
  </div> 

</body>
</html>