[HTML&CSS 기본] 1. HTML/CSS로 만드는 나만의 이력서

728x90

이 글은 코드라이언(CODE LION) '일단 만드는 HTML/CSS' 강의를 바탕으로 주요 개념을 정리한 내용입니다.

코드라이언 링크

HTML/CSS로 만드는 나만의 이력서

HTML과 CSS는 컴퓨터 코딩을 시작하는 가장 기본이다.

파이썬/자바로 뭘 하겠다라고 생각하더라도 그 기본은 HTML/CSS이다.

화면의 결과물을 볼 만하게 꾸며줄 때 HTML/CSS를 사용한다.

코딩을 한다는 생각보다는 '문서'를 만든다는 생각을 가지고 만드는 게 더 올바른 접근이라고 할 수 있다.

HTML/CSS로 작업한 문서는 다른 언어와 아주 부드럽게 섞일 수 있다. - 가장 기본이며 중요한 이유!

우리가 이번에 HTML/CSS로 만들어 볼 문서는 이력서이다. 다음과 같은 형태의 문서를 만들어보면서, HTML과 CSS에 대한 기본적인 내용을 공부할 것이다.

HTML과 인사하기

HTML 문서를 「여행 짐가방」이라고 생각하자. 여행 짐가방 안에는 또다른 작은 가방들로 구성되어있다. 내용물을 가방으로 묶어놓은 것이다.

하나의 가방을 태그라고 생각하면 된다. 태그는 열었다면 반드시 닫아줘야 하며(단독태그는 제외), 닫는 태그는 태그 이름 앞에 '/'를 붙이면 된다.

<가방1>내용물입니다.</가방1>

가방 안에 가방을 또 넣을 수 있듯이, 다음과 같이 작성할 수도 있다.

<가방2><가방1>내용물입니다.</가방1></가방2>

태그 안에 태그를 넣을 때 주의해야 하는 점은 나중에 연 태그를 먼저 닫아주어야 한다는 것이다.

속에 있는 작은 가방 지퍼를 먼저 닫고 큰 가방 지퍼를 닫아야 하는 것처럼, 태그도 내용물을 감싸는 형식으로 써주어야 한다.

가방1, 가방2 와 같이 썼던 태그를 <p>와 <h1> 로 바꿔보자.

<p>hello</p>
<h1>hello</h1>

3. 문서의 골격

<p>: 가장 기본적인 태그
<h1>: 큰 제목을 쓸 때

많은 태그들이 있지만 이것들을 모두 다 외우고 있을 필요는 없다. 사용되는 것은 약 30개 정도로 압축할 수 있다. 따라서 많이 쓰는 몇 개의 태그들만 알고 있더라도 HTML을 작성할 수 있다.

잘 쓰이고 쉬운 태그를 사용하여 간결하게 문서를 작성하는 것이 HTML 파일을 잘 작성하는 것이다.

<html> </html> : "이것이 HTML문서다."라고 알려주는 태그

<!DOCTYPE html> : 이 코드를 HTML 문서의 맨 위에 추가해준다. 없어도 되기는 한데 왜인지 모르게 다들 다 쓴다고 한다.

따라서 다음의 코드는 HTML 문서를 작성할 때 기본으로 있어야 한다.

<!DOCTYPE html>
<html>
</html>

<head>: 내용물에 대한 추가 정보를 담는다.
<body>: 내용물 정보를 담는다.

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

"우리 문서에는 한글도 있다."라고 한글로 입력된 문서라는 것을 알려줘야 한다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>김멋사의 이력서</title>
    </head>
    <body>
        <p>김 멋 사</p>
        <h1>HTML/CSS 개발자</h1>
    </body>
</html>

CSS와 인사하기

HTML파일은 태그들로 이루어져 있다.

<p>태그: paragragh의 줄임말. 문단

HTML과 CSS파일은 구분해서 작성해야 한다.

주로 index.html 을 페이지의 첫 화면으로 많이 쓴다.

그래서 HTML파일의 이름은 index.html로, css파일의 이름은 codelion.css 라고 하겠다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>김멋사의 이력서</title>
    </head>
    <body>
        <p>김 멋 사</p>
        <h1>HTML/CSS 개발자</h1>
        <footer>copyright CODE LION. All rights reserved.</footer>
    </body>
</html>

두 파일을 연결하겠다는 태그 ▷ <link>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>김멋사의 이력서</title>
        <link rel="stylesheet" href="codelion.css">
    </head>
    <body>
        <p>김 멋 사</p>
        <h1>HTML/CSS 개발자</h1>
    </body>
</html>

