CSS에서 플렉스박스와 그리드를 이용해서 웹 페이지의 레이아웃을 만들 수 있다. 플렉스와 그리드의 차이점은, 플렉스박스의 경우 한 방향으로만 레이아웃을 설계할 수 있지만, 그리드의 경우 2차원의 형태로 가로, 세로 방향으로 레이아웃을 설계할 수 있다는 점이다.
두 방법 모두 각자의 장단점이 있으므로, 적절히 섞어서 웹 페이지를 만들어 보겠다.
1. 네비게이션 바 만들기
네비게이션 바는 우리가 흔히 보는 웹 페이지의 메뉴창이다. HTML과 CSS를 이용해서 네비게이션 바를 만들어 보도록 하겠다. 먼저 index.html 파일과 style.css 파일을 준비한다. 그리고 <link> 태그를 이용해 이 두 파일을 연결해주자.
네비게이션 바는 다음과 같이 링크의 리스트라고 생각하면 편하다. <nav>태그는 다른 페이지로 넘어갈 수 있게 링크를 가지고 있는 요소들의 집합을 정의할 때 사용한다. 그리고 아래의 코드를 index 파일의 <body> 태그 안에 넣어주면 가장 간단한 네비게이션 바가 만들어진다. 그리고 <ul> 태그에 main-nav 클래스를 지정해주어 CSS에서 네비게이션 바를 따로 조절할 수 있게 해주자.
*href에 공백을 넣어둔 이유는 따로 HTML 파일을 만들지 않았기 때문이다.
<nav>
<ul class="main-nav">
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</nav>이렇게 한 뒤, index 파일을 실행하면 다음과 같이 가장 간단한 형식의 네비게이션 바가 완성된다. CSS를 이용해서 네비게이션 바의 모양을 잡아주도록 하겠다.
먼저, 네비게이션 바를 페이지의 상단에 수평으로 위치시키고 싶다. Home New Contact About을 수평으로 위치시키기만 하면 되기 때문에 플렉스박스를 사용해서 네비게이션 바를 만들어보도록 하겠다. 플렉스박스를 사용하기 위해 <ul> 태그에 있는 main-nav 클래스를 이용한다. 그리고 다음과 같이 작성해준다.
.main-nav {
display: flex;
list-style: none;
background: rgba(30, 184, 163, 0.2);
}이렇게 한 뒤, index 파일을 실행하면 다음과 같이 수평으로 네비게이션 바가 배치된 모습을 볼 수 있다. 자세히 보면 양 사이드에 빈 공간이 생겨 백그라운드가 전체를 커버하지 못하고 있는데, 이는 각 웹 브라우저마다 기본적으로 margin을 가지고 있기 때문이다. 그렇기 때문에 <body>의 margin을 0으로 설정해주면 문제가 해결된다. 마찬가지로 main-nav 클래스도 기본적으로 margin 값을 가지고 있기 때문에 상하에 공간이 생겨 여백이 생긴 모습을 볼 수 있다. 그렇기 때문에 main-nav 클래스에서도 margin을 0으로 초기화 시켜주자.
body {
margin: auto 0;
}
.main-nav {
display: flex;
list-style: none;
background: rgba(30, 184, 163, 0.2);
margin:auto 0;
}
네비게이션 바가 원하는 대로 수평으로 배치는 됐지만, 글자들이 모두 다닥다닥 붙어있고 밑줄이 그어져있어 깔끔하지 않은 모습이다. 글자들이 붙어있는 이유는 개발자 도구 탭에서 확인할 수 있다.(컨트롤 + 쉬프트 + I)
CSS에서는 콘텐츠를 배치할 때, content -> padding(안쪽 여백) -> border(테두리) -> margin(여백) 으로 겹겹히 쌓여있는 상태에서 각각의 요소들의 값을 조절해서 배치해야 한다. 하지만 아래 그림처럼 padding의 값을 따로 설정하지 않았을 경우에는 content를 감싸고 있는 padding, border, margin의 값이 없는 상태이기 때문에 글자가 붙어서 나온 것이다.
<li> 태그와 <a> 태그 중에서 <li> 태그에 padding 값을 입력해주는 것이 보기 좋기 때문에 <li> 태그에 padding을 설정해주고, 텍스트가 직접 들어가 있는 <a> 태그에 밑줄을 없애주는 코드를 작성해주자.
li {
padding: 0.5rem;
}
a {
text-decoration: none;
}
여기서 News, Contact, About을 오른쪽으로 배치해서 조금 더 다듬어 보도록 하겠다. index 파일로 돌아가 <li> 태그의 News에 다음과 같이 push 클래스를 추가해주자. 이름처럼 News를 오른쪽으로 밀어버리겠다는 의미이다.
<li class="push"><a href="">News</a></li>CSS 파일에서는 다음과 같이 입력해준다. 이는 왼쪽의 여백(margin)을 최대한으로 둘 수 있는 만큼 두어 push 클래스를 오른쪽으로 밀어버린다는 의미이다.
.push {
margin-left:auto;
}개발자 도구에서 더 확실하게 이를 확인할 수 있다. News의 왼쪽 여백이 페이지의 사이즈에 따라 최대한으로 계산되어 News가 오른쪽에 위치하게 됐다. 그리고 이에 따라 Contact와 About 역시 같이 밀리면서 아래처럼 나타나게 됐다.
*미디어 쿼리 추가하기
미디어 쿼리를 이용하면 웹 페이지의 화면을 출력하는 출력 장치의 크기에 따라 하나의 HTML 소스가 여러가지 뷰를 가질 수 있게 만들어준다. 일반적으로 출력 장치의 해상도에 따라 분기점을 만들어 사용한다. CSS 파일에 다음과 같은 코드를 추가해주면 해당 웹 페이지에서 미디어 쿼리를 이용한 분기점을 사용할 수 있게 된다.
@media only screen and (max-width: 600px) {
.main-nav {
font-size: 0.5em;
padding:0;
}
}스크린의 가로 길이가 600픽셀 아래로 내려갈 때, main-nav 클래스의 폰트 사이즈를 줄이고, padding을 0으로 만들어 작은 화면에 맞게 다시 뷰를 만들어주는 코드이다. 이 코드를 추가하고 index 파일을 실행한 뒤, 가로 길이를 줄이면 길이에 따라 변하는 모습을 확인할 수 있다.
자세한 것은 추가적인 학습을 통해 업로드를 하겠다.
2. 커버 만들기
이번에는 커버를 만들겠다. 인터넷에서 마음에 드는 이미지를 받아 커버 이미지로 사용하면 된다. 작성자는 아래의 이미지를 다운받아 커버로 사용하려 한다.
다시 index.html로 돌아가 네비게이션 바를 만들었던 <nav> 태그아래에 다음과 같은 코드를 추가해주자. 커버가 들어갈 공간을 꾸며주기 위해 container 클래스를 만들었고, 그 안에 <img> 태그를 이용해 커버로 사용할 이미지의 소스가 있는 주소를 적어주었다. alt의 경우 아직 작성해주지 않았는데, 필요에 따라서 커버와 관련있는 단어를 선택해 적어주면 된다.
<div class="container">
<img class="cover" src="./img/cover.jpg" alt="">
</div>해당 코드를 추가하고 실행하면 다음과 같이 삽입된 이미지의 크기가 너무 커서 보기 좋지 않다.
아래와 같은 코드를 style 파일에 추가해주면 문제가 해결된다. container 클래스의 표현방식을 flex로 설정하고, 그 안에 있는 img를 정렬하기 위해 justify-content와 align-items를 이용하면 된다. 그리고 container가 해당 페이지에서 차지하는 비율을 50vh로 정함으로서, 뷰 사이즈에 따라서 Viewport Height의 비율에 맞게 container의 height가 조정된다. 그리고 <img> 태그 자체에 사이즈를 조절하지 않았기 때문에 cover 클래스의 너비를 35rem으로 맞춰주었다. 그리고 테두리를 살짝 둥글게 만져주었다.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 50vh;
background: cornsilk;
}
.cover {
width : 35rem;
border-radius: 4px;
}
'Web > CSS' 카테고리의 다른 글
| CSS의 Selector(선택자)와 Property(속성) (0) | 2020.08.25 |
|---|---|
| CSS(Cascading Style Sheet) (0) | 2020.08.24 |
