22-08-29-TIL

YJ·2022년 8월 29일

멋쟁이 사자처럼 프론트엔드 스쿨 3기

목록 보기

2/56

오늘은 일단 만들어보는 HTML/CSS 강의를 들어보면서 한 페이지의 이력서 형태를 만들어 봤습니다.

기본적인 구조

<!DOCTYPE html>
<html>
	<!--한국말이 포함되어 있음을 명시하기!-->
	<meta charset="UTF-8">
	<head>문서에 대한 정보를 작성(부가적인 내용)</head>
	<body>문서의 모든 내용 포함</body>
</html>

title 태그

상단 탭에 표시되는 태그로 head 태그에 포함

<title>이유진의 이력서</title>

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>이유진의 이력서</title>
      	<link rel="stylesheet" href="code2.css">
    </head>
    <body>
        <h1>이유진</h1>
        <p>HTML/CSS 개발자</p>
      	<footer>copyright CODE LION. ALL rights reserved.</footer>
    </body>
</html>

html 파일과 css 파일을 연결해 주기 위해선 link 태그 사용 (head 태그 안에 위치)

code2.css

footer {
    /* 글자 중앙 정렬하기 */
    text-align: center;
    background-color: black;
    color: white;
}

같은 태그 다른 스타일로 꾸미기

class로 도움받기 (css 파일에선 "." 사용으로 적용)

    <body>
	<p class="big-font">내 이름은 이유진</p>
	<p class="small-font">코드라이언으로 코딩 배웠지.</p>
	<p class="small-font">반갑습니다.</p>
    </body>

p {
	// 글씨 크기 키우기
	font-size: 30px;
}

.big-font {
	font-size: 40px;
}

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

div 태그로 묶어 중앙 배치

<div class="mainbox">
      <h1>이유진</h1>
      <p>HTML/CSS 개발자</p>
</div>

.mainbox {
    text-align: center;
}

css 꾸며주기

.mainbox {
    text-align: center;
    /*테두리 그리기 border: 두께 방식 색상*/
    border: 5px ridge #CC95F4;
    /*박스 폭 줄이기*/
    width: 600px;
    /*박스 자체 중앙 정렬*/
    margin-left: auto;
    margin-right: auto;
}

제일 바깥 부분 : Margin
테두리 : border
테두리 안쪽 : padding
제일 안쪽 : content

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

/* * 모든 곳*/
* {
	/* 폰트 이름 작성*/
	font-family: 'Montserrat';
}

/* 기본 값 부여하기*/
body,h1,h2 {
	margin: 0px;
	padding: 0px;
}

body {
	min-width: fit-content;
}

.mainbox {
    text-align: center;
    /*테두리 그리기 border: 두께 방식 색상*/
    border: 5px ridge #CC95F4;
    /*박스 폭 줄이기*/
    width: 600px;
    /*박스 자체 중앙 정렬*/
    margin-left: auto;
    margin-right: auto;

    /* 그림자 추가하기 box-shadow: 가로축그림자(+: 오른쪽으로, -: 왼쪽으로, 0: 존재x), y축그림자, 그림자흐름, 그림자퍼짐도, rgba(,,,투명도) */
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}

.name-text {
    font-size: 17px;
    color: thistle;
    font-weight: bold;
}

float를 통한 한 줄로 좌,우 정렬

다른 것들과 겹칠 수 잇는 성질을 가짐

/*한쪽은 왼쪽 정렬, 오른쪽 정렬 -> 묶음 처리(div 태그) */
.float-wrap {
	/* float 요소들을 묶어 다음 요소가 영향 받지 않도록 설정*/
    overflow: hidden;
    margin-bottom: 4px;
}

.title-text {
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: left;
}

.year-text{
    font-size:11px;
    font-weight: bold;
    color: #282828;
    float: right;
}