CSS 파일에는 스타일을 지정할 태그 이름을 쓰고, 중괄호({)를 열어서 옵션과 옵션값을 쓰고 세미콜론(;)을 써주고, 중괄호로 닫아주면 된다.

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

가독성 챙기기

같은 태그 안에서 다른 스타일을 적용하려면 어떻게 해야 할까?

즉, 같은 <p>이지만 하나는 40px, 하나는 15px로 하고 싶다면?

▶ class로 나누면 된다!

HTML파일에서 특정 스타일을 지정하고 싶은 태그에 class="클래스이름"을 쓰고,

CSS파일에서 클래스를 정의할 때에는 클래스 이름 앞에 점(.)을 붙이면 해당 태그에 특정 스타일이 지정된다.

<p class="big-font">큰 폰트</p>
<p class="small-font">작은 폰트</p>

p {
font-size: 30px;
}

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

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

중앙에 배치하기

footer {
	text-align:center;	//텍스트 가운데 정렬
	background-color: #1e1e1e;	//배경색 지정
	color: #919191; 	//텍스트 색깔 지정
	font-size:12px;		//폰트 사이즈 지정
}

<div> : division의 준말. 구역/영역이라는 뜻.

- 여러 태그들을 묶어서 css로 한번에 꾸며주기 위해 사용하는 태그

border: 두께 방식 색깔;

.mainbox {
	border: 1px solid #ebebeb;	//box 테두리
	width: 610px;	//box 너비
}

박스 자체(<div>)를 가운데 정렬하는 방법

.mainbox {
	border: 1px solid #ebebeb;
	width: 610px;
	margin-left: auto; //!
	margin-right:auto;  //!
}

박스 쪼개기

HTML에서 각 콘텐츠는 다음과 같이 구성되어 있다.

margin: 테두리 밖 여백
border: 테두리
padding: 테두리 안 여백(테두리와 내용물 사이)
content: 내용물

width = border + padding 너비 합
height = border + padding 높이 합

Margin

Border

Padding

Content

*참고) 로렘 입숨(Lorem ipsum)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

사용하는 이유

문서 디자인에 의미있는 글을 담으면 사람들은 양식을 보지 않고 글 내용에 집중하는 경향이 있다. 글씨체에 집중하지 않고 글 내용에 집중하게 되는 일을 막고 디자인을 보여주는 데 집중하고자 어딘가 라틴어처럼 그럴듯해 보이지만 실질적인 의미가 없는 단어를 조합해서 만든 글이다.

한글 로레입숨 예시

사람들의 내 내 봅니다. 까닭이요, 벌레는 나는 듯합니다. 아무 우는 사람들의 잠, 다 별이 이름을 까닭입니다. 소녀들의 새겨지는 않은 하늘에는 버리었습니다. 이름과, 하나의 벌써 토끼, 새겨지는 별이 그리고 것은 없이 있습니다. 했던 위에 아름다운 덮어 밤을 그러나 이름과 까닭이요, 봅니다. 이름자를 어머니, 위에 별 나의 것은 계절이 버리었습니다. 나는 써 하나에 그리고 동경과 가을로 멀듯이, 계십니다. 위에 이네들은 가득 까닭입니다. 못 피어나듯이 아름다운 부끄러운 지나가는 잠, 봅니다. 이름과, 가을 별 아름다운 흙으로 별빛이 봅니다.

그림자 표현하기

박스에 그림자 넣기

box-shadow 옵션 이용: x축으로 이동, y축으로 이동, blur, spread, 그림자의 색(rgb, a는 투명도(0~1))

.mainbox {
	box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}

font-weight: 폰트의 두께 지정 옵션 - 옵션값: bold, lighter 등

구글 웹 폰트 사용하기

구글 웹 폰트를 사용하려면 사용하고 싶은 폰트를 구글에서 검색해서 다음과 같이 url을 import 해오면 된다.

* 은 문서 전체에 적용하는 css이다. 주로 폰트를 지정할 때 사용한다.

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

About Me & EXPERIENCE 제작하기

글 아래에 줄을 쫙 그어주기

border-bottom 1px solid #ebebeb;

줄간격: line-height 글자 크기의 160%가 가독성이 좋은 줄 간격이라고 한다.

같은 라인에서 하나는 왼쪽 정렬, 하나는 오른쪽 정렬하기

text-align이 아닌 float사용

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

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

float는 둥둥 떠다니면서 정렬하는 방식이다. 따라서 다른 요소와 겹칠 수도 있다. 다른 요소에 방해되지 않으려면 가두리 작업을 하면 된다.

.float-wrap {
	overflow: hidden;
}

float를 overflow: hidden; 으로 묶어주면 다른 요소와 겹치지 않게 된다.

이력서 완성하기

이미지 추가하기

<img src="images/insta.png">

이미지 크기 조정 → css class 지정 → width, height 지정

<a>태그: 링크 연결

다음 코드에서는 페이스북 아이콘을 누르면 페이스북 페이지로 연결되게 하였다.

<a href="http://facebook.com"><img class="sns-img" src="images/facebook.png"></a>