*별첨 이미지 radius 편집 시
css border - radius generator 를 애용하자!
https://9elements.github.io/fancy-border-radius/
Fancy Border Radius Generator
Generator to build organic shapes with CSS3 border-radius
9elements.github.io
내 프로필 페이지 작성해보기
최종 코드
<!DOCTYPE html>
<html>
<head>
<title>PROFILE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<img src="./images/chaeyoung.jpg" alt="profile">
<h1>CHAEYOUNG RYU</h1>
<p>FRONT END DEVELOPER </p>
</div>
</body>
</html>:root {
font-family: 'arial';
}
/*초기화*/
body{
margin:0;
}
h1, h2, h3, h4, h5, h6{
font-size: inherit;
font-weight: inherit;
margin: 0
}
body{
background-image: url("./images/background4.png");
background-size: cover;
background-attachment: fixed;
}
div{
background-image: url("./images/cover03.png");
background-size: cover;
width : 700px;
margin : 30px auto;
text-align: center;
border-radius: 10px;
padding : 20px 0 40px;
color: white;
}
img{
display: block;
width: 200px;
margin: 0 auto 50px;
border : 5px solid;
border-radius: 50% / 10%;
}
h1{
font-size: 50px;
font-weight: bold;
margin: 10px auto;
}
p{
font-size: 16px;
border-top : 5px solid;
display: inline-block; /*옆으로 퍼져있던 inline을 block으로 잡아준다. */
padding: 10px 20px; /*이걸로 border-top 길이를 늘림*/
margin: 0 auto 50px;
letter-spacing: 0.4em;
}
초간단 코드리뷰
1. 레이아웃 먼저 작성 -> 그 후에 컨텐츠 넣는 방식으로 진행
2. 초기화 css코드 작성
3. body back ground-image 설정
*css 배경화면 잘리지 않게 설정하기
이미지 크기에 맞게 설정할 때
background-size:cover;
ㄴ 브라우저 크기에 맞춰 이미지를 늘린다.
background-attacment: fixed;
ㄴbody를 기준으로 가 아닌 전체를 기준으로 고정한다.
4. margin, padding 속성 부여하기
5. 컨텐츠 삽입하기
6. 이미지는 display:block; 속성 부여하여 하나의 블럭으로 인식하도록, width도 조정해준다.
7. letter-spacing은 횡단 자간 늘릴때 사용함 em 단위로 설정하는게 좋다.
ex) letter-spacing: 0.4em;
8. p 텍스트는 display: inline:block;
*color은 border 색상에도 상속이된다 !! (대박)
'HTML+CSS' 카테고리의 다른 글
| html/css #3-1 마진 병합 현상 (0) | 2023.12.07 |
|---|---|
| html/css #3 - 프로필 사이트 index 2 (class, descendant selector) (0) | 2023.12.07 |
| html/css #2 - html/css 작성 순서 (1) | 2023.12.06 |
| html/css #1-1 cat 페이지 만들기 (0) | 2023.12.05 |
| html/css #1- fruits 페이지 만들기 (0) | 2023.12.05 |
