Fixed webslite week1
웹사이트 구조 파악
-웹사이트 구조는 크게 3단과 4단이 있는데, 그 중 어떤 것으로 할지 결정
-구조 상 필요한 단이 있다면 추가해서 총 몇단으로 구성할 지 결정
-box model을 그려보고 각 단을 어떤 태그를 사용할지 결정
-html을 어떤 순서로 마크업 할 것인지 넘버링
-정한 순서대로 마크업
가장 중요한 단계
전체적인 구조를 짜기 시작할때 필요한 것
body 전체에서 기준이 되는 폰트크기, 스타일, 굵기, 색과 배경색을 지정해준다. body 전체에 미리 선언을 해주면 그것을 기준으로 rem 단위를 쓸 수 있다.
각 구간의 영역이 잘 구분되도록 배경색을 깔아준다.
레이아웃을 중앙으로 배치해야 한다면 정렬에 관한 속성을 사용하여 가운데 정렬을 해준다.
정렬 속성이 무엇이 있었을까?
정렬에 관한 속성은 거의 정해져 있으니 암기해두고 반사적으로 나오도록 해두자.
position, float, flex, grid, margin or padding
여기서는 flex를 사용하거나{margin:0, auto;}가 괜찮아 보인다.
해당 수업에서는 flex를 사용해보았다. (왜? [이유 생각해보거나 질문])
내가 항상 헷갈리는 것 중 하나인데, flex는 정렬 하고 싶은 요소의 부모 요소에 적용해줘야 한다.
flex 자체가 자신의 자식 요소를 배치하는 속성이기 때문이다.
header부터 footer까지 가운데 정렬이므로 container에 flex를 주는 것이 맞다.1
2
3
4
5.container {
display: flex;
flex-flow: column nowrap;
align-items: center;
}+++
(여기서 의문점)
align-content를 사용했을 때와 align-items를 사용했을 때 다른 결과가 나왔다. content와 items의 개념이 헷갈리는 것 같으니 다시 정비하고 가도록 하자.
+++
여기서 알아둬야할 중요한 점이 있다.
우선, flex-flow는 flex-direction과 flex-wrap의 단축속성이다.
기본값이 row nowrap 인데, 내가 기본값이 필요하더라도 해당 속성을 기억하기 위해 생략하지 말고 모두 적어주도록 하자.
또 다른 점은 flex-direction이다. 여기서는 column을 사용했는데 column이 필요한 경우더라도 row로 설정하고 column처럼 보이도록 조작해주자.
column인 것보다 row일때 활용할 수 있는 점이 더 많다. 의식적으로 row를 사용하도록 한다.
(row가 왜 더 활용점이 많은지는 차후 추가하도록 하겠다.)
+++
.footer-bg는 width가 100% 여야하고 자식인 .footer는 width가 940px이고 가운데 정렬 해야한다.
.footer-bg에 flex를 위와 같은 방법으로 한번 더 해준다.
처음 코드를 짤때 이 부분에서 꽤 많이 고민했었는데 코드를 추가하는 것을 너무 두려워 하지말자. 좋은 생각이 안난다면 일단 내가 아는 방법으로 처리하고 넘어가는 것도 방법이다.
html, css는 정답이 없음을 항상 생각하자.
+++
또, visual과 main 부분만 height를 auto로 주지 않고 직접 값을 주었는데, 어떤 생각으로 그런것일까?
이 부분도 꽤 고민했던 부분이다.
처음 시작할때 전체 레이아웃의 높이가 낮아서 보기 불편했었는데 어떻게, 어떤 요소의 높이를 줄지 정하지 못했었다.
수업때 두가지 이유로 높이를 고정했었다. 하나는 visual 부분의 높이를 120px로 고정했었는데, 왜냐하면 visual 부분은 앞으로 유지보수를 하더라도 더 늘어나지 않고 계속 높이를 유지할 것이라고 보아서 고정했다.
다른 하나는 min-height를 설정해주었다. 왜냐하면, 혹시 main의 컨텐츠를 대거 삭제하더라도 레이아웃의 높이를 어느정도 유지하기 위해서 min-height를 설정했다.
여기서 내가 알아야 할 부분은 어느 부분을 고정된 높이로 갖게 할 것인지, 또 레이아웃 모양을 유지하기 위해서 어떤 부분이 최소 높이를 가져야할지를 생각해보고 그대로 적용하자.
추가로, main 안의 그룹들의 배치는 flex를 사용해서 배치해 보았다. 간단한 방법이라 설명은 생략하지만 flex이외에 다양한 방법으로 시도해보자.가장 먼저 웹사이트 로고를 만들기로 결정. (왜? 웹사이트를 대표하는 로고이므로)
웹사이트 로고 모양은 이미지로 준비했다. (왜? 만약 폰트를 변경해서 사용하려면 이미지와 폰트 둘다 사용해야 되기 때문에 번거롭다.)1
2
3<header>
<img src="./images.logo.png" alt="web cafe logo" />
</header>이미지의 alt는 이미지가 제공되지 않는 환경에서 어떤 이미지인지 알 수 있게 하는 도구이다. 필수적으로 사용해야하니 까먹지 말자.
이미지를 삽입했으니 위치를 정해야한다. 어떤 방법을 사용해서 위치를 잡을까?
위치를 잡는 방법은 가지가 있다. 1. position을 사용하는 방법 2. float를 사용하는 방법 3. grid를 사용하는 방법 4. margin 혹은 padding을 사용하는 방법.
로고의 위치를 정해야 하는 상황에서 float, flex, grid의 방법은 적절하지 않아 보인다. 이 방법들은 유용하지만 사과를 깎는데 회칼을 쓰는 격이된다. 그러면 남는 방법은 position과 margin 혹은 padding이다.
두가지 방법 모두 괜찮아 보인다. 이번 수업에서는 position 방법을 선택하겠다. (왜? [이유 생각해보거나 질문])position에도 여러가지 방법이 있는데 만약 relative로 설정하면 로고 주변요소를 삭제하거나 추가한다면 로고의 위치도 무너지게 되므로 적절하지 않아 보인다. 그렇다면 absolute를 사용하자.
1
2
3
4
5
6.logo {
position: absolute;
top: 45px;
left: 65px;
}absoulte를 부여하고 적절한 위치가 되도록 top,left 방향으로 이동한다. absolute 특성상 offset parent를 기준으로 위치를 조정한다. 여기서 offset parent는 쉽게 말해 가까운 부모 요소중 static이 아닌 position 값을 가진 요소를 기준으로 한다.
가까운 부모 요소에 없다면 계속 상위 요소로 올라가면서 position 속성을 찾고 찾을 수 없다면 html을 기준으로 배치된다. 이 점을 잊지말고 기준으로 하고 싶은 부모 요소에 position 값을 주자.
이 때, 부모 요소에 position 값을 줄때도 주의해야한다. 만약 부모에 position 값으로 absolute, fixed, sticky가 온다면 부모 요소가 원래 위치를 유지하지 못하는 상황이 올 수 있다. 따라서{position:relative;}를 추가해주자.+++
내가 놓치는 부분 = 사용자가 늘 사용해와서 으레 그렇게 생각하는 것들
예를 들어, 로고를 누르면 홈으로 이동하는 것.
여기서도 생각하기가 어려웠다. 로고를 눌러 홈으로 이동하려면 태그로 감싸 하이퍼링크를 줘야만 한다.
로고의 위치까지 지정하면 로고는 거의 완성했다. 자세한 부분은 다른 부분을 완성하면서 채워나가도록 하자.
다음은 제일 위에 있는 멤버링크를 만들자. 홈, 로그인, 회원가입… (왜? 가장 위에 있기도 하고 사람의 눈은 Z방향으로 이동하므로 선택했다.)
멤버링크는 어떤 태그를 사용할까? ul 태그로 마크업 하자. (왜? 스크린 리더가 ul 태그를 가장 먼저 인식하고 순서대로 읽기 때문에 ul을 선택했다. 언제 Ul을 선택하는지 잘 알아두자.)
1
2
3
4
5
6
7<ul>
<li>홈</li>
<li>로그인</li>
<li>회원가입</li>
<li>사이트맵</li>
<li>english</li>
</ul>
콜론 기호와 여백은 고려하지 않고 기본형만 만들어 보았다. 이제 뭘 해야할까?
멤버링크는 사용자가 마우스를 올리면 커서가 바뀌면서 클릭할 수 있는 컨텐츠임을 알도록 해줘야한다.
그런 역할을 할 수 있는 태그가 무엇이 있을까? 바로 버튼태그와 앵커태그가 있다. 이 경우, 사용자가 누르면 페이지 이동도 이뤄져야 하기 때문에 <a>태그가 적절해보인다.
<!--hexoPostRenderEscape:<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">ul</span>></span><br><span class="line"> <li><a href="#">홈</a></li></span><br><span class="line"> <li><a href="#">로그인</a></li></span><br><span class="line"> <li><a href="#">회원가입</a></li></span><br><span class="line"> <li><a href="#">사이트맵</a></li></span><br><span class="line"> <li><a href="#">english</a></li></span><br><span class="line"> </ul></span><br><span class="line"></span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
이제, 1.위,아래에 적절한 여백과 단어 사이 여백, 2. 콜론 기호, 3. ul태그로 인한 리스트의 점 삭제, 4. <a>가 기본으로 가지는 글자색, 밑줄 삭제, 5. 가로 배열, 오른쪽 정렬을 해야된다.
먼저, ul태그로 인해 생성된 리스트 점은 간단하게 해결 가능하다. ```{list-style: none;}```
다음으로, <a>태그의 스타일 초기화도 간단하다. ```a{text-decoration: none;//밑줄삭제//color:inherit;}```
글자색은 대부분 상속받으나 a 태그의 글자색은 기본 파랑,보라색을 갖는다. 파랑, 보라를 사용하지 않고 body에서 설정한 글자색을 상속받는다고 알린다.
콜론 기호는 span태그로 처리한다.
<!--hexoPostRenderEscape:<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><<span class="selector-tag">ul</span>></span><br><span class="line"> <li><a href="#">홈</a></li></span><br><span class="line"> <li><span>:</span><a href="#">로그인</a></li></span><br><span class="line"> <li><span>:</span><a href="#">회원가입</a></li></span><br><span class="line"> <li><span>:</span><a href="#">사이트맵</a></li></span><br><span class="line"> <li><span>:</span><a href="#">english</a></li></span><br><span class="line"></ul> </span><br><span class="line"></span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
여기서 내가 늘 놓치는 생각이 있다. <접근성>을 반드시 고려하자. span으로 콜론표시를 넣었는데 스크린 리더로 읽었을떄 콜론은 필요한 정보가 아니다. 오히려 성가신 정보이다.
그렇다면 <span aria-hidde="true">를 꼭 넣어주자.
개발에 급급하다 보니 놓치는 것들이 있다. 1. 검색 최적화(SEO) 2. 접근성 3. 사용자의 경험상 늘 그래왔던 것(로고 누르면 홈으로 이동) 늘 생각하며 개발하자.
자, 이제 여백과 정렬 문제만 남았다. ul태그는 여백에 대한 문제가 있다. 먼저, 정렬을 해두고 설명해보도록 하자.
일단, 가로로 정렬을 하는 방법은 무엇이 있을까? 배웠던 것을 떠올려보자.
1.float 2.flex 3.grid 4.display: inline-block
float: right;는 오른쪽부터 쌓는 개념으로 여기서 사용하면 안된다. grid는 사과에 회칼이므로 flex 선택하겠다.
list들을 가로 정렬할 것이므로 ul에 flex 써준다. flex 사용법은 너무나 간단하므로 다시 적지는 않겠다.
좀 더 생각할 거리가 있는 inline-block 방법으로 해보도록 하자.
가로 정렬할 것은 list니까 li 부분에 display: inline-block; 추가해주고 ul에 해당하는 부분에 text-align: right;를 추가.
<img width="243" alt="스크린샷 2020-07-18 오전 1 14 45" src="https://user-images.githubusercontent.com/61978339/87808122-2cc45200-c894-11ea-9838-ba1c70a2096a.png">
그런데, 위의 그림을 자세히 보면 콜론과 단어 사이의 미세한 틈이 발견된다.
나는 자간 공백이나 padding을 준적이 없는데 이 공백은 어디서 생긴것일까?
원인은 바로 inline-block 속성 때문이다. inline-block은 요소를 가로로 배치하면서 요소 사이에 공백을 만들어 낸다.
이 공백을 활용할수도 있지만 제거해서 사용할 수 도 있다.<
어떤 방법으로 제거해야할까?
첫번째 방법은, 음수 마진을 사용하는 것이다.
*
음수 마진(Negative Margin)은 개념이 약간 까다롭다. 음수 마진에 대해서 알아보도록 하자.
음수 마진을 사용하게 되면 양수 마진을 주었을 때와 약간 다른 방식으로 움직인다.
top, left 방향으로 음수 마진을 적용하면 우리의 상식대로 위쪽, 왼쪽으로 이동하게 된다.
그런데, right, bottom 방향으로 음수 마진으로 적용하면 그 방향으로 이동하는게 아니라 옆에 있는 요소를 내가 준 px만큼 끌어당겨 오게 된다.
글로만 이해하기 힘들다면 그림을 참고하자.
<img width="500" alt="스크린샷 2020-07-18 오전 1 27 48" src="https://user-images.githubusercontent.com/61978339/87809191-ed970080-c895-11ea-9296-59fce4e454ed.png">
추가적인 정보와 예시는 https://webclub.tistory.com/541 이 페이지에 자세하게 나와있다. 참고
*
음수 마진을 사용하는 방법은 여백의 px만큼 margin-right:-px; 음수 마진을 부여해 옆의 요소를 끌어당겨오면 해결된다.
두번째 방법은, 글자 크기를 0으로 만드는 방법이 있다.
상위 요소(ul)에서 글자 크기를 0으로 만든 후 자식 요소(li)에서 원래대로 되돌려 놓는 방법이다.
마지막으로 여백 문제만 남았다.
일단, 글자 내부 여백을 지정해보자.
<!--hexoPostRenderEscape:<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.member</span> <span class="selector-tag">a</span> {</span><br><span class="line"> text-transform: uppercase; //대문자로 전부 변경</span><br><span class="line"> padding: 2px 8px 2px 3px; //내부 여백 설정[이러한 숫자들은 정해진 숫자일까? 아니면 의미가 있는 숫자일까?]</span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
이제 list들의 바깥쪽 위, 아래, 오른쪽 여백만 주면 된다.
위, 아래, 오른쪽 모두 8px만큼 여백을 가지고 싶다.
그런데, 방금 내부 여백을 지정할때 padding-right을 8px만큼 줬다.
그래서 marign-right : -8px; 로 음수 마진으로 되돌려 놓는다. [복습 중, 이 부분이 이해가 안된다. 오른쪽 여백을 8px 주고 싶다면 패딩을 주지 않거나 패딩을 주고 border-box로 처리한후 marign-right으로 여백을 주는 방법이 있을텐데 여기서 음수 마진을 사용한 이유를 알 수 없다. 심지어 여기서 음수 마진을 사용하면 여백을 주지 않고 8px만큼 끌어들여와 원상복구 되는 것이 아닌가? 다시 생각해보고 ]
여기서 많이 놓치는 부분!!
ul 태그는 태생적으로 왼쪽 padding을 가지고 태어난다. 그래서 의도치않게 ul을 사용할때마다 padding-left를 갖게되고 레이아웃을 짤때 방해가 된다.
그러므로 padding-left:0;을 꼭 추가해주고 시작하자. 네비게이션바 html에 대해, 묻고답하기, 자료실..
네비게이션바는 어떤 태그를 사용할까? 먼저 그림으로 구조를 그려보도록 한다.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68<nav>
<h2>
<ul>
<li>
html에 대해
<ul>
<li> html 소개</li>
<li>레퍼런스 소개</li>
<li>활용예제</li>
</ul>
</li>
</ul>
</nav>
```
'html에 대해'에 해당하는 부분만 작성해 보았다. 구조를 설명해보자면 nav > h2 > ul > li{6} > ul > li 이런식으로 구성된다.
큰 구조만 살펴보면 nav 안에 ul 태그로 리스트들을 만들어 큰 목차를 설계하고 각각의 li 안에 또 ul 태그로 리스트를 만들어 세부 설명을 작성할 예정이다.
참고로 h2는 스크린 리더가 어떤 목록인지 다 들어보지 않아도 대충 파악할 수 있도록 적어준 것이다.
일단 h2로 작성하고 브라우저에는 보이지 않도록 해주는 작업이 필요하다.
또, 큰 제목인 'html에 대해' 부분은 유저에게 클릭할 수 있는 것임을 알리도록, 또 접근성에도 효과적인 버튼이나 앵커 태그를 사용하는 것이 좋아 보인다. 여기서는 버튼을 사용했다.
(왜 앵커가 아닌 버튼을 사용했을까?)
네비게이션바를 만들때 해야할 일을 생각해보자.
1. 적절한 태그와 클래스멍을 사용하여 내용 마크업하기
2. 메뉴 전체 영역 세부 요소 추가하기
2-1) background-color : 그라디언트 처리
2-2) ul태그로 인해 생기는 마진과 패딩 초기화, 리스트 앞의 점 삭제
2-3) 메뉴 맨 윗줄만 진한 선 추가, 아래쪽 모서리 모두 부드럽게 조절
3. 메뉴 제목들 세부 요소 추가
3-1) 메뉴 제목들 가로로 정렬
4. 제목 한개에 해당하는 세부 요소 추가
4-1) 배경 색상은 투명하게
4-2) 글자색, 글자 크기, 글자 굵기, 글자 음영 조절
4-3) 버튼 사이의 구분선 추가
4-4) 커서 모양을 클릭할 수 있는 모양으로 변경
4-5)
4-6) 버튼에 마우스를 올리면 버튼 밑에 제목 글자 너비만큼 줄 생기는 것 추가
5. 서브 메뉴들 설정
5-1) 서브 메뉴 ul태그 속성들 초기화-마진,패딩,리스트 스타일
5-2) 서브 메뉴 리스트들 가로로 정렬
5-3) 서브 메뉴들 줄바꿈 안되고 모두 한줄로 나오도록 설정
5-4) 서브 메뉴 아이콘 삽입
5-5) 서브 메뉴 시작 지점 설정
<img width="902" alt="스크린샷 2020-07-19 오전 8 44 28" src="https://user-images.githubusercontent.com/61978339/87863923-29b48900-c99c-11ea-92b5-8b0b7646e93c.png">
1. 적절한 태그와 클래스명을 사용하여 내용 마크업하기 (첫번째 버튼만 예시로)
```html
<nav>
<h2>메인 메뉴</h2>
<ul class="메뉴 전체영역">
<li class="메뉴 제목들">
<button class="메뉴 제목한개">HTML에 대해</button>
<ul class="서브메뉴들">
<li><a href="#">html5 소개</a></li>
<li><a href="#">레퍼런스 소개</a></li>
<li><a href="#">활용 예제</a></li>
</ul>
</li>
</ul>
</nav>이해하기 쉬운 클래스명을 붙여 마크업. 큰 제목에 해당하는 부분은 버튼으로 제목의 내부 리스트는 a태그로 마크업 하였다.
메뉴 전체 영역 세부 요소 추가하기
2-1) background-color : 그라디언트 처리
https://www.colorzilla.com/gradient-editor/해당 사이트 이용하여 손쉽게 그라디언트 효과 삽입
2-2) ul태그로 인해 생기는 마진과 패딩 초기화, 리스트 앞의 점 삭제
1
2
3
4
5.menu {
margin: 0 0 35px;(ul태그는 왼쪽 오른쪽 마진을 가진다.)//위쪽은 왜 0이고 왜 아래쪽만 35px을 줬는가?
padding-left: 0;(ul태그는 왼쪽 패딩을 가진다.)
list-style: none;
}2-3) 메뉴 맨 윗줄만 진한 선 추가, 아래쪽 모서리 모두 부드럽게 조절
1
2
3
4.menu {
border-top : 2px solid #000;
border-radius : 0 0 5px 5px;(왼쪽 위부터 시계방향순)
}메뉴 제목들 세부 요소 추가
3-1) 메뉴 제목들 가로로 정렬1
2
3.menu-item {
float: left;
}float: left; 한 후, 만약 유지보수 작업중에 메뉴 항목을 추가할 경우가 생긴다면 float 효과를 해지하지 않아 새로 추가한 항목이 옆으로 쌓이는게 아니라 처음 메뉴항목 아래로 깔리게 된다.
따라서 clearfix로 float를 해제해줘야 한다.제목 한개에 해당하는 세부 요소 추가
4-1) 배경 색상은 투명하게1
2
3.btn-menu {
background-color: transparent;(배경색이 비치도록)
}4-2) 글자색, 글자 크기, 글자 굵기, 글자 음영 조절
1
2
3
4
5.btn-menu {
color: #fff;
font-size: 1.6rem;
font-weight: 700;
}4-3) 버튼 사이의 구분선 추가
1
2
3.btn-menu {
border-left : 2px solid #fff;(왼쪽만 구분선 설정)
}4-4) 커서 모양을 클릭할 수 있는 모양으로 변경
1
2
3.btn-menu {
cursor: pointer;
}4-5) 버튼에 마우스를 올리면 버튼 밑에 제목 글자 너비만큼 줄 생기는 것 추가
1
2
3
4
5
6.btn-menu::after {
content:"";
display: block;(가상요소 선택자는 inline 성질의 content를 만들어내기 때문에 block으로 바꿔주었다.)
background-color: #000;
height: 2px;
}선을 만들어 낸것이 아니라 높이가 2px인 상자를 만들어 선처럼 보이도록 해주었다.
서브 메뉴들 설정
5-1) 서브 메뉴 ul태그 속성들 초기화-마진,패딩,리스트 스타일
위에서 했던 방법과 마찬가지로 margin=0, padding-left=0, list-style=none으로 설정해준다.5-2) 서브 메뉴 리스트들 정렬
(질문하고 채워넣을 부분)
5-3) 서브 메뉴들 줄바꿈 안되고 모두 한줄로 나오도록 설정
(질문하고 채워넣을 부분)
5-4) 서브 메뉴 아이콘 삽입1
2
3
4
5
6
7.sub-menu::before {
content:"/f192"
font-family: fontello;
display: inline-block;(인라인블록으로 설정한 이유?)
width: 1em;
margin-right: .2em;
margin-left: .2em;5-5) 서브 메뉴 시작 지점 설정
1
2
3
4
5
6.sub-menu1,2,3 {
left: 0;
}
.sub-menu4,5,6 {
right: 0;
}left=0, right=0 둘다 주면 양쪽정렬