Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원/6월

22. 06. 16 - [ CSS 레이아웃 ] - position, 메뉴바(ul>li>a)

giggs 2022. 6. 21. 10:01

 

 

 

[ 실습 1 ]  레이아웃 잡아보기 

 

 

 

 

 

 

 

방법 1 -  < img태그> 로 삽입 

  • img 파일로 저장한 후 img태그로 삽입
  • 이후 필요하면 위치잡아서 버튼이나 div 태그 만들어서 사용

 

 

 

 

방법 2 -  { position : absolute } 로 위치 잡아보기 

 

 

2-1. box 속성 지정

 

 

 

 

2-2. <div> 3개 만들어서 - 각각 크기와 보더 컬러 지정

 

 

 

 

 

 

2-3 위치 조정할 div 애들 { position : absolute; }

  • 위치 조정할 div ( 파란박스, 초록박스) 위로 띄워주기.

 

 

 

 

 

2-4 위치 잡을 기준 점 잡아주기

  • absolute로 띄운애들 위치 잡을 기준점 잡아주기
  • 빨간 박스 position : relative; 지정
  • #absolute 기준점 :
  • 부모 태그 하나하나 찾아가면서 position:static 아닌 첫 번째 요소를 기준으로 위치 잡는다.

 

 

 

2-5  파란 박스와 초록 박스 위치 잡아주기

  • 파란박스 - { top: 0px }

 

 

 

  • 초록박스 - { top 100px, left 100px; }

 

 

 

 

 

 

 

 

방법 3 -  { position : relative }로 위치 잡아보기 

 

 

 

 

3-1. 파란박스, 초록박스 – { position : relative} 로 변경해보기

 

 

  • position : absolute; 해주었을 때 2개의 박스 - 겹쳐있던 것과 차이점 체크

 

 

 

 

 

3-2. 파란박스 자리 잡아주기

 

  • top이랑 left를 해줘도 움직이지 않는다
  • why??
  • 기준점이 !! 자기 자신이라서 

 

 

 

 

 

3.3 움직임 체크 하면서 위치 조정해주기

 

 

 

 

 

 

 

 

 

 

방법 4 -  { position : relative } { position : absolute } 로 위치 잡아보기 

 

  • 4-1 파란박스는 relative 로 자기 자신을 기준으로 위치 잡아주기
  • 4-2 초록박스는 absolute로 position="static" 아닌 부모 태그 기준으로 위치 잡아주기

 

 

 

 

## relative 와 absolute 차이점 체크

  • relative 해준 파란박스가 보이는 건 저기지만
  • 실제 자리 차지하고있는 공간이 있다.
  • 초록박스는 원래 자리 차지 안 하고 옮긴 자리로 차지

 

 

 

 

 

 

 

 

 

 

방법 5 -  < table 태그> 로 만들어보기 

 

 

 

5-1 테이블로 틀 잡기

 

 

 

5-2 - 필요한 부분 색상만 바꿔주면 - 완료

  • 1번 4번만 색주고
  • 2번 3번 색 없애주면 끝

 

 

 

 

 

 

 

 

 

 

 

 

[ 실습 2 ] 메뉴바 만들어보기

 

 

 

 

 

 

  • 응용 :::: 메뉴바 쭉 있는데 마우스올리면 밑에 서브 메뉴 쭉 나오도록 레이아웃 구성
  • 메뉴바 어떤 태그로 만드는 것이 좋을까요?
  • ul > list 로 만들어 보자 ~

 

 

 

 

 

1. < li 태그>와 < ul 태그>와  < a 태그>의 기본 스타일 없애기

 

 

 

 

 

2. ul>li { float : left  } -  < list >들 순서대로 만들어주기 

 

 

 

3. 메인메뉴와 서브메뉴 만들어주기

  • 메인메뉴 --- ul > li > a 
  • 서브메뉴 --- ul > li > a > ul > li

 

 

 

4. 서브메뉴 작업해주기

  • 4-1. 서브메뉴들 기본 상태에서는 안 보이도록 숨겨주기
  • { display : none; }

 

 

 

  • 4- 2. 메인 메뉴에 마우스 올렸을 때  서브메뉴 보이도록 해주자
  • 메인 메뉴는 a 태그
  • a:hover + ul { display : block; }

 

 

 

  • 빨간놈(각각의 메인메뉴)에 마우스 올렸을 때 /
  • 초록놈(각각의 서브메뉴) 보이도록 / 

 

 

 

 

5. 메인 메뉴 간격 - 위치 조정

 

  • 5-1 새로운 <div id=“nav”>하나 만들어서 다 감싸주기

 

 

 

  • 5-2. 파란색 메인 메뉴들 [ 크기 조정 + 가운데 정렬 ]해주기

 

 

 

 

6. 서브메뉴가 나타나는 범위 수정

  • 마우스가 메인메뉴의 텍스트 영역인 - 숫자에 정확히 올라가야 서브메뉴가 나타난다.
  • 메인 메뉴 칸에만 마우스 올라가면 서브메뉴 나오게 해주고 싶다.

 

 

  • 6-1 방법은? < a태그 >(메인메뉴)의 크기를 늘려주면 된다.

 

 

inline 스타일이엇던 a태그 block으로 바꿔주고

100%로

 

 

 

 

 

7. 서브메뉴 나타나면 그 영역에 마우스 있을 시 유지되도록 설정

  • 7-1 마우스가 서브메뉴 선택하러 가면 없어져버린다. 유지되도록 설정 필요
  • 메인 메뉴: hover 되면 block 형식으로 유지되도록
  • ul:hover { display : block; }

 

 

 

 

 

  • 7-2 서브메뉴 없는 부분으로 가면 서브메뉴 사라진다. 이 부분도 수정해보자
  • 서브메뉴 < ul 태그 > 사이즈 늘리는 걸로 해결해보자.

 

 

  • 초록색 영역에 있으면 안 없어진다.

 

 

 

 

8. 서브메뉴 애들 가로로 하나씩 보이도록 수정

 

 

+@ ( 첫 번째 / 두 번째 / 세 번째 ) 서브메뉴 애들 < a태그 > 로 바꿔주고 링크 걸어주면 -  클릭하면 페이지 이동 가능!

 

 

 

 

 

 

 

 

 

 



review



레이아웃 잡기 연습을 해보았다.


--- 사각형들 위치 잡아보기 ---
강사님과 같이 해보기 전에
혼자 만들어 보는 시간을 가졌는데
위로 조금만.... 가운데로.... 오른쪽으로..
쉽지 않고 답답하고 ㅎㅎㅎ


--- 서브 메뉴 레이아웃 ---
웹 사이트에서 자주 보던 스타일
직접 해보려 하니 만만치 않았다.
리스트를 구성하는 방식도 여러 가지였다.
우리는 ul> li 형식으로 해보았는데
스타일 사용이 익숙해지기 전에는
이 포스팅을 많이 참조해야 할 듯하다.

나중에는
<li> 애들을 <a>로 바꿔주던지
<a태그>를 추가해주면 해당 url로
이동하도록 해줄 수 있다! 

어떤 효과가 있고 
어떤 효과를 줄 수 있는지 아는 것도 중요하지만
태그의 위치나 상황에 따라
효과를 주어야 하는 곳과
효과가 적용되고 안되고 하는 부분이 많은 것 같다.
이 부분도 공부해야겠다고 많이 느꼈다.

효과를 주어도 적용이 안 되는 경우가 없도록
...


 

저작자표시 (새창열림)