HTML5 & CSS3 : 메인 화면 만들어보기

Study/HTML5 & CSS3

2022.10.17.

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 22



Review





 

  • UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 22

 

<웹 페이지 상위 메뉴 만들기>

 

 

홈페이지의 상위 메뉴를 만드는 예제를 실행했다.

 

우선 전체를 감싸는 head div를 만들고, 하위에 logo div,

그리고 gnb div 하위에 ul과 li 태그를 만들었다.

 

 

 

ul 태그에 list-style을 none으로 설정해 옆에 점을 없애고,

a 태그에서 text-decoration도 none으로 설정해 밑줄이 사라졌다.

 

head 태그에서 max-width를 1200px로 설정해 화면이 1200px보다 커지면 더이상 

head의 background 크기가 커지지 않도록 설정했다.

 

a:hover  태그를 주지 않아도 a 태그 자체가 링크를 만들어 마우스를 올리면

마우스 커서가 손 모양으로 변한다.

 

width를 1200px로 두었기 때문에, margin: 0 auto는 1200px의 중앙을 뜻한다.

 

 

 

아까 만들었던 logo div의 하위에 logo wrap이라는 div를 하나 더 만들었다.

 

그러고 나서 logo style에서 width 값을 20%로 설정, float은 left로 하여 왼쪽에 위치시켰다.

background도 설정해주었다.

 

logo wrap style에서는 문구를 가운데 정렬시키고, line-height를 head의 높이와 같게 설정해서

수직 정렬까지 시켰다.

 

gnb style에서는 width 값을 80%로 지정하고, float을 right로 하여 logo div의 오른쪽에 오도록

설정했다. background도 설정해주었다.

 

그러면 위와 같이 나타난다.

 

 

 

.gnb ul li 라는 말은 gnb div 하위에 ul 태그, 그 아래에 li 태그를 지정한다는 말이다.

여기에서 width 값을 20%로 지정했는데, 그 말은 gnb width를 80%로 지정한 것에서

80%의 20%를 사용하겠다는 말이다.

float은 left로 해서 gnb div 안에서 왼쪽에 위치시키도록 했다.

 

.gnb ul li a 라는 말은 gnb div 하위에 ul 태그, 하위에 li 태그 안에 a 태그를 지정한다는 말이다.

하여튼 .gnb ul li a 에서 display를 block으로 설정하고, width 값은 아까 설정한 .gnb ul li 에서

width 값을 20%로 설정했었는데, 20%의 100%를 사용하겠다는 말이다.

그 외에 background, text-align, line-height를 설정했다.

 

여기서 a 요소의 display 속성을 block으로 변경하면 a 요소의 너비가 부모 요소인 li 요소의

너비까지 확장이 된다.

이렇게 하면 메뉴의 텍스트 뿐만 아니라 주변 박스 영역까지 모두 클릭이 가능해지므로 메뉴를

이용하기가 편리해진다.

만약 block으로 변경하지 않으면 a 요소는 inline 요소이고, inline 요소는 안의 내용만큼만

너비를 차지하므로 클릭 가능한 영역도 a 요소 안의 텍스트로 좁아진다.

 

정말 중요하지만 헷갈린다 ㅎㅎㅎㅎ 어쩔 수 없다

 

.gnb ul li a:hover 이라는 말은 gnb div 하위에 ul 태그, 하위에 li 태그 안에 a:hover를

설정한다는 뜻이다. a:hover는 마우스를 올렸을 때와 올리지 않았을 때 차이를 두는 태그이다.

여기서 background와 color 태그를 작성한 것은 마우스를 올렸을 때

background 색을 초록색에서 파란색으로 변하도록 반응형을 설정하는 것이고,

font color는 검정색에서 흰색으로 변하도록 만드는 것이다.

 

 

마우스 올리기 전

 

마우스 올린 후

li 태그에다가 a: hover를 background를 주어

마우스를 올렸을 때 background가 파란색으로 변하도록 했다.

 

 

마우스 올린 후 font color 변화

이번에는 a:hover에 color를 줘서 마우스를 올렸을 때 font color가 흰색으로 바뀌도록 했다.

 

 


 

 

<웹 페이지 메인 화면 만들어보기 예제>

 

