🍁모서리 둥글기
모서리 둥글기는 border-radius 속성을 사용한다.
px, %를 사용하여 구현하며, px와 %를 사용할 때 각각의 정책이 다르다.
px 단위 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
border: 1px solid black;
width: 300px;
height: 300px;
margin: 50px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptas ipsum impedit, quis nam repudiandae ea praesentium repellat architecto dolor soluta porro cupiditate quam! Sapiente commodi animi voluptas expedita! Laudantium. Facilis, sunt vel? Dolorem praesentium saepe atque neque at. Est, porro nostrum libero sequi dolorem dicta voluptatem adipisci obcaecati numquam mollitia.</div>
</body>
</html>
둥글기를 너무 크게 주면 내용물이 빠져나가는 일이 발생한다.
그러므로 적당하게 내용물과 함께 잘 넣어야 한다.
<style>
#box {
border: 1px solid black;
width: 300px;
height: 300px;
margin: 50px;
border-radius: 150px;
}
</style>
width, height를 1/2한 값이 최댓값이다.
현재 width가 300이므로 border-radius를 150으로 주면 원이 출력된다.
최댓값 이상으로 값을 주어도 동일한 결과를 출력한다.
px 단위 방식은 위 그림으로 설명할 수 있다.
파란색 원을 각각의 모서리에 붙인 뒤, 빨간색 부분을 절삭하는 방식으로 둥글기가 만들어진다.
<style>
#box {
border: 1px solid black;
width: 600px;
height: 300px;
margin: 50px;
border-radius: 150px;
}
</style>
px은 width와 heigth 중에서 작은 것을 기준으로 둥글기가 책정되어 만들어진다.
% 단위 사용
<style>
#box {
border: 1px solid black;
width: 600px;
height: 300px;
margin: 50px;
border-radius: 40%;
}
</style>
값으로 %를 줬을 때에는 px로 출력할 때와 미묘하게 결과가 달라진다.
px처럼 완전한 동그라미가 아니라 사각형의 비율을 따라서 타원형으로 만든다.
사각형이 정사각형이면 px과 차이가 없지만, 직사각형이면 직사각형의 비율에 맞는 타원이 만들어지므로 곡률이 달라진다.
🍁모서리 둥글기의 활용
각 변의 모서리 둥글기
<style>
#box {
border: 1px solid black;
width: 600px;
height: 300px;
margin: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 30px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 70px;
}
</style>
각 변에 모서리의 곡률을 다르게 부여할 수 있다.
border-[top | bottom]-[left | right]-radius를 사용한다.
사진의 모서리 둥글기
<body>
<div id="cat">
<img src="../asset/images/cat01.jpg">
<img src="../asset/images/cat02.jpg">
<img src="../asset/images/cat03.jpg">
<img src="../asset/images/cat04.jpg">
<img src="../asset/images/cat05.jpg">
</div>
</body><style>
#cat img {
border-radius: 15px;
}
</style>
사진의 모서리 둥글기를 부여할 수 있다.
텍스트 박스의 모서리 둥글기
<body>
<input type="text" id="txt1" size="30">
</body><style>
#txt1 {
border-radius: 20px;
border: 1px solid #777;
outline: none;
padding: 5px 10px;
}
</style>
텍스트 박스의 모서리를 둥글게 할 수 있다.
padding을 부여할 때에는 좌우에 모두 부여할 수 있도록 한다.
🍁검색 창 구성
<body>
<h1>기본값</h1>
<div id="search">
<input type="text" placeholder="검색어를 입력하세요.">
<input type="button" value="Search">
</div>
<hr>
<h1>검색1</h1>
<div id="search1">
<input type="text" placeholder="검색어를 입력하세요.">
<input type="button" value="Search">
</div>
<hr>
</body><style>
#search1 {
width: 245px; /* body(창의 크기)가 작아져도 영향받지 않게 함 */
}
#search1 input {
float: left;
border: 1px solid #777;
color: #333;
padding: 5px; /* 높이를 높임 */
}
#search1 input[type=text] {
border-right: 0; /* text와 button을 사이가 연결되어 보이게 함 */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#search1 input[type=button] {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#search1::after { /* 가상 요소를 생성하여 float 초기화 */
content: '';
display: block;
clear: both;
}
</style>
fontawesome
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
fontawsome 페이지에 들어가서 가입을 하고 나오는 페이지에서 위 버튼을 클릭한다.
그리고 나오는 <script> 코드를 복사하여 <link> 태그 아래에 붙여넣기 한다.
https://fontawesome.com/search?o=r&m=free
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
그리고 위 페이지에서 원하는 아이콘을 선택하고 나오는 코드를 복사하여 원하는 곳에 붙여넣기 한다.
이 아이콘은 그림이 아니라 폰트(딩벳 폰트)이다.
폰트로 제공하기 때문에 사이즈를 조절할 수 있다. 이때 벡터방식으로 그리기 때문에 배율이 늘어나거나 줄어들더라도 품질이 깨지지 않으며, 색깔도 원하는대로 바꿀 수 있다는 장점이 있다.
<h1>검색2</h1>
<div id="search2">
<input type="text" placeholder="검색어를 입력하세요.">
<button>
<i class="fa-solid fa-compass"></i>
</button>
</div>
<hr><style>
#search2 {
width: 245px; /* body(창의 크기)가 작아져도 영향받지 않게 함 */
}
#search2 input, #search2 button {
float: left;
border: 1px solid #777;
color: #333;
padding: 5px; /* 높이를 높임 */
outline: none;
}
#search2 input[type=text] {
border-right: 0; /* text와 button을 사이가 연결되어 보이게 함 */
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#search2 button {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding-left: 10px;
padding-right: 10px;
color: cornflowerblue;
}
#search2 button:hover {
background-color: #DDD;
}
#search2::after { /* 가상 요소를 생성하여 float 초기화 */
content: '';
display: block;
clear: both;
}
</style>
Search 대신에 아이콘을 적용했다.
