비전공에서 취업까지!! [27화] css 실기2편 40% 필기40% 태도점수20%!! -입니다.-
안녕하세용 SsunDev에옹!
오랜만이죠?
맞아요 제가 드디어 생에 첫 코로나에 걸려보았지 뭐에요? 그래서 잠깐 쉬었습니다 ㅎㅎ
왜! 모 ! 쉴 수도 itzy! 모!
겸사겸사 할게 좀 많아져서 잠시 쉬었습니다! SsunDev가 보고싶었다면 쏴리 질러!!!
자 그래서 이번시간엔 드디어
그동안 저희가 배웠던 HTML + CSS 을 통하여 그럴싸한 홈페이지를 하나 같이 만들어보겠습니다!
후 정말 길어질것만 같군요!
자 우선 homePage.html, homePage.css 두 페이지를 만들고 각각 안에 뼈대를 기입해 주도록 합시다!
이번에 저희가 만들어볼 페이지는 이런 페이지입니다!
뭔가 2000년대 홈페이지같죠?
네 이런 페이지를 만들고 예쁘게 꾸미는게 프론트 개발자의 할 일입니다!
백앤드는 꾸밀줄 몰라!!! 뭐!! 어쩔티비 저쩔티비 어쩔비스포크냉장고!!!!
우선 저희가 알아야할 용어가 있습니다.
이런식으로 홈페이지에서 각각의 영역이 있는데요
제일위의 페이지의 제목이 붙는 헤더영역
그 바로아래 다양한 페이지들의 대분류를 제시해주는 네비게이션바, 네브바
네브바 아래에 페이지의 데이터들을 담고있는 컨텐츠 영역
컨텐츠 안에서 서브로 중,소분류를 나타내주는 aside영역
그 옆 가장 중요한 메인영역
그리고 가장 하단에 해당 페이지의 저작권이나 뭐 회사 소개나 등등이 적혀있는 푸터영역입니다!
페이지에 따라서 aside영역은 없기도 합니다!
이 페이지를 만들어보겠습니다.
일단 첫번째로 페이지를 전체적으로 정의해주는
wrap 혹은 container등등의 이름으로 하나 감싸준다고 전에 말씀드린적 있습니다.
따라서 wrap 이라는 div로 하나 감싸주고
그 안에 각 영역별로 div로 영역을 나누어 주었습니다.
이렇게 페이지를 보고 어떻게 코드를 짜야할지 대략적으로 영역을 나눠두시면 작업하기 좋습니다.
헤더먼저 다 짜고 메인짜고 푸터 짜고 하나하나 짜는게 아닌
그림을 그리는 것 처럼 큰 틀부터 하나씩 천천히 짜가는것이지요!
항상 다시 말씀들이지만 중요한건 들여쓰기!!!!
부모 자식관계, 상하관계, 교우관계, 사제관계등등 정말 잘 지켜주셔야합니다!
자 영역을 나누어주었으면 이제 헤더부터 하나씩 짜 볼까요?
헤더는 크게 짤건 없고 그냥 h1 테그를 통해 이름만 적어주었습니다.
페이지에 따라서 이런식으로 홈페이지 이름과 검색창 로그인 링크 등등이 추가로 존재할 수 있습니다.
자 그 다음 이 헤더영역의 CSS를 꾸며보겠습니다.
먼저 페이지의 공통 테그들에 속성을 정의해 주도록 하겠습니다.
첫줄 /*전체 공통*/ 부분을 보면
각 테그들에 전체적으로 margin과 padding을 0으로 선언해준 부분이 있습니다.
이는 각각 브라우저의 특성이 다 달라서 0으로 선언해준겁니다
브라우저라 함은 구글 크롬도 있을것이고 인터넷 익스플로러도 있을것이고 파이어폭스도 있을것이고..
다양한 브라우저가 존재하게 되는데 이 다양한 브라우저에서 각각 기본속성정의가 조금씩 달라서
똑같은 페이지를 만들어도
어떤 브라우저에서 켜면 각 테그가 좀 더 붙어있다거나 떨어져있다거나 하는 결과가 발생합니다.
따라서 미리 모든 테그들의 마진 패딩의 디폴트값을 0으로 박아줘버리는것이지요
그 아래 /*clearfix*/ 도 마찬가지로 우리가 클리어픽스 기능을 쓰기위해서 처음에 기본적으로 디폴트값을 정의해주는거라고 생각하시면 됩니다.
복붙 하여 쓰실수 있게 여기다 써드릴게요!
그 다음으로
페이지의 전체적인 속성을 담당하는 <div id="wrap"> 영역을 꾸며볼게요
먼저 margin padding 기억하시죠?
이 마진패딩을 기입하실때 여러가지 방법이 있는데
margin-top: 20px; , padding-right: 20px; 이런식으로 한군데씩 기입해줄 수도 있고
margin: 10px 20px 30px 40px; 이런식으로 위, 오른쪽, 아래, 왼쪽 을 한번에 기입해 줄 수도 있고
margin: 10px 20px; 이렇게 두개만 적어주면 앞의 10px 위아래 20px은 오른쪽 왼쪽
다덜 기억 나시죠!!!
그래서
wrap 영역의
위 아래로는 마진을 0px로 딱 붙여버리고
좌 우는 auto 를 통해서 홈페이지를 한 가운데로 중앙정렬시켜주기위해 마진을 써주었습니다.
width: 1280은 보통 컴퓨터로 볼때 가로길이를 써준겁니다. 기기에따라서 모바일의 가로 화면이 넓을때의 가로 다 다른데 보통 1280씁니다.
text-align: center; 는 wrap 내부의 글자들을 중앙정렬 하겠다입니다.
대부분 중앙정렬하고 좌 정렬 우정렬이 필요할 경우는 각각 지정해주면 됩니다.
overflow: hidden; 은 내용물이 넘치면 숨긴다는 내용입니다!
min-width 는 최소 가로넓이 입니다.
wrap에는 이정도 데이터만 기입해 주도록 하겠습니다.
그럼 바로 alt+B!!!
중앙 정렬이 잘 먹힌것같군요!
그다음 헤더아래 h1의 테그에 글자 크기 속성을 추가해볼까요?
오버스럽게 커진것 같군요 아주 흡족합니다.
자 이번엔 헤더 아래
nav 영역을 채워줍시다.
<ul>과 <li> 테그를 사용하였구요 각각 li테그를 클릭하면 해당 페이지로 이동할 수 있게 <a> 테그를 사용하여 링크를 걸어주었습니다.
이런 모습이 나오는군요!
자 원래대로라면 이런 ol혹은 ul을 사용하였을때 이런식으로 순번이 붙거나 문양이 붙게됩니다. 다들 기억나시죠?
현재는
마진 패딩 0을 통하여 숨어버려서 보이진 않으실텐데 그래도 해당 오더리스트와 언오더리스트의 순번 문양을 없애주면 좋겠죠??
전체 ol과 ul 에 리스트 스타일을 none으로 지정해주겠습니다.
자 첫날을 고작 여기까지 만들어보겠습니다
HTML
CSS
정말 별 내용아닌데도 설명으로 하면 정말 길어지는군요!
여러분도 여기까지 잘 따라오셔서 개성넘치는 홈페이지를 만들 수 있으셨으면 좋겠습니다!
이제까지 한거 총 복습이다 생각하시고
각 테그들을 사용할때 어떤걸 습득 하셨었는지 다시한번 생각하는 시간이 되셨으면 좋겠습니다.
제가 글을 적을때 항상 제목에 상세하게 적지 않고 드립을 많이 던져서
다시 찾아보시고자 하시면 아 그거 몇편에 적었더라? 하고 다시 찾기 힘드실겁니다
그래서 항상 다시한번 본인만의 방식으로 다시 정의해보라고 한것이기두 하구요
다시한번 스윽 정독하시면서 본인만의 재 정의를 또 해놓으시면 분명 나중에도 요긴하게 쓰일거에요!
그럼 다들 몸 건강 잘 관리하시고 우울하지않은 하루 보내세요 !!!!!