오늘은 반응형 웹을 만들어보는 시간을 가졌다.
css 위주로 하다가 또다시 html 구조를 각 화면마다 구현하려고 하니 , 기억이 새록새록하는 것 같다.
그래도 어느 정도 구조 연습을 해왔기 때문에 예전처럼 어떤 구조로 할지 생각만 하다가 시간을 보내는 시간은 줄어든 것 같다.
이제 이것만 끝나면 자바스크립트 라던데......(나... 떨고... 있니......)
자바도 아직 안 배웠는데.....(oh... my.. got...)
자바 예습을 꾸준히 해야 되는데 요새 정처기 시험도 준비하고 있어서.. 솔직히 머리가 복잡해졌다.
자바스프링 들어가기 전에 정처기를 시험을 보고 싶은 계획이 있는데 잘 될지 모르겠다...
※반응형 웹 실습.
@반응형 웹 이란..
-간단히 말해서 화면이 작아질수록 width 값을 설정해 그 해당값이 오면 그 화면크기에 맞춰서 안에 css가 바뀌는 구조를 말한다. 보통 반응형 웹을 공부하면 나중에 휴대폰 앱 같은 화면도 구현 가능할 수 있게 된다.
※html 구조
1. 기본 웹구조를 보면 wrap 박스 안에 header라는 박스가 위치해 있고 그 안에 노란색 영문자가 포함되어 있습니다.
2. header아래 nav 박스가 위치해 있고 ul-li-a로 구성된 메뉴탭들이 위치해 있습니다.
3. container 박스 안에는 article이라는 박스가 왼쪽에 위치해 있고, aside라는 박스가 3개의 img태그를 자식으로 품고 오른쪽에 위치해 있습니다.
4. 마지막으로 footer라는 박스가 안에 p 태그 2개를 자식으로 포함해 위치해 있습니다.
※css 기본구조
1.body 에 linear-gradient를 이용해 화면에 반반 색이 적용되게 해 준다. 이화면은 스콜을 내려도 항상 화면에 반반 색이 위치해 있게 fixed를 같이 걸어준다.
2. wrap 박스에는 width * height (960px * 100%) , magin:auto (중앙위치시켜 준다) position:relative (밑에 자식들의 기준점을 위해서) , backgoround-color:흰색,으로 적용해 준다.
3. header 박스는 height:280px ( width는 wrap에서 적용되기 때문에 자동으로 위치 먹어줌) background로 배너 이미지를 적용시키고 반복되지 않게 no-repeat을 걸어준다.(ceter/cover을 안 걸어주는 이유는 나중에 반응형 웹으로 구조 바꿨을 시 똑같은 이미지가 위치하게 하려고 한 것)
- header 자식인 h1에 font-size 80px , font-weight :bold(900) , color : yellow( 글자색) padding 20px ( 안쪽 여백-위치조정)
4. nav 박스는 height 60px ( 마찬가지로 width는 wrap에서 적용되므로 생략해 준다) line-height 60px (글자 세로 중앙정렬) bockground :green ( 배경색 초록) , color: #fff ( 글자색 흰색)
- nav > ul 박스에 display:flex를 해줘서 li들이 가로 정렬 되게 해 준다.
- li박스에 width: calc이용해 4등분으로 나눠준다. text-align :center 글자들을 중앙에 위치시켜 준다.
- li박스를 hover 하면 color:yellow (글자색 노란색) font-weight :900 ( 글자 두께 굵게 설정)
5. container 박스는 display:flex , justify-content:space-between를 걸어서 안에 있는 article이나 aside를 양쪽으로 나눠서 가로정렬해 준다.
6.article 박스는 width:720px (height는 안에 내용문들의 크기에 의해 저절로 적용된다) padding :20px (article 박스 보면 글자들이 해당칸에서 20px 정도 안쪽으로 위치해 있을 것이다) , box-sizing:border-box (padding 준 것을 박스 안으로 위치시켜 준다.)
- article > h3에 font-size 18px, font-weight:900 , margin : 22px 0 ( 위, 아래 22px 씩 주고 좌, 우는 0px )
- article > h4에 font-size 16px, font-weight:900 , margin : 20px 0 ( 위, 아래 20px 씩 주고 좌, 우는 0px )
- article > p에 font-size 16px, font-weight:900 , margin : 18px 0 ( 위, 아래 18px 씩 주고 좌, 우는 0px )
*reset.css를 적용 중이므로 기본 요소들의 css는 다 초기화된 상태이다.
7. aside 박스는 width: 200px(height는 안에 기본크기들이 커질 때 자동으로 커지도록 설정) padding:10px box-sizing:border-box ( padding을 박스 안으로 위치)
- aside > img에 width :100% ( padding 먹인 공간 안으로 img 태그가 크기를 맞출 것이다.)
- aside > img:hover 시 box-shadow :0 0 0 5px red ( box-shadow으로 테두리값을 설정하면 박스의 그림자에 테두리가 생기는 것이므로 테두리가 생겨나도 안에 img는 움직이지 않는다.--> border로 테두리 값을 설정하면 hover 시마다 테두리가 생기면 img도 해당 테두리 영역만큼 안으로 살짝 축소될 것이다.)
*보통 boder 해서 img 안 움직이게 하는 방법은 boder을 우선 설정해서 색만 흰색(투명)으로 바꾸고 hover 시 검은색으로 바뀌게끔 하면 img는 그대로 있을 것이다.
8. footer는 height 100px , line-height: 40px ( 글자 세로 정렬) padding: 10px , box-sizing( padding 테두리 안으로 맞게 위치), text-align:center ( 글자가로 가운데 정렬) backgroun-color(배경색: 검정) color (글자색 :흰색)
※(max-width:1024px) css 구조
1. wrap박스는 width : 500px (화면이 1024 정도 줄었을 시 해당박스가 width로 작아질 것이다 그래서 그 밑에 자식박스들도 같이 작아질 것이다. 기본 css에서 안에 자식들의 widht 크기가 wrap 가로크기에 맞춰져 있기 때문이다.)
2. header박스는 height : 200px, backgroud-size : 967px 238px (배경 박스의 가로*세로 위치지정)
- header > h1 font-size : 64px (작아질 것이다 )
3. container 박스는 display:block (원래 flex에서 block(기본값) 걸어준 것이다) -그러면 안에 자식들이 가로정렬이 해제될 것이다.)
- article 박스는 width:100% ( wrap 박스의 가로넣이대로 다 먹을 것이다 ).
- aside 박스는 width:100% ( wrap 박스의 가로넣이대로 다 먹을 것이다 ). display:flex (안에 img 박스들을 가로정렬해 준다)
- aside > img width :calc (100% / 3) 3등분 해준다.
※(max-width:600px) css 구조
1. wrap박스는 width : 320px (화면이 1024 정도 줄었을 시 해당박스가 width로 작아질 것이다 그래서 그 밑에 자식박스들도 같이 작아질 것이다. 기본 css에서 안에 자식들의 widht 크기가 wrap 가로크기에 맞춰져 있기 때문이다.)
2. header박스는 height : 100px, backgroud: #000 (배경 박스 색을 검은색으로 해준다 -> background-image를 주면 위에 background에 img질 준상태이므로 적용이 안된다. 그래서 background 에다가 배경색을 줘야지 적용이 된다.)
- header > h1 font-size :48px (64~ 48px 작아질 것이다 )
3. nav 박스는 height : auto (기본값 설정) line-height:1 , background: transparent (부모 대비 색으로 바뀐다 -> 부모가 wrap 이므로 wrap의 배경색인 '흰색'으로 바뀐다.) , color (글자색:파랑) , padding :10px , box-sizing( padding 박스 안으로 위치)
- nav > ul에 display:block ( 원래 flex였던 걸 기본을 돌려서 안에 메뉴탭 들을 세로로 위치시킨다.)
- nav > ul > li에 widht:100% ( wrap에 가로대비 다 먹어야 되기 때문에) , line-height :40px ( 세로사이즈 잡아주고 가운데 정렬) , text-align :center (글자 가로 중앙 위치) , margin :10px 0 (위, 아래 10px , 좌우 0px )
4. article 박스에 padding:10px ( 기본 css에 20px 준걸 10px로 줄여준 것이다)
5. aside 박스는 display:block (원래 flex였던 걸 기본을 돌려서 안에 img 들을 세로로 위치시킨다.) padding:10px
- aside > img에 width:100% (해당 박스 안에 꽉 차도록)
6. footer 박스는 font-size:13px ( 안에 글씨 크기만 줄여준다)
'국비교육' 카테고리의 다른 글
| 국비지원 27일차 (0) | 2023.08.24 |
|---|---|
| 국비지원 26일차 (0) | 2023.08.24 |
| 국비지원 24일차 (Iframe) (0) | 2023.08.21 |
| 국비교육 animation실습 (0) | 2023.08.19 |
| 국비지원 23일차 (animation) (0) | 2023.08.18 |