티스토리 뷰

Frontend-dev/HTML-CSS-JS

반응형 웹 제작하기 3

RunningWater 2018. 1. 28. 01:17

반응형 웹을 이어서 만들어보도록 하겠습니다. 저번 포스팅에는 index.html을 채웠습니다. 오늘은 main.css를 작업해 보겠습니다. 


main.css 작업하기



다른 작업을 하기 전에 우선 해야할 것은 css를 리셋하는 겁니다. 왜 css를 리셋해야 할까요? 같은 태그를 사용하더라도 그에 따른 기본값은 브라우저마다 다릅니다. 그래서 똑같이 보여주기 위해 css 리셋을 해주는 것이죠. 보통 구글에서 css reset 등의 단어를 치면 소스코드가 나오는데 그걸 복사해서 사용하시면 됩니다. 



저는 위의 사이트에서 소스코드를 갖고왔습니다. 리셋을 한 후 해야할 건 css도 기본적으로 구조를 잡는 것입니다. 모바일 환경 부터 시작해서 태블릿과 데스크톱 환경에는 미디어쿼리를 통해 css 값들을 주도록 하겠습니다.


/* 기본 및 휴대폰 */

/* 태블릿 */
@media (min-width:768px){
}
/* 데스크톱 */
@media (min-width:980px){
}


기본 화면


<a>태그는 리셋되지 않았군요. <a>태그의 밑줄과 색부터 없애보겠습니다.


#wrap{
  position: relative;
}
a{
  text-decoration: none;
  color: #555;
  opacity: 0.9;
}
a:hover{
  opacity: 1;
}


<body>태그 안에서 전체를 감싸고 있는 #wrap이라는 <div>태그에 우선 position 값을 relative로 설정했습니다. 나중에 <header>태그를 이동시키는데 필요합니다. 그리고 <a>태그의 밑줄을 없애고 색을 변경시켰습니다. opacity 속성은 투명도를 조정하는 속성입니다. 1이면 기본값이고 숫자가 줄어들면 점점 투명해집니다. 마우스를 올려놓았을 때 차이가 나도록 투명도를 조절해봤습니다. 


.background{
  background-image: url("../image/saipan.jpg");
  opacity: 0.9;
  background-position: center;
  background-size: cover;
  height: 100vh;
  min-height: 550px;
}


그리고 뒤에 이미지를 배경화면으로 주었습니다. height 값에 100vh로 값을 준 이유는 사용하는 이미지를 사용하는 기기에 딱 맞게 덮기 위해서입니다. 그리고 min-height라는 속성은 최소로 유지할 높이입니다. 화면에 맞게 작아지다보면 배경 안에 있는 글들이 <header>부분이랑 겹치게 될 수도 있습니다. 그래서 그런 상황을 방지하고자 최소높이 값을 주었습니다. 


header{
  display: flex;
  flex-direction: column;
}


header 부분에 flex를 선언하고 방향을 세로로 했습니다. 모바일에서는 로고 밑에 네비게이션 바가 있기 때문입니다. 


header h2{
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  padding: 1rem 0;
  align-self: center;
}
header nav ul{
  display: flex;
  justify-content: space-around;
  font-size: 1.2rem;
}


<header>부분에 아이템 부분을 보도록 하겠습니다. Logo라고 적혀 있는 <h2>부분은 글씨체를 roboto로 설정했습니다. 로고 부분을 가운데로 옮기기 위해 align-self 값을 center로 주었습니다. 그리고 <nav>태그의 자식인 <ul>태그에 플렉스를 선언하고 <li>태그들을 space-around로 배치했습니다.


모바일 환경 초기모습

지금까지 잘 따라오셨다면 위의 이미지와 같은 상태가 됩니다. 이제는 태블릿과 데스크톱에서의 <header>부분을 꾸며볼까요? 미디어쿼리에 넣을 부분은 모바일과 공통적으로 작성한 부분과 다른 부분들만 적으면 됩니다.


header{
  flex-direction: row;
}
header h2{
  font-size: 2.7rem;
  padding: 1.3rem;
  flex-basis: 20%;
}
header nav{
  flex-basis: 80%;
}
header nav ul{
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  font-size: 1.4rem;
}
header nav ul li{
  margin-right: 1.7rem;
}


위의 소스코드를 @media (min-width:768px){ }에 중괄호 사이에 넣으시면 됩니다. 코드를 설명드리면 우선 <header> 부분에 플렉스 방향이 바뀌어야 겠죠? 그리고 로고와 네비게이션 부분이 2:8의 비율이 되도록 flex-basis 값을 주었습니다. 


태블릿 환경태블릿 환경에서는 로고와 네비게이션 바 한 줄에 위치합니다.


데스크톱의 경우엔 태블릿 환경과 다 똑같고, 글씨 크기와 여백 값만 차이나니 나중에 전체코드를 통해서 확인해주세요.

헤더부분을 완성했으니 나머지 부분은 아주 쉽습니다. 다시 모바일 환경으로 돌아와주세요.


.background{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.background라는 <div>태그에 플렉스를 선언하고 안의 컨텐츠들을 가운데로 옮겼습니다. 


.background h1{
  font-family: 'Roboto', sans-serif;
  color: white;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 3rem;
}
.background h3{
  color: white;
  font-size: 1.8rem;
  text-align: center;
}
.btn{
  background-color: white;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
  padding: 1.2rem 2rem;
  opacity: 0.8;
  margin-top: 4rem;
}


안 의 내용들을 모두 text-align속성을 통해 가운데 정렬했고, 폰트 사이즈를 조정했습니다. .btn이라고 되어있는 부분은 제 블로그로 오는 버튼입니다. border-radius 속성의 경우 테두리의 4각을 둥글게 만들어줍니다. text-transform 속성은 안쪽의 텍스트를 대문자나 소문자로 바꿔줍니다.


반응형 웹 만들기 예제잘 따라오셨다면 위의 화면과 똑같겠죠?


이제는 <header>부분을 <section> 부분 위에 올리기만 하면 됩니다. 혹시 어떻게 올릴 지 감이 안잡히는 분들은 제 블로그에 있는 css position 강의 부분을 다시 보시길 추천드립니다.


header{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
header a{
  color: white;
}


위에서 헤더부분을 찾아서 위의 값들을 추가해주세요. header부분의 position 값이 absolute가 되면 부모태그 중에 static이 아닌 태그를 찾아서 오프셋을 조정합니다. 미리 #wrap이라는 <div>태그에 position 값을 relative로 주었으니 거기에 맞춰서 조정됩니다. z-index의 경우 여러 태그들이 겹쳐질 때 맨 위로 올려서 보여줍니다. z-index부분을 설정하지 않으면 헤더부분이 보이지 않으니 유의하세요. z-index 값이 높을수록 위로 보여지게됩니다. 그리고 헤더부분에 <a>태그에 글자색을 흰색으로 바꾸면 완성입니다.




분량 조절에 실패해서 길어졌지만 드디어 완성입니다. 이제는 자바스크립트를 배울 시간입니다. 다음 포스팅에서 뵙겠습니다.



공감은 제작자에게 큰 힘이 됩니다.


'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글

자바스크립트의 변수  (0) 2018.02.01
html과 css, javascript의 주석  (0) 2018.01.29
반응형 웹 제작하기 2  (2) 2018.01.27
간단한 반응형 웹 만들어보기  (0) 2018.01.19
반응형 웹 제작하기 1  (3) 2018.01.18
댓글