예제 완성

 

웹 사이트의 메뉴를 만드는 예제를 실행했다.

우선 전체를 감싸는 wrap 이라는 div를 만들고

h1 태그를 넣어 제목을 만들었다.

 

menu를 감싸는 menu div를 만들고, 하위에 ul 태그와 li 태그를 작성했다.

li 태그에는 menu를 누르면 링크로 접속되도록 하기 위해 a href 태그도 함께 작성해주어야 한다.

메뉴에 들어갈 문구도 li 태그에 함께 적어준다.

 

이제 스타일 태그에서 우선 모두 margin, padding 값을 0으로 설정해둔 뒤,

ul의 list-style은 none으로 설정해 리스트에 점이 나오지 않도록 한다.

a style에서도 text-decoration을 none으로 설정해 문구 밑에 밑줄이 나오지 않도록 하였고,

font color는 흰색으로 설정했다.

 

wrap div는 max-width를 1000px로 설정해 그 이상 커지지 않도록 했다.

width는 반응형으로 하기 위해 퍼센트로 지정했고 1000px 모두 사용하기 위해 100%로 설정했다.

margin: 0 auto로 하여 가운데 정렬시키고 height 값도 설정했다.

 

menu div는 width를 1000px의 100% 모두를 사용하고, height, background를 설정했다.

background는 url로 불러오기하고 밑에 넣을 background는 no-repeat으로

설정해 반복되지 않게 했고, 메뉴란에 넣을 background는 repeat-x로 하여 x축,

즉, 가로로만 반복되도록 했다.

 

여기서 중요한 점은 menu div의 background가 가로로 전체로 다 채워지려면 width를 px이

아니라 %로 지정해야 한다는 것이다. px로 지정하게 되면 딱 1000px 만큼만 채워지게 되기 때문에

주의해야 한다.

menu > ul 에서는 width를 1000px 이라고 지정한 뒤, margin: 0 auto로 지정해주면 

우리가 원하는 것처럼 배경의 가로가 채워지게 된다.

 

나는 너무 헷갈려서 공식처럼 외워버렸다. 상위가 %, 하위가 px 이라고...

가로로 전체가 채워지지 않으면 약간 모바일 화면처럼 보이기 때문에 웹 페이지는 꽉 차게 만드는

것이 보기에 훨씬 좋은 것 같다.

 

menu > ul > li는 gnb 하위에 ul, 또 그 하위에 li 태그를 지정한다는 말이다.

여기선 float: left로 왼쪽 정렬시켜줬다.

 

menu > ul > li > a, 여기가 가장 중요하다.

여기서는 display를 block으로 설정해 메뉴 안의 문구가 넓게 설정되도록 했고,

background, height, padding도 설정했다.

height 값과 line-height 값을 같게 하면 수직 정렬이 된다.

text-align도 center로 설정해 수평 정렬도 해주었다.

 

menu > ul > li:first-child a 는 li 태그 중 가장 첫번째 li 태그 안에 있는 a 태그를 부르는 말이다.

첫번째 a 태그만 background가 빨간색으로 나타나도록 설정한 것이다.

 

순서대로 천천히 확인하며 예제를 실행했는데, 기록할 때는 굉장히 헷갈렸다.

아직 이론이 헷갈리기도 하고 머리속에 완전히 정리가 안된 느낌이다 ㅠ_ㅠ

어째저째 예제를 완성하기는 했다.

 

 


 

<웹 페이지에 콘텐츠 내용 넣어주기 예제>

 

- margin 이론 

margin: 10px → 모든 네 면의 여백을 설정한다.

margin: 0px 10px → 위/아래 왼쪽/오른쪽 순으로 여백이 들어간다.

margin: 0px 10px 20px → 위 왼쪽/오른쪽 아래 순으로 여백이 들어간다.

margin : 0px 10px 20px 30px  → 위 오른쪽 아래 왼쪽 순으로 여백이 들어간다.

 

margin: 0 auto가 먹히지 않을 때는 width 값이 설정되어 있지 않을 확률이 매우 크다.

그리고 margin: 0 auto는 inline 속성이 아닌 block 요소에서만 가능하다.

 

 

 

 

