다시 기초를 쌓고 있는중이다.
html css 기초부터 다시 시작하기 위해 공부 중이다.
기초 탄탄하게 하면서 내가 원하는 프로젝트도 잘 구현할 수 있는 개발자가 되어야지.
현재 기초를 다시 공부하면서 아래처럼 코드를 짰고, 이미지가 들어있는 상태다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./food1.png" alt="">
<h3>Harry</h3>
<p>Front-end Developer</p>
</body>
</html>
이미지를 가운데에 배치시키기 위해 다음처럼했다.
style="width: 100px; display: block; margin-left:auto; margin-right:auto;"를 img태그에 추가해주었다.
이미지 크기가 크니까 100px로 바꿔주고 block형태로 만들어서 좌우 마진을 동일하게 주도록 하였다.
display:block; => 가로행 전부 차지
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./food1.png" alt="" style="width: 100px; display: block; margin-left:auto; margin-right:auto;">
<h3>Harry</h3>
<p>Front-end Developer</p>
</body>
</html>
반드시 결승점을 통과하는 개발자