이제 본격적으로 웹사이트를 직접 만들면서 하나씩 익혀보도록 하겠습니다.
주변 사람들에게 가르쳐 줄때도 항상 제일 먼저 apple 메인페이지를 만들어보라고 합니다.
여기서도 똑같이 하드코딩으로 작성하면서 설명을 드리겠습니다.
이미지는 인터넷에서 주워오겠습니다.
제일먼저 페이지 작업을 할 때 무작정 코드를 써내려가는 것부터 하지 않습니다.
디자인을 본인이 하면 이 부분은 어떤 태그를 사용하고 어떤 스타일로 만들것인지를 생각하면서 디자인을 하지만..
대부분은 디자이너가 작업한 이미지파일을 받습니다.
그럼 이미지를 훑어보며 헤더부분은 어떤 방법으로 작성을 하고 메인부분은 어떻게 하고 푸터는 어떻게 나누고
더 디테일하게 들어가서 헤더에 있는 메뉴들은 어떤 태그들을 사용하며 메인 컨텐츠영역은 어떻게 나눌 것이고 푸터는 어떻게 할 것이고 생각합니다.
자 그럼 애플 메인홈페이지를 보면서 생각을 해보도록 하겠습니다.
전체적인 스타일을 먼저 봐줍니다.
크게 보면 메뉴들이 있는 헤더, 이미지와 텍스트가 들어가있는 메인, 모든 메뉴리스트와 사이트에 대한 정보가 적혀있는 푸터가 있습니다.
먼저 헤더를 보겠습니다.
width가 꽉차있고 배경색이 들어가 있고 리스트가 어느정도 간격을 두고 있습니다.
로고가 있고 메뉴가 있고 검색, 장바구니가 있습니다.
로고부터 장바구니까지 모두 클릭이 가능한 것들입니다.
저 헤더를 봤을 때 이정도까지만 생각이 든다면 이미 다 만드신 겁니다. 이제 저 생각들을 써내려가면 되겠습니다.
<header> <ul> <li><a href=""><img src="/images/apple-logo.svg" alt="로고"></a></li> <li><a href="">Mac</a></li> <li><a href="">iPad</a></li> <li><a href="">iPhone</a></li> <li><a href="">Watch</a></li> <li><a href="">Music</a></li> <li><a href="">고객지원</a></li> <li><a href=""><img src="/images/search.svg" alt="검색"></a></li> <li><a href=""><img src="/images/mybag.svg" alt="장바구니"></a></li> </ul> </header>
svg 파일은 원래 svg태그를 사용해서 만들지만 여기서는 그냥 이미지 용도로만 사용하도록 하겠습니다.
헤더영역은 코드를 이렇게 작성해주겠습니다.
이미지는 인터넷에서 그럴싸한 것들을 가져와서 저장해주시면 되겠습니다.
보통은 div로 감싸지만 이제는 header라는 태그를 사용해서 이 영역이 header영역이라는 것을 알려줄 수 있게되었습니다.
header태그에는 아무런 속성이 없습니다. 그냥 header라는 이름만 가진 태그입니다.
메뉴는 보통 ul, li 를 사용합니다. (리스트 태그)
(리스트 태그는 두가지가 있습니다. ol이 li를 감싸고 있고 각 list에 순서가 붙습니다. ul이 li를 감싸고 있는 리스트 태그는 위와같이 순서가 나와있지 않고 점으로 표시됩니다.)
html에서 할 일은 끝이 났습니다.
scss를 만들어서 작성을 해보도록 하겠습니다. 저는 파일명을 style.scss로 만들었습니다. --watch를 사용해서 저장이 될 때마다 자동으로 컴파일 되도록 해줍니다.
<link rel="stylesheet" href="/style.css">
html파일 <head></head> 안에 link태그를 사용해서 경로에 맞게 css파일을 연결시켜줍니다.
자 그럼 이제 본격적으로 css를 작성해보도록 하겠습니다.
위에서 이야기 했듯이
1. 가로로 100%를 채우고 있고
2. 배경색이 있고
3. 리스트가 가로, 세로 가운데 있고
4. 텍스트에 색이 있고
5. 각 li가 일정한 간격을 두고 떨어져잇고
6. 페이지를 스크롤하면 header가 위에 붙어있습니다.
저걸 각 속성으로 적으면,
1. 가로로 100%는 width,
2. 배경색은 background,
3. 리스트가 가로, 세로 가운데는 display, align-items, justify-content,
4. 텍스트에 색은 color,
5. li가 일정한 간격을 두고 떨어져있는건 margin,
6. header가 상단에 붙어있는건, position, top 입니다.
이걸 css에 적어주면 됩니다.
* {
margin : 0;
padding: 0;
font-size: 10px;
list-style: none;
color: #000;
text-decoration: none;
}먼저 초기화 작업을 해주고..
* font-size: 10px;은 반응형 웹사이트 작업을 위해서 이렇게 적어두었습니다. 반응협 웹사이트는 후에 있을 강의에서 자세히 적도록 하겠습니다. 초기화작업에서 10px을 적어준 후 이후에 적는 모든 단위는 rem으로 적도록 합니다. n rem x 10(초기화에서 적은 font-size) 으로 계산되어 px이 정해지게 됩니다. ex) .1rem = 10px, 5rem = 50px
아래와같이 작성을 해줍니다.
header {
display: block;
background: #353535;
width: 100%;
position: fixed;
top: 0;
ul {
display: flex;
align-items: center;
justify-content: center;
li {
margin: .5rem 2.5rem;
a {
color: #cbcbcb;
font-size: 1.8rem;
}
}
}
}위에서 말했듯 header에는 속성이 없기에 display: block;을 주겠습니다.
그리고 배경색인 background를 주고 width: 100%;로 꽉 채워줍니다.
header자체가 최상단에 고정으로 붙어있기 때문에 position: fixed;를 주고 top: 0;을 주어 고정시켜 놓도록 합니다.
(position에 대한 설명은 후에 적는 강의에서 작성하도록 하겠습니다.)
다음 ul태그에 css 속성을 주도록 하겠습니다.
display: flex; align-items: center; justify-content: center; 는 자식 태그를 가로, 세로 중간에 놓겠다는 이야기가 됩니다.
(단, 그 위치는 부모요소의 width 기준입니다.)
만약에 지금 header의 크기가 50%뿐이었다면 그 범위 내에서 가로세로 가운데로 움직이게 됩니다.
이제 각 li를 일정간격으로 벌려주겠습니다.
li에 margin을 주어 벌리도록 하겠습니다. margin: 1rem; 이렇게 적으면 위, 오른쪽, 아래, 왼쪽 모두 10px씩 밀어내겠다는 이야기가 됩니다.
margin: 1rem 2rem 3rem 4rem; 이렇게 적으면 위, 오른쪽, 아래, 왼쪽(시계방향) 순으로 적용이됩니다.
margin: .5rem 2.5rem; 은 왼쪽의 숫자는 위와 아래가 동일하고 오른쪽의 숫자는 2.5rem입니다.
즉 위 아래는 .5rem, 오른쪽 왼쪽은 2.5rem 을 주게 됩니다.
마지막으로 링크부분입니다. 링크 태그는 <a href="원하는 링크"></a>를 사용하게 됩니다.
초기화를 하지않고 a태그를 사용하면 상당히 뭔가 촌스러운 느낌의 컬러가 나오고 글씨 아래에 선이 생깁니다.
그걸 방지하기 위해서 초기화 작업에서 color와 text-decoration을 적어준것입니다.
텍스트의 색이 하얀색보다는 탁하니까 색을 대충 맞춰주고 font-size를 이용해서 글씨 크기를 키워줍니다.
그 후 이미지의 크기를 잘 맞추어서 크기를 정해주면 header 영역이 완성되었습니다.
다음 강의는 메인 영역을 알아보도록 하겠습니다. 꾸벅
*****
제가 쓴 저 방법 외에도 수많은 방법들이 존재합니다. 제가 쓴 코드가 답이 아닙니다.
html과 css에는 정답이 없습니다.
태그를 어떻게 사용하는가, 어떤 속성을 어떻게 사용하는가는 작성하는 사람의 마음입니다.
다만 어떤상황에서 이런 태그를 쓰는게 적당하겠다라는 생각은 가지고 있으셔야합니다.
그렇다고 무조건 마음대로 작성해서는 안됩니다.
내가 작성하는 코드를 전혀 모르는 사람이 봤을 때 그 사람이 이 코드를 보고 아 이래서 이렇게 썼구나.. 라는 생각을 하고 이해 할 수 있고 처음 본 코드도 수정이 가능하고 유지보수가 편하도록 코드를 작성해야합니다.
짧고 간결하면서 필요한 코드만 사용해서 작성을 하고 후에 유지보수가 편한 클린 코드를 작성을 할 수 있도록 꾸준히 연습을 하는 것이 중요합니다.
그러면서 본인 스타일을 찾아가시면 될 것 같습니다.
네모
2020.10.11CSS에서 중첩선언이 작동했었나요..?
MoPE
2020.10.12header {} 안에 다른 태그의 css를 넣은걸 말씀하시는 거면 scss를 사용해서 그렇습니다.
네모
2020.10.12네, 게시글 제목은 CSS로 되어있는데 Sass인지 Less인지 모를 전처리 문법을 사용하시기에..
MoPE
2020.10.12아 네. 주의해야겠습니다.. 감사함당