안녕하세요 오늘 포스팅 주제는
네모 모양의 이미지를 원형으로 잘라서 사용 할 수 있는 예제입니다.
꼭지점 부분을 어느정도로 둥그렇게 만드냐는
border-radius 속성을 이용하면 됩니다.
*결과
1. border-radius : 30px
2. border-radius : 90px
코드 원본은 스틱코드 링크에서 참고해주세요
https://stickode.com/detail.html?no=2658
스틱코드
stickode.com
스타일 태그
웹문서를 디자인하기 위해서는 스타일 태그를 이용하는 방법이 있습니다.
<style></style>
이렇게 생긴 스타일 태그를 head 태그 안에 넣어서 어떻게 꾸밀 것인지 정의 하는 것입니다.
예)
<head>
<style>
#m_box{ background-color: #09C; width: 150px; height: 40px; }
.box{ width: 100px; height: 50px; border: 1px solid green }
</style>
</head>
스타일 태그 안에
내용은 다르지만 형식이 같은 2줄의 코드가 보이실 겁니다.
선택자 { 속성 : 값 }
이런 형식을 취하고 있는게 보이시죠?
여기서 '선택자'라는 것은 selector 를 해석한 것입니다.
참고로 ~tor 어미를 쓰는 단어들은 어떤 사람이나 기계를 뜻합니다.
director(감독), tutor(후견인) 같은 단어들을 보면 이해가 되실 겁니다.
따라서 selector는 선택하는 장치라고 생각하시면 되는데
무엇을 선택한다는 것일까요?
바로 스타일을 꾸며줄 대상을 선택하는 것입니다.
위의 예시 코드에서는
#m_box 를 선택하는 코드와
.box를 선택하는 코드 2줄이 있었습니다.
m_box라고 하는 대상을 선택해서 이렇게 저렇게 꾸밀 것이다.
box라고 하는 대상을 선택해서 이렇게 저렇게 꾸밀 것이다.
라는 것입니다.
그러면 선택자 앞에 # 또는 . 과 같은 특수 기호는 무엇일까요?
선택할 대상을
id로 찾을때는 #
class 이름으로 찾을때는 . 을 선택자 앞에 붙여 줍니다.
그러면 아래 코드 처럼 정의된 대상들을 찾게 됩니다.
예2)
<body>
<div class="box">box 클래스</div>
<div class="box">box 클래스</div>
<div id="m_box">m_box 아이디</div>
</body>
이제 고양이 사진을 원형을 만드는 코드를 살펴보겠습니다.
<style>
.circle {width:180px; height:180px; border-radius:30px; margin:0 auto; overflow:hidden;}
.circle img {width:180px; height:180px; }
</style>위 코드는
circle이라고 하는 대상을 클래스이름으로 찾아서 선택하고
그것을 여러 속성으로 꾸며주겠다는 것입니다.
여러 속성 중에서 border-radius 의 값을 90px로 정해주면
이미지를 담고 있던 네모 모양의 틀을 원형으로 바꾸어 주지만
overflow 속성의 값을 hidden으로 정해주어야 원형 이미지로 완성됩니다.
원형으로 바뀐 틀에서 넘쳐나온 것들(overflow)을 숨긴다(hidden)는 뜻이죠
이렇게 스타일을 정의해두면
어떤 이미지도 circle 이라는 클래스에 담기만 하면 원형으로 만들어 낼 수 있는 것입니다.
코드 원본은 아래 링크에서 확인해주세요
https://stickode.com/detail.html?no=2658
스틱코드
stickode.com
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] 검색어 입력상자 예제 만들기 (0) | 2022.01.02 |
|---|---|
| [HTML/CSS]유튜브 API 사용법( Youtube Iframe) (0) | 2021.12.25 |
| [HTML / CSS] 드롭다운 메뉴바 만들기 (0) | 2021.12.09 |
| [HTML / CSS] 만들어져 있는 템플릿 적용하기 (0) | 2021.12.07 |
| [HTML / CSS] Navbar 메뉴바 만들기! (0) | 2021.11.13 |
