vc code
폴더 만들어서 파일 열기 파일 이름에 .확장자 붙이기!!
ctrl+s 하면서 계속 저장하기
HTML 기초
기본구조
<!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>
<h1> 내용 </h1>
<p> 내용 내용 </p>
</body>
</html>
<!DOCTYPE html> : HTML5 문서 선언
<html> : 전체 문서 감싸는 태그
<head> : 설정(제목, css연결 등)
<body> : 실제 화면에 보이는 내용
주요태그
<title> : 브라우저 탭 제목 설정
<h1>~<h6> : 제목 태그 (1이 가장 크고 점점 작아짐)
<strong> : 굵게 표시
<u> : 밑줄 표시
<p> : 문단 구분
<br> : 줄바꿈
<li><ul> : 순서 없는 리스트
<li><ol> : 순서 있는 리스트
<a href="링크"> : 링크 생성
<img src="이미지 경로"> : 이미지 삽입
<>
css 기초
css 연결
html 파일 <head> 부분 안에 <link rel="stylesheet" href="____.css" /> 를 넣어 연결한다
주요태그
선택자
body : 전체 페이지
main : 메인 콘텐츠 영역
.profile : class="profile"인 요소
.details : class="details"인 요소
.profile img : profile 안에 있는 img만 선택 (자식 선택)
h2 : 모든 h2 태그
p : 모든 p 태그
li : 모든 li 태그
a : 모든 a 태그
a:hover : 마우스 올렸을 때 a 태그 상태
body {
margin: 0;
background-color: white;
font-family: Arial, sans-serif;
}
a:hover {
text-decoration: underline;
}이런식으로 하면 된다
속성
margin : 바깥 여백
padding : 안쪽 여백
background-color : 배경색
color : 글자 색
font-family : 글꼴 설정
font-weight : 글자 굵기
width : 가로 길이
height : 세로 길이
border-radius : 모서리 둥글게
box-shadow : 그림자 효과
display : 요소 배치 방식 설정 (flex 정렬 시스템)
flex-direction : flex 정렬 방향 (row 가로 / column 세로)
justify-content : 가로 정렬
align-items : 세로 정렬
gap : 요소 사이 간격
min-height : 최소 높이
object-fit : 이미지 비율 유지 방식 (cover 이미지 꽉 채우기)
text-decoration : 밑줄 등 텍스트 꾸미기
이 코드들을 활용해서 결과물을 만들었다.
결과물
HTML코드는
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아기사자 자기소개</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<article>
<section class="profile">
<img src="p.jpg" width="200" height="200" />
<div>
<h2>김아현</h2>
<p class="role">Frontend</p>
<p>열심히 배우는 프론트엔드입니다.</p>
</div>
</section>
<section class="details">
<h2>김아현</h2>
<p class="role">Frontend</p>
<p>멋쟁이사자처럼</p>
<h3>자기소개</h3>
<p>인천대 아기사자 14기 프론트엔드 개발자입니다. 저는 F1이랑 웹툰보는거 좋아합니다. 친해지면 말도 많아져요!</p>
<h3>연락처</h3>
<ul>
<li>이메일: kah@gmail.com</li>
<li>전화: 010-0000-0000</li>
<li>웹사이트:<a href="https://velog.io/@_zn_/posts" target="_blank">https://velog.io/@_zn_/posts</a></li>
</ul>
<h3>관심기술</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h3>한마디</h3>
<p>기초를 탄탄하게 다져서 더 나은 개발자 되겠습니다!</p>
</section>
</article>
</main>
</body>
</html>이렇게 만들었다.
<head> 이 부분은 !enter치면 나오는 기본 툴에 <link rel="stylesheet ="href="style.css"/> 만 추가해 만들었고 title만 바꿔주었다.
<body>안에 <main>을 쓰고 코드를 짰는데 css만들면서 구조가 마음에 들지않아서 <article>을 나중에 추가로 넣게 되었다.
원래는 <div>로 나눌까 했는데 <div>를 많이 쓰는건 추천하지 않는다길래 <section>으로 나누게 되었다.
큰 카드안에 작은 카드 두개가 들어있는 그림이었기때문에 class를 사용해 plofile과 details로 나누었다.
plofile에서 사진과 글은 따로 움직이려고 사진은 그냥 넣고 글들은 <div>로 묶어주었다. 이름은 나름 중요한 정보이기 때문에 <h2>를 사용해 써주었고 나머지 내용은 <p>를 사용해 써주었다. frontend는 따로 색을 넣고 볼드처리를 해줄 예정이었기에 class로 role이라는 이름을 붙여었다.
details도 비슷한 구조로 만들어주었다. 이름이 가장 컸으면 해서 소제목들은 <h3>로 써주었다. 연락처와 관심기술 부분은 불릿기호를 써주기위해 <ul>안에 <li>를 써서 내용을 썼다.
웹페이지를 새로 열기 위해서 <target="_blank">써서 링크를 걸었다.
CSS코드는
body {
margin: 0;
background-color: white;
font-family: Arial, sans-serif;
}
main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
article {
background-color: lightgray;
padding: 30px;
border-radius: 20px;
width: 600px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
gap: 30px;
}
.profile, .details {
background-color: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.profile {
background-color: white;
padding: 20px;
border-radius: 15px;
display: flex;
flex-direction: column;
width: 300px;
height: 300px;
}
.profile img {
width: 170px;
height: 170px;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}
.role {
color: blue;
font-weight: bold;
margin: 5px 0;
}
h2 {
margin: 0 0 5px;
}
h3 {
margin-top: 20px;
}
p {
margin: 5px 0;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
a {
color: blue;
}
a:hover {
text-decoration: underline;
}이렇게 만들었다.
결과물은 이렇게 나온다
느낀점
다 어려웠다.. 일단 아무것도 할 줄 모르던 내가 점점 무언가를 할 수 있게 되어가고 있다..!! 모르는 부분은 지피티 도움을 받아가면서 했는데.. 그래도 모르는게 많다.... 과제를 하다가 뭘 잘 못 눌러서 코드를 날려먹었다.... 일단 만들긴 했지만 아직도 모르는게 많아서 더 공부해야될 것 같다..
