언어/CSS,HTML

CSS/HTML 이력서 만들기

연나연 2023. 12. 26. 16:26

HTML

=문서의 요소요소를 구분하고 그 요소요소에 의미를 부여하는 역할을 함

 

<p> </p>

-문단

 

<h1> </h1>

 

<!DOCTYPE html> 

<html>

</html>

 

태그

<head> -부가정보가 담김

<body> -세부정보가 담김

 

<meta charset="UTF-8">  <- 한글을 정상 출력하게 하기위해 쓰는 것, 뜻 하나하나 자세히 알 필요없음

<title> 최나연의 이력서 </title>

 

<footer> copyright CODE YEON NA. All right </footer>
<!DOCTYPE html>
<html>
	<head>
    	<meta charset="UTF-8">
        <title>최나연의 이력서</title>
        <link rel="stylesheet" href="codecss.css">
    </head>
	<body>
    	<h1> 최 나 연</h1>
        <p> CSS/HTML </p>
        <footer> copyright CODE YEON NA. All right </footer>
    </body>
</html>

index.html

 

-HTML과 CSS 두 언어 동시에 쓸 때 파일을 분리해야함 (안그러면 난잡해)

 

CSS

 

text-align: center;  <-글자 가운데 정렬
background-color: black;  <-글자배경색
color: white;  <-글자색

(순서는 상관없음)

footer {
	text-align: center;
    background-color: black;
	color: white;
}

 

<활용해보자>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="codelion.css">
    </head>
    <body>
        <p class="big-font">내 이름은 연나</p>
        <p class="small-font">코딩 배웠지</p>
        <p class="small-font">반갑수달</p>
    </body>
</html>
.big-font {
	font-size: 40px;
}

.small-font {
	font-size: 15px;
}

 

<STEP 6.중앙에 배치하기>

html

<div> </div>   <-tag를 묶어주는 태그

css

.클래스명 {

          border: 5px solid black;

          width: 610px

          margin-left: auto; <-박스를 가운데로 정렬하는 코드

          margin-right: auto;  <-박스를 가운데로 정렬하는 코드

}

 

<STEP 7. 박스 쪼개기>

 

 

<!DOCTYPE html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="box_model.css">
  </head>
  <body> 
    <div class="box1">박스1</div>
    <div class="box2">박스2</div>
  </body>
</html>
.box1{
	background-color: skyblue;
    width: 100px;
    height: 100px;
    border: 20px solid black;
}

.box2{
	background-color: violet;
    width: 100px;
    height: 100px;
}

 

.box1 {
    background-color: skyblue;
    width: 60px;
    height: 60px;
    border: 20px solid black;
}

.box2 {
    background-color: violet;
    width: 100px;
    height: 100px;
}

 

패딩 추가하기 <- 박스안쪽과 글씨사이의 간격 설

 

<STEP8. 그림자 표현하기>

<STEP9. 구글 웹 폰트 사용하기>

<section> </section>   <--div랑 똑같다고 보면됨 난잡하지 않기위해 씀

 

<STEP10. ABOUT ME 제작하기>

< STEP11. EXPERIENCE 제작하기>

-한 줄에 각각 왼쪽, 오른쪽 정
float: left 
floar:right
-둥둥 떠다니기 떄문에 다른 요소(글자,등)과 겹칠 수 있음
가두리를 만들어줘야함.

<div class="float-wrap">
float: left 
floar:right
</div class="float-wrap">

 

<STEP12. 뗏목 띄우기>

위에서 가두리에 가둔 float를 css에서 다음과 같이 쓴다.
.float-wrap{
    overflow: hidden;
{

<STEP13. 이력서 완성하기>

<STEP14. 나만의 이력서 정리하기>