웹 사이트 만드는 것이 이렇게 정성이 들어가는 작업인 줄 모르고 있었다.

어플이나 웹으로 사이트를 이용할 때마다 퍼블리셔 분들께 리스펙한다고 말하고 싶다...

 

- HTML

: 방금 전 만들었던 코드 그대로에서 menu div 아래에 contents div를 새로 만든다.

말 그대로 내용을 넣을 div이다.

contents div 하위에 왼쪽에 넣을 내용과 오른쪽에 넣을 내용을 나누기 위해 

left, right로 나눈 다음, 각각의 하위에 left_wrap, right_wrap으로 감싸는 div를 만들어준다.

 

left_wrap에 들어갈 내용을 적어줄 텐데,

제목 태그는 크기별로 h1, h2 태그를 만들고, 콘텐츠는 p 태그를 이용한다.

'More read' 스위치(?)처럼 보이는 것을 만들기 위해서는 a 태그를 사용한다.

 

right_wrap에는 제목 태그인 h1 태그와 ul, li 태그가 사용되었다.

 

마지막으로 웹 페이지의 제일 하단에 들어갈 내용은 foot div를 만들고 내용을 감싸는

foot_wrap div를 만든다.

 

 

- CSS

: .contents div 에서는 width를 1000px로 지정한다.

margin:0 auto 10px 이라는 뜻은 위 왼쪽/오른쪽 아래 순으로 여백이 들어간다는 것이다.

위는 여백을 없애고 중앙 정렬한 후, 아래는 10px만큼 여백을 준다는 뜻이다.

overflow: hidden을 작성하여 div를 넘어가는 내용은 없어지도록 한다.

 

.contents > div 에서는 float: left로 해서 왼쪽으로 붙여준다.

 

left와 right를 6:4로 나눈다고 생각하고 div를 만드려고 한다.

.contents .left는 contents div 하위에 있는 left div를 부른다는 것이다.

width 값을 60%로 지정하고, margin은 위/아래 10px, 좌/우 0px로 두었다.

 

.contents .left p는 contents div 하위에 left div 하위에 있는 p 태그를 부르는 말이다.

margin을 위/아래 10px, 좌우 30px로 두고, text-align을 center로 하여 텍스트 내용을

가운데 정렬시켰다.

 

.contents .left a는 스위치 같은 것을 만드는 것인데, float: right로 해서 left div 안에서 

오른쪽으로 붙도록 만든다.

background와 border를 설정하고, padding 값은 모든 면에 5px씩 설정한다.

font color는 검정색으로 설정했다.

 

다음은 .contents .right div를 설정할 건데, 아까 left의 width를 60%라 했으니

right는 나머지 40%를 차지할 것이다.

원하는 margin 값을 설정하고 float: right로 하여 오른쪽으로 붙도록 한다.

 

.contents .right .right_wrap 에서는 margin을 좌/우에 두어 자연스럽게

배치되도록 만들었다.

 

.contents .right ul은 margin을 두고 text-align은 left로 하여 왼쪽 정렬시켰다.

 

마지막으로 .foot div인데, float 속성은 자석처럼 위로 따라 올라가려는 성질이

있기 때문에 clear: both를 작성해 올라가지 않도록 만들었다.

width 값은 100%로 설정해서 가로의 background가 꽉차도록 만들었다.

 

.foot_wrap에서는 width를 1000px로 설정하고 margin: 0 auto를 해주면 가로의

배경은 꽉차고 내용은 중앙 정렬된다.

나머지 height, font-size, text-align, line-height, padding을 설정한다.

height과 line-height의 값을 같게 하면 수직 정렬된다는 것도 중요하다.

 

완성 -

 

 

 

 


 

<CGV 웹 페이지 따라하기 예제>

 

 

 

 

 

 

 

아직 서브 메뉴를 만드는 것까지는 잘하지 못해서 상단의 메뉴와 메인 이미지를 삽입하는 것

까지만 완성해보았다. 

제일 위에 top div에 background를 100%로 넣고, 문구는 가운데 정렬로 하는 것이 아직 익숙지

않은데, 여러번 연습해보면 괜찮아질 것 같다 !

 

재미있는 예제였다-

 

 

 

 

 

 

*이미지 출처
: @magazine.B

반응형