[깃허브] 이력서 페이지 만들기 (4) - 스타일 적용하기

이전 내용

[깃허브] 깃허브에 이력서 페이지 만들기 (1) - 환경 설정하기

[깃허브] 깃허브에 이력서 페이지 만들기 (2) - 마크업하기

[깃허브] 깃허브에 이력서 페이지 만들기 (3) - 내용 채우기

 

 

앞에서 HTML을 사용해 문서 내용을 작성해 보았습니다. 이제 좀더 보기에 괜찮은 문서로 만들기 위해서는 CSS를 사용해서 제목이나 텍스트, 목록에 스타일을 적용해야 합니다. 글자의 크기나 색상 뿐만 아니라 각 섹션의 위치도 조절할 수 있죠.

이렇게 HTML로 내용을 작성하고 CSS로 스타일을 만들게 되면 내용과 디자인이 분리됩니다. 내용을 수정하려면 HTML 문서만 수정하면 되고, 스타일을 바꾸고 싶다면 CSS 파일만 수정하면 되겠죠? HTML과 별도로 저장하는 CSS 파일을 '외부 스타일시트 파일'이라고 합니다.  참고로, 여기에서는 CSS의 선택자(selector)에 대한 설명은 따로 하지 않습니다. 

 

외부 스타일 시트 파일 만들기

1. github.dev 편집 창 왼쪽의 탐색기 창에서, 맨 위에 있는 깃허브 이름 위로 마우스 커서를 가져가면 작은 아이콘들이 나타납니다. 그 중에서 + 표시가 있는 첫번째 아이콘(New File 아이콘)을 클릭하세요. (혹시 탐색기 창이 보이지 않는다면 사이드바에서 맨 위에 있는 아이콘을 클릭하면 됩니다.)

새 파일 만들기

2. 새 파일 이름을 'style.css'라고 입력한 후 [Enter]를 누르면 편집 창에 style.css라는 새로운 파일이 나타납니다.

새 파일 이름 입력

 

3. 외부 스타일 시트 파일을 만들었다면 HTML 문서에 연결해 주어야 합니다. 이 때는 <link> 태그를 사용합니다.  아래 소스를 </head> 태그 바로 앞에 추가하세요.

 

<link rel="stylesheet" href="style.css">

 

스타일 만들기

1) 문서 전체에 적용할 스타일

 

문서에서 사용할 글꼴이나 글자 크기  등 문서 전체에 적용할 스타일은 body 선택자를 사용해 정의합니다.  여기에서 글꼴은 웹 폰트를 사용할텐데, Google에서 제공하는 Noto Sans KR 체를 사용합니다. 

style.css 문서에 다음과 같은 소스를 입력합니다. 

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

body {
    max-width: 960px;    /* 최대 너비 */
    margin: auto;         /* 마진 auto - 내용을 화면 가운데 맞추기 위해  */
    font-family: "Noto Sans KR", "Nanum Gothic";        /* 글꼴 - 웹 폰트 */
    font-size:14px;     /* 글자 크기 */
}

 

2) 제목에 사용할 스타일

우리가 만든 문서에는 제목을 지정하는 <h1> 태그와 <h2> 태그가 있습니다. 이 제목들에 대한 스타일도 만들겠습니다. 여기에서 rem이라는 단위는, body 스타일에서 지정한 font-size:16px을 기준으로 몇 배 크기인지 나타내는 것입니다. 

이렇게 rem 단위를 사용하게 되면 모바일처럼 작은 화면에서 볼 때도 일반 텍스트를 기준으로 제목 크기가 자동으로 조절됩니다.

위에서 입력한 소스에 이어서 다음 소스를 추가합니다.

 

h1 {
    font-size: 3rem;    /* 글자 크기 */
    letter-spacing: 0.6rem;  /* 자간 */
    padding-top: 1rem;   /* 위쪽 패딩 */
    padding-bottom: 1rem;   /*  아래쪽 패딩 */
}

h2 {
    font-size: 1.5rem;
    padding-bottom: 1em;
}

여기까지 입력하면서 오른쪽의 Code Swing 화면을 확인해 보세요. 글꼴이나 글자 크기가 바뀌어 있을 것입니다. 그리고 <h1> 태그를 사용한 이름 부분은 글자와 글자 사이에 약간씩 여백이 생겨 있죠? 바로 위에서 letter-spacing 속성을 사용해 자간을 조절했기 때문입니다.

 

3) CSS 그리드 사용하기

지금까지 작성한 것만으로도 상대에게 내용을 전달할 수는 있습니다. 하지만 모든 내용이 일렬로 작성되어 있어서 보기에 썩 괜찮아 보이진 않죠?  '플렉스 박스' 기능이나 'CSS 그리드' 기능을 사용하면 각 요소별로 이리저리 다양하게 배치할 수 있습니다.

여기에서는 'CSS 그리드' 기능을 사용해서 내용을 좌우로 배치해 보겠습니다. 

우리가 작성했던 index.html 문서에는 <main> 태그 안에 내용들을 담았는데, 크게 <article> 태그 2개를 사용하고 있죠.

2개의 &amp;amp;amp;amp;amp;lt;atricle&amp;amp;amp;amp;amp;gt; 태그로 구성된 내용

이 아티클을, 하나는 너비 40%로, 또 하나는 너비 60%로 지정하면, 두 개의 아티클을 좌우로 배치할 수 있습니다. 이 내용은 main 태그의 스타일로 지정합니다. 아래 소스를 style.css 문서에 추가합니다.

 

main {
    display: grid;    /* css grid 사용 */
    grid-template-columns: 40% 60%; /* 왼쪽 40%, 오른쪽 60% */
    margin-top: 3rem;
}

 

여기까지 입력하고 Code Swing 화면을 보면 내용이 좌우로 배치될 것입니다.

 

4) 요소 간 여백 조절하기

아직 내용들 간에 여백이 없어서 보기에 답답하군요. 여기에 padding과 margin을 사용해서 여백을 추가하겠습니다. 아직 padding과 margin 속성에 대해 잘 알지 못한다면 CSS 박스 모델에 대해 공부해 보세요.

아래 소스를 style.css 에 추가합니다.

 

header {
    text-align: center;
    margin: auto 2rem;
}

section {
    margin: auto 1rem 4rem 2rem;
}

p {
    margin: 0.2rem auto;
}

hr {
    border: none;
    background-color: lightgray;
    height: 1px;
}

h1, h2 {
    font-weight: 100; 
    margin-bottom: 0;
}

i {
    margin-right: 0.5rem;    /* SNS 아이콘 오른쪽 여백 */
}

 

5) 두 영역 사이에 수직선을 그리려면

 

두 개의 아티클을 좌우로 배치했는데, 두 영역 사이에 수직선을 그리고 싶다면 왼쪽 영역을 기준으로 오른쪽에 수직선을 그리면 됩니다.  index.html에서 왼쪽 아티클의 id 값을 mainLeft라고 지정했었는데, 이 id 값을 사용해서 스타일을 지정합니다. 

 

아래 소스를 style.css에 추가합니다.

 

#mainLeft {
    border-right: 1px solid lightgray;
}

 

여기까지 입력하면 웹 문서가 좀더 읽기 쉬운 형태가 될 것입니다.

 

 

이제 마지막 과정만 남았습니다. 지금까지 만든 파일을 깃허브로 올리고, 깃허브 리포지토리를 웹 사이트 형태로 사용하는 방법을 공부해 보겠습니다. Let's go~ [깃허브] 이력서 페이지 만들기 (5) - 커밋하기