멋사에서 "일단 만드는 HTML/CSS"강의를 수강하고 나만의 포트폴리오를 만들어보았다. 이번 포스팅에서는 아래와 같은 페이지를 만들어 볼 것이다.
먼저 구역을 나누고, HTML코드를 짜고, CSS 코드를 짜는 순서로 설명해보려고 한다.
1. 구역을 나눈다.
만들 페이지에서 구역을 나누어 각 요소에 접근하기 쉽게 했다. 이럴 것 같다는 예상을 하고 페이지를 만들면 될 것 같다.
2. HTML 코드 짜기
프로그램의 뼈대를 만드는 HTML 코드를 짜본다. 가장 기본적인 코드를 짜보았다. 디자인은 별로이지만, 들어갈 내용은 모두 들어간 것으로 보인다.
이제 CSS 코드를 짜보자.
CSS 코드 짜기
1. 상자 만들기
완성본을 보면 포트폴리오가 상자 안에 들어가있다. 그 상자를 만들어보자.
html의 <head></head> 안에 <link rel="stylesheet" href="home.css">를 써주고, home.css 안에 들어가서 편집하기로 했다.
footer를 뺀 전체 코드를 상자 안에 넣기 위해, div로 묶어주고 class 이름은 mainbox로 정했다.
css 코드를 보면 margin-left: auto;과 margin-right: auto;가 보이는데, 이 둘은 상자를 가운데 정렬하는 코드이다.
그리고
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);는 상자의 그림자를 만드는 코드인데, 네가지의 값들은 조정해가며 사용 가능하다.
마지막으로 상자 모양이 예쁘지 않아 width와 margin, padding 값을 줘서 크기를 조정해줬다.
.mainbox {
margin-left: auto;
margin-right: auto;
border: 1px solid #ebebeb;
width:610px;
margin: 30px;
padding: 30px;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);
}2. 한 줄에 두 요소가 나오게 만들기
상자를 만들고 보니 어떤 문제가 보인다. 활동명과 기간을 같은 줄에 쓰고 싶은데, <p>태그를 사용하면 p태그는 블록 요소이기 때문에 다음 줄로 넘어가기 때문이다. 이때 사용하는 것이 float이다.
왼쪽으로 갈 '멋쟁이사자처럼 대학10기'의 경우 float를 왼쪽으로 설정해주고, '202.03~진행중'은 float를 오른쪽으로 설정해준다.
이를 적용하기 위해 p태그에 클래스를 적고, css 스타일시트로 가서 float 설정을 작성해줬다.
.title-text {
float: left;
}
.year-text {
float: right;
}그럼 이런 오류가 생긴다 ㅎㅎ 수업 중에 이런건 float오류라고 들었다.
그래서 먼저 구역을 더 잘게 나눠주고 설정을 적용할 수 있게 float를 적용하는 부분에 클래스를 만들었다. 그리고 만든 클래스에 overflow: hidden;이라는 속성을 추가해주었다.
- overflow에 대한 설명: http://www.tcpschool.com/css/css_position_float
.float-wrap {
overflow: hidden;
}
오류가 해결되었다!
3. 무료 폰트 사용하기
1) https://fonts.google.com/ 에 접속한다.
2) 마음에 드는 폰트를 선택한다.
3) style을 복사해서 스타일시트(.css)에 붙여넣어준다.
여기서는 @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300&display=swap');를 스타일시트(.css)에 붙여주면 된다.
그리고 전체 글자에 대해 이 폰트를 적용한다고 선언한다.
코드를 작성하면 아래와 같다. 이걸 스타일 시트(.css)에 붙여넣어주면 폰트가 적용된다.
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300&display=swap');
* {
font-family: 'Red Hat Mono'';
}
웹 페이지를 더 예쁘게 만들려면 margin, padding 등 CSS파일을 더 수정해야 하지만, 주요 기능을 모두 만들었으므로 여기서 마무리하려고 한다. 완성된 코드는 깃허브에 올라가 있다.
