동빈나 부트스트랩 웹 디자인 실전 강좌 4강 - 외부 스타일 시트 (Bootstrap Web Design Tutorial #4) > 부트스트랩

Bootstrap

부트스트랩 웹디자인 강좌 공유

동빈나 | 부트스트랩 웹 디자인 실전 강좌 4강 - 외부 스타일 시트 (Bootstrap Web Design Tutorial #4)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
동빈나님의 부트스트랩강의 청각장애인을 위한 자막
15610964051504.jpg

 


 지난 시간까지 이렇게
홈페이지에 구성을 알려주는 역할을 하는 4 이게 잊은 바이 드에서 한번
알아보는 시간을 가졌는데요.
리메이션 반은 위반적으로 hts 소스 코드 즉 바디 태그의 가장
위쪽에 위치 하면서 자바스크립트가 함께 사용된다 고 했어요.
이번 시간에 공부할 건 바로 외부 스타일시트 라는 건데요 f 스타일
시트가 등 경우는 html 문서의 디자인을 정의할 때 html 소스 코드
안에서 디자인 정리하는 게 아니라 외부적으로 css 파일 하나 생성해서
정의하는 방법이라고 할 수 있어요.
이제 우리가 보시면 소스 코드 록 생하고 있는 이 부트스트랩 점 css
또 외부 스타일시트 중 하나라고 생각하시면 되는거구요. 일반적으로 전체
프로젝트에서 공통적으로 사용되는 디자인은 외부 스타일시트 로 정의를 하고
개별적인 페이지에 사용된 디자인은 내부적으로 정의해서 사용하는 경우가
많아요.
지금 우린 코드같은 경우 돼 이제 이러한 구성에서를 따르고 있는데요.
무슨 소리냐며는 이렇게 부트스트랩 에서 기본적으로 제공해주는 4 블박
그리고 이런 점보 토론 같은 경우는 다이제 전체 웹 사이트에서 전반적으로
원하는 형태로 사용할 수 있는 하나의 구성 요소 라고 할 수가 있어요.
집 전체 우리가 만든 웹페이지 프로젝트를 통털어서 공통적으로 사용되는
부분이라고 할 수 있는거구요.
근데 지금 보시면 이렇게 이 페이지 안에서 점보 토론에 대한 어떠한
스타일을 정해 준 걸 알 수가 있죠. 바로 이런걸 내부 스타일시트 라고
하는데요.
이렇게 바깥쪽에서 디자인을 정해준 게 아니라 이렇게 특정한 페이지 한계
안에서만 이렇게 스타 2 로 정해 주는걸 네버 스타일시트 정의 라고
하는건데요 지금 보시면 이제 점보 토론에 대한 특성을 이렇게 정리를
해주는 거예요.
인덱스 페이지 같은 경우는 하나의 웹 사이트 소개하는 페이지 해당하기
때문에 이렇게 점보 토리 1 들어가게 되어 있는 거죠.
즉 다른 페이지에서는 이제 전부터 오면 거의 사용하지 않기 때문에 이렇게
외부 스타일시트 로 정의해 주지 않고 이렇게 간단하게 인덱스 점 html
파일 안에서 막 이렇게 정의를 한 것입니다. 그렇다면 이제 말씀드렸듯이
이렇게 네비게이션 바와 같이 전체 웹 사이트 통틀어서 어떤 페이지를 가
등 간에 항상 보여지는 이러한 부분 같은 경우는 말 그대로 공통적인
부분이기 때문에 이렇게 외부적으로 정해 줄 필요가 있는거예요.
따라서 이제 이번 시간에는 외부 스타일 시트 를 어떻게 정해야 하는지
알려 드리고 이제 이런 러브 스텐 씨드 정의를 통해서 이렇게 굉장히
기본적인 형태의 내비게이션 바를 한번 더 예쁘게 우리만의 스타일로
커스터마이징 에서 한번 바꿔 보도록 하겠습니다.
바로 외부 스타일 시트 를 이용해서 바꿀 수 있는거구요. 바로 다음과 같이
여기서 이제 뉴스 파일 생성 해주시구요.
이제 여기다가 바로 스타일을 정해줄 수 있습니다. 바로 이렇게 컨트롤 s
를 눌러서 저장 해 줄 수 있는데요.
이렇게 css 폴더 안에 우리 프로젝트 이름인 코딩 부스타라고 이렇게
한번 만들어 줄게요 뒤 점 css 이렇게 붙혀 가지고 저장해 주시면
됩니다.
이렇게 만들어 주시면 순식간의 하나의 스타일 시트가 만들어진 건데요
바로 다음 같이 해 주겠습니다. 이렇게 골뱅이 임포트 한 다음에 url
해서 이제 나오는 곳 이라는 웹폰트 채를 가져올 건데요.

이 폰트가 굉장히 예쁜 폰트라서 한번 사용해보도록 하겠습니다.

이제 이렇게 구글에서 제공하는 웹 폰트를 그대로 가져올 수 있도록 합니다.
이렇게 가져오시면 되구요. 이런식으로 css 분서 안에서도 이렇게 외부에
있는 css 로 또 가져올 수가 있어요.
아무튼 이런식으로 가져온 다음에 이렇게 정체 영어를 통틀어서 폰트를
나눔고딕 으로 설정할 수 있도록 만들어 주면 됩니다.
그다음 또 앉아 이런 식으로 전체 a 태그 같은경우는 이제 기본적인
색상으로 검은 색깔의 지정해 주시고요.
이런식으로 텍스트 데코레이션 이라 해가지고 미 출 같은걸 그 어지지
않도록 만들어 주시구요.
그대로 복사해서 이제 a 태그에
마우스가 올라갔을 때 집 어떠한 링크에 마우스가 올라갔을 땐 이렇게
색깔을 회 색깔로 회 색깔이 감도는 ebb 라는 색깔을 넣어 줄 수
있도록 하고요.
그다음 이제 컬러를 포인트로 바꿔 줘서 이제 현재 내가 선택하고 있는 게
링크 구나 라고 알려줄 수 있도록 합니다.
이제 한 번 새로고침 해 보시면 이제 이렇게 한 다음에 and sem
html 5가 가지고 이렇게 자신이 만들어 준
css 파일인 css 폴더 안에 있는 코딩
부스터 라는 이렇게 매칭 해줄 수 있도록 합니다.
즉 방금 전에 자기가 저장한 이 css 파일을 그대로 가져올 수 있도록
한거구요.
씨스 폴더 안에 있는 코딩 부스터 짱 cs6 파일 이렇게 스타일시트 로서
참 좋아하겠다 라고 이렇게 넣어준 거구요.
이제 뭐 새로 고친 해보시면 이랬던 그 시체가 이렇게 바뀌는 것을 알 수
있습니다.
사실을 나눔 고딕체로 바뀌게 했는데 그렇게 약 달라진 것 같진 않죠
아무튼 이렇게 만들어 주었구요 이제 한번 내비게이션 바를 하나씩 바꿔
보도록 하겠습니다.
바로 다음과 같이 먼저 읽기 밑부분에
전체 영역을 통틀어서
스타일 정 이라고 해 주고요. 이제부터 이제 하나씩 정해 줄 수 있도록
합니다.
자 이제 지금 우리가 해야 될 거 네비게이션 여기죠. 이런 식으로 만들어
줍니다.
자 점 냄 파 디폴트 우리가 사용하던 내비게이션 파티 폴트 라는 클래스를
다음과 같이 추가적으로 정해줄 수 있도록 합니다.
백그라운드 컬러를 이렇게 검은 색깔로 바꿔 주고 그냥 이제 볼 칼라로
이렇게 검은색 걸로 바꿔 줍니다. 즉 이제 이렇게 배경이 검은 색깔 로
바뀌는 것을 알 수가 있구요.
이렇게 배경색상 이라고 넣어줄 수 있도록 합니다.
그다음 이제 아래쪽으로 내려와서
이번에는
프렌드 씩 제 목 부분에 색상도 바꿔줄 수 있도록 합니다.
칼날을 해가지고 텍스트 이 색깔을 하얀 색깔로 바꿔 줍니다.
이렇게 바꿔주시면 이제 이런 식으로 사회 새 걸로 바꾸는 것을 알 수가
있어 굉장히 굉장히 예뻐 졌죠.
이렇게 마찬가지로
주석을 달아 주도록 하구요.
이렇게 주석을 달아 주게 되면 은 우리 몸엔 보이지만 실제로 이제 이렇게
홈페이지를 보여주는 입장에서는 전혀 보이지 않기 때문에 말 그대로 이제
우리가 프로그램으로서 작업을 할 때 이게 어떤 코드 없구나 라고 이해를
할 수 있도록 만들어 주는게 바로 이 주석 이라고 할 수 있는거구요.
이렇게 간단하게 주석을 작성할 수가 있습니다. 그러니 이제
내부 마이 디폴트 있죠.
이제 프렌드 즉 제목의 이렇게 마우스를 올렸을때 곰 이제 거기에 이렇게
포커스 가게 되었을 때는 다음과 같이
백그라운드 칼라를 트레스 펠트로 바꿔 주시구요.
칼날 이렇게 bbb 로 바꿔줍니다 그럼 이제 좀 옅은 회색으로 바뀌는
것을 알 수가 있고요.
마우스가 올라갔을 때 이렇게 이해를 하시면 되고
이거 같은 경우는 에디션 제목에 마우스를 올렸을 때 라고 넣어줄 수
있도록 합니다.
그다음 이제 다음과 같이 해줍니다 네비게이션 발 지 포트에
이렇게 넣어주시구요. 각각 타 붙여 넣기 해서
각각의 a 태그에 마우스를 올리거나 있을 때 바뀌도록 합니다.
칼날을 화이트 바꿔주시고 백그라운드에 칼라는 이렇게 검은색 걸로 바뀔 수
있도록 만들어 주면 그 다음에 이렇게 여기 1 5 타고 났는데 이걸 지어
주시면 은 이제 막 새로 고침 안 했을 때 소개 버튼이 이렇게 하얀
색깔을 선택이 된 것이 보여지는 것을 알수가 있구요.
그런데 이렇게 현재 상태 괸 내비게이션
라고 이렇게 적어질 수 있도록 하구요. 다음 다시 또 하나 추가해 줍니다.
네비게이션 파일디폴트에 이제 이걸 그대로 복사해서 비슷하게 하나 더
만들어 주겠습니다. 이번에는
액티브가 아니라 각각의 리스트 인데요. 이렇게 깔린 리스트를 처리해줄 수
있도록 합니다.
이렇게 리스트에 마우스가 올라갔을 때 전해줄 수 있도록 합니다.
내비게이션의 글자의 마우스를 올렸을 때 그렇게 넣어주시고요.
니온 이제 색깔을 회 색깔로 바꿔 줄 수 있도록 합니다. 이렇게 bbb 로
바꿔 주신 다음에 새로고침해 주시면 이제 이런 식으로 마우스가 올라갔을
때 회색 걸로 바뀌는 것을 알 수가 있어요 이걸 또 그대로 박사 해서
붙여 넣기 한 다음에 이번에 뭘 해줄 꺼내는요.
대답 다운이 열렸을 때 마우스 색상 이벤트라고 넣어줍니다.
그 단지 이것들을 오픈 이라고 바꿔주면 되요.
그다음 이제 색깔은 검은색 걸로 바꿔 지구요.
이렇게 백그라운드 칼라를 하얀 색깔로 바꿔 줍니다. 그 다음에 테스트
데코레이션은 이렇게 노느라고 해주겠습니다. 이제 한번 실행을 해보시면은
이런 식으로 타 들어왔던 눌렀을 때 정상적으로
애니메이션이나 색깔이 조화를 이루는 것을 알 수가 있구요.
이제 그 다음에 가장 중요한 기본적인 색상을 한번 만들어 줄게요.
이제 이렇게
기본 색상의 는 칼날을 파이터로 만들어 줍니다.
mba 슌
기본 색상이라고 넣어줄게요. 이제 한번 새로고침 해 보시면 이런 식으로
기본적으로 다한 색깔이 된걸 알 수가 있구요.
굉장히 전체적으로 이제 나름 예쁜 디자인으로 바뀐 것 같은 느낌이 들
2조 커스터마이징 해서 이제 이렇게 완전히 하얀 색깔과 검은 색깔의
매치로 한번 만들어 보았습니다.
다만 이제 이런 경우에는 문제가 있는데요. 이렇게 화면에 줄었을 때는 이걸
눌렀을때 이제 색깔이 좀 이상하다는 걸 알 수 있어요.
이렇게 작은 화면 1 때는 정상적으로 이제 들었던 눌렀을 때 하얀 색깔과
검은색 걸로 바뀌지 않는 것을 알 수가 있죠.
이러한 문제는 미디어 쿼리를 좀 뜯어 야지 고칠 수 있는데요 보통 이제
부터 스트랩을 다룰 때 이런 부분이 조금 어렵다고 할 수 있습니다 이렇게
스텝 코드를 자신한테 만든 커스터마이징 코드로 바꿀 때 이런 식으로
반응형 웹 디자인 마다 바꿔 줘야 되기 때문에 약간의 어려움이 있을 수가
있지만 방법을 알고 나면 될 간단합니다 바로 다음 가재 주면 됩니다.
바로 이렇게 미디어 쿼리를 만들어 주는데요 일반적으로 이렇게 미디어
쿼리를 이용해서 바른 역 의 디자인을 만들 수가 있죠.
이렇게
757 픽셀의 보다 작은 화면에 대해서 즉 해상도가 작을 때 드랍 다운
아이템에 마우스를 올랐을 때 라고 함 해 주겠습니다.
이제 이런 경우에는 다음의 코드로 거칠 수가 있는 거죠.
이렇게 dport 이점
이제 오픈해서 출 합 다운의
메뉴에 이렇게 기본적인 색상은
하얀색 걸 해주고요 그 다음에 이제 이걸 그대로 복사 했어
각각의 아이템에 마우스 가 올라 같구나
포커스가 있을 때는
바로 다음과 같이 칼날을 b b b b b b 색깔로 바꿔 줄 수 있도록
합니다.
이제 한 번 새로고침 해 보시면 이렇게 각각 하얀 색깔과 회 색깔로
바뀌면서 정상적으로 출력이 되는 걸 알 수가 있구요.
상당히 디자인이 깔끔하고 괜찮게 느껴지죠.
이제 이런 식으로 완벽하게 네비게이션 파가 커스터마이징 됐다는 것을 알
수 있습니다. 자기가 원하는 색깔로 이제 이렇게 마음대로 색깔의 적용해서
바꿀 수가 있구요.
나중에 이러한 과정의 익숙해졌을 때 이제 부트스트랩 기본 템플릿을
이용해서 자신이 원하는 대로 마음대로 엄청나게 많은 디자인을 만들어낼 수
있는 것인가
아무튼 이렇게 이번시간은 간단하게 여부 스타일시트를 이용해서 전반적으로
자기가 원하는 형태의 디자인은 이렇게 커스터마이징 하거나 웹페이지
전체에서 사용되는 이런 내비게이션 바와 같은 컴퍼넌트를 전반적으로
디자인할 수 있는 방법에 대해서 공부하는 시간을 가져보았습니다. 결과적으로
이제 이렇게 네비게이션 파가 완성이 되었습니다.

댓글 0개

등록된 댓글이 없습니다.

Total 15건 1 페이지

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu