[ 실습 ] 레이아웃 잡아서 구성해보기
1. 기본 틀 레이아웃 잡기
1. 레이아웃 파악해서 큰 틀 잡기
2. 눈에 보기 편하게 큰 틀 div 스타일 지정해주기
#높이 지정 전이라 다 겹쳐 보인다.
3. 안에 내부 div들 스타일 지정
# 높이 지정 전이라 다 겹쳐 보인다.
# 3개 들어가야 하는 공간 ( 헤더 / 컨텐츠 ) 일단은 다 겹쳐서 보인다.
4. 헤더 부분 div 들 자리 잡아주기
4-1 높이 주고 - float 왼쪽 정렬
4-2 너비 주고 위치 잡아주기
5 콘텐츠 애들 잡아주기
5-1 높이 주고 - float 왼쪽 정렬
5-2 너비 주고 위치 잡아주기
기본 틀 잡기 완료!
2. 영역에 맞춰 내용 채워주기
1. 푸터 만들기
2. 로그인폼 만들기
3. 검색창 만들기
4. 메뉴바 만들기
현재 화면에서 내용 채우면 번거로우니까
새로운 파일을 만들어서 작업하고
가져오는 식으로 사용해보자.
2-1. 상세_footer
# 상세_footer 만드는 방법 체크
[CSS 레이아웃 ] 상세_footer
0. 만들어야 하는 footer 체크 div 2개로 나눠서 위치 잡아주고 밑에 div쪽은 다시 div 2개로 나눠서 작업 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 새로운 파일 생성 #footer : 높이랑 너비는 임의로
giggs.tistory.com
2-2. 상세_로그인 폼
# 상세_로그인 폼 만드는 방법 체크
[ CSS 레이아웃 ] 상세_loginForm
0. 만들어야 하는 login폼 체크 ## div3개 중에서 3번째 div에서 작업 ## 2개의 div로 나눠서 작업 아이디 / 비밀번호 / 로그인 들어갈 div1 회원가입 / ID-PWD 찾기 들어갈 div2 ## div1 은 다시 나눠서 작업 아.
giggs.tistory.com
2-3. 상세_검색창
# 상세_검색창 만드는 방법 체크
[ CSS 레이아웃 ] 상세_searchBar
0. 만들어야 하는 footer 체크 # 3개의 div 중 2번째 div에서 작업 # < form 태그> 안에 div2개로 나눠서 작업 input text 들어갈 div input submit 들어갈 div 1. 파일 하나 새로 만들어서 기본 틀 잡아주기 #..
giggs.tistory.com
2-4. 상세_메뉴바
상세_검색창 만드는 방법 체크
[ CSS 레이아웃 ] 상세_menuBar
0. 만들어야 하는 menuBar체크 # 통합 메인 파일에서 자리 잡아 놓은 div에서 작업 # 메인메뉴와 서브메뉴 작업 ul> li에서 < a 태그 > 로 메인 메뉴 만들고 ul> li> ul> li에서 < a 태그> 로 서브 메뉴 잡아준
giggs.tistory.com
@ 추가 참조
https://giggs.tistory.com/177?category=943709
22. 06. 16 - [ CSS 레이아웃 ] - position, 메뉴바(ul>li>a)
[ 실습 1 ] 레이아웃 잡아보기 방법 1 - < img태그> 로 삽입 img 파일로 저장한 후 img태그로 삽입 이후 필요하면 위치잡아서 버튼이나 div 태그 만들어서 사용 방법 2 - { position : absolute } 로 위치 잡아
giggs.tistory.com
각 부분 만들기 끝!
3. 만든 내용들 합쳐주기 - 통합해주기
각각의 상세_* 파일에 있는
style 부분과 body 부분을 복사해서
처음 레이아웃 잡았던 통합 메인 파일의
style 부분과 body 위치에 맞게 붙여 넣기.
합친 완성본을 보면서 디테일한 부분 수정하면 완성!
높이/너비/scale 등
review
정말 심플하게 배운 내용을 바탕으로
웹페이지를 구현해보았는데
보기에는 너무 쉽고 금방 할 줄 알았는데
...
쉽지 않았다.
시멘틱 태그를 사용하지 않고
div의 id를 이용해서
header / nav / sector / footer 로 작업
웹 페이지를 보는 시선이 달라졌다.
스타일과 body내용 적용해주는 부분마다 나눠서 작업했다.
링크를 첨부하나 했는데 복사 붙여 넣기를 이용했다 ㅎㅎ
후후 이것으로 CSS 스타일 부분도 마무리가 되었다.
지금까지 배운 내용을 바탕으로
주말에는 주제 자유 - 웹페이지 만들어보기 과제가 있다.
어떤 웹페이지를 만들어 볼까나~
'Java 기반 클라우드 융합 개발자 과정 - KH 정보교육원 > 6월' 카테고리의 다른 글
| 22. 06. 21 - [ CSS 레이아웃 ] 내가 만든 웹페이지 발표 (0) | 2022.06.26 |
|---|---|
| 22. 06. 20 - [ CSS 레이아웃 ] 웹페이지 구현 발표 준비하기 + [ 상담 ] (0) | 2022.06.23 |
| 22.06.16 - [ CSS 스타일 ] transition, transform, floot (0) | 2022.06.21 |
| 22. 06. 16 - [ CSS 레이아웃 ] - position, 메뉴바(ul>li>a) (0) | 2022.06.21 |
| 22. 06. 15 - [ CSS 스타일 ] 레이아웃 관련 스타일 - display , position , z-index , visibility , float , clear (0) | 2022.06.16 |