1. goormide 사용 tip
- 좌측 상단의 goormide 텍스트 클릭 -> 테마변경 -> 커스텀 테마설정
-> 에디터 -> 모드 ->기본에서 Emmet 으로 변경 후 저장
*단축키를 이용해 빠르게 코딩이 가능
ex) section.section 을 입력하고 Tap키를 누르면 --> <section class = "section"></section>이 자동완성된다
ex) div.main>a.link+img.img ---> <div class="main"><a class="link"></a><img class="img"></img></div>
여기서 >는 자식관계를 나타내며 +는 형제관계를 나타낸다
2. Zeplin디자인 예제를 우리App에 옮기기
- Emmet으로 HTML코드 간단하게 구현
section.section>h1.title+h2.subtitle ---> +Tab
section.youtube>div.youtube-cover>a.youtube.link+img.youtube-icon ---> +Tab
- Zeplin디자인 예제를 참조하여 텍스트를 넣고 이미지파일도 다운받아 img폴더를 생성후 붙여넣고 img src경로를
지정해준다
(1).인공지능 동물상 테스트 여백 및 텍스트 CSS적용
- margin값을 주어 텍스트 간의 거리를 벌린다 약 100px정도
-텍스트의 CSS속성을 Zeplin에서 가져온다
-위 스크린샷의 margin값 조정과 CSS코드를 가져와서 goormide에서 구현한 모습
(2). 인공지능 동물상 테스트 반응형 디자인(폰트크기)
*tip)개발자도구에서 html태그를 클릭하고 하단의 elemet-style을 임의로 조정하여 미리보기를 할 수 있다
- 화면이 600px 미만으로 작아질때 웹페이지의 최상위 html태그 하위의 모든 font-size를 임의로 조정해본다
- 10px을 적정값으로 생각해둔다
* tip)개발자도구에서 태그를 찾아서 styles창의 Filter검색을 통해 원하는 style속성을 찾을 수 있다
* 모든 글씨는 html 태그 아래에 있어 기본적인 영향을 받고
rem은 문서의 최상위 요소 즉 html 요소의 크기의 몇배인지를 나타내는 font-size단위이다
- 화면을 600px미만으로 작게만들어보고 html태그의 font-size가 10px일때 동물상테스트의 텍스트font-size를 2rem으로 생각해둔다
- @media(max-width : 600px)일때 즉 최대넓이가 600px이하 일때 적용할 CSS를 위에서 생각해둔대로 코드구현한다
(3). By 조코딩유튜브채널[유튜브이미지] 텍스트와 이미지를 우측 끝에 위치 시키는법
*css의 기술인 flex를 사용(자세한 내용은 생활코딩 css 참조)
- BootStrap에서 Flex를 검색후 자식들을 오른쪽에 위치시키는 기능을 가진 flex와 관련된 클래스를 가져온다
- 클래스만 가져와도 기능은 BootStrap에 구현되어 있기에 우리의 App에서 사용할 수 있다
