10월 웹디자인기능사
10월 웹디자인기능사 tinyurl.com/2bq48bj5 북마크바 단축키 Ctrl + Shift + B 웹 학과 김혜지 강사 010-4372-1301 - 질문은 카톡(잘못된 부분 서술 + 의심가는 코드 캡쳐 + 브라우저 창 캡쳐 + vsocde.zip파일) - 급
docs.google.com
- 공부할 때 세팅
- 전체 선택자에 mx-auto가 적용되어 있어서 자동으로 중앙정렬 된다.
- css에 container만잡아서 1200px을 적용하는 원래 방식대로 해도 되지만, 이 수업에서는 헷갈려하는 수강생들을 위해서 하나하나 따로 선택하였다.
- 문제의 와이어 프레임을 보고 header, .slide-box, .content, footer 높이 설정
컨텐츠 영역 잡기
+) float : 한 줄에 같이 배치되고 넘어가면 줄바꿈된다.
- 너비 값은 내가 설정한다. 이 때 소수점으로 나오지 않게 계산기로 계산하여 설정한다.
하단 영역 잡기
+) float은 상위태그가 하위 태그를 품을 수가 없다.
ㄴ 따라서 상위태그가 너비 높이를 단단하게 가지고 있는 경우에만 이런 코드가 작성이 가능하다.
컨텐츠 영역과 하단영역 높이, 마진 커스텀
- 컨텐츠 영역 높이
- 컨텐츠 영역 마진
- 하단영역 높이
상단바
- 로고
- 전체 선택자에 mx-auto가 걸려있기 때문에 위와 같이 나온다.
- float: left; 를 적용하여 한 줄에 같이 나오게 한다.
(+) 레이아웃을 구성할 때 float, display, absolute 셋 중 하나만 적용할 수 있다.
- 메뉴바
(+) 메뉴바의 높이는 보통 40px이다.
- float은 세로 정렬을 할 수 없기 때문에 absolute를 사용해서 정렬해야만 한다.
- absolute는 자유로운 영혼
ㄴ 자유로운 영혼은 relative만이 잡아줄 수 있다.
[float]
* 한 줄에 같이 배치
- 위치를 잡아줄 때 left나 right를 사용
[block]
* 한 줄에 하나씩 배치
- 위치를 잡아줄 때 margin을 사용
[absolute]
* 기능사에서는 중앙정렬이나, 세로정렬 구조 위에 겹치기
- 위치를 잡아줄 때 위치속성을 사용
(+) absolute 대체 가능 속성 = margin
ㄴ 구조가 겹쳐야 되거나 부모태그가 자식태그보다 훨씬 작은 경우에는 margin을 사용할 수 없고 absolute를 사용하여 구조를 구현해야 된다.
ㄴ 그러나 바깥 영역이 유연하게 풀려있는 경우에는 사용할 때 주의가 필요하다.
- float은 공중에 떠다니는 태그이기 때문에 float의 높이를 상위태그가 상속받지 못한다.
- 그래서 %를 적용하지 않고 px로 높이를 다 설정하는 것.
- container에 높이를 설정한 적이 없고 float은 상위태그에 높이를 상속시켜주지 않으므로 container의 높이가 0이다.
- 따라서 bottom-0 을 적용하니까 내 눈에 보이지 않는 것.
- 시험칠 때 이런 실수가 나오면 개발자 모드로 확인해야 하므로 꼭 개발자모드 익숙해지게 연습!!!
- container에 높이 값을 적용하여 해결.
- 메뉴바/ 목록 구조
- 괜히 오타나지 않게 복사해서 사용하기
- 가끔 제공된 파일에 오타가 있는 경우가 있으니 잘 체크하고 오타 있으면 고쳐서 넣기
- ul을 확인하기 위해 배경색을 깔았으나 오렌지컬러가 보이지 않음
- a태그 노멀라이즈 bgc-pink에 가려진 것임
- a태그에 opacity 적용하여 확인 가능
- 오렌지 컬러가 사라지는 것을 확인해야한다.
- float을 적용했기 때문에 높이가 0이 되었다.
- ul 높이 적용
- li 너비, 높이 적용
- a 태그와 li 태그가 같은 크기를 가져야 하기 때문에 둘 다 적용한다.
- 사실 a 태그에만 적용해도 되지만 기능사 시험에서 헷갈리지 않도록 그냥 다 쓰자.
- 메뉴바/ 목록 중앙정렬, 폰트
!! 텍스트 속성은 꼭 텍스트를 감싼 그 태그에 적용하기
- 폰트 사이즈 커스텀, 가로 중앙정렬
- 세로 중앙정렬은 line-height로
- 메뉴바/ 2차메뉴 구조
'웹디자인기능사 실기' 카테고리의 다른 글
| 웹디 실기 (4) (3) | 2024.10.20 |
|---|