오늘 공부한 것 정리 (부트스트랩,emmet)

심심해서 웹 프론트엔드 디자인 공부를 해보았다..

emmet이라는 확장기능을 이용해보았는데 상당히 편리했다. html을 거의 반자동으로 짜주는듯하다

부트스트랩을 하면서 css 도 대충 배웠다. 굉장히 간단한 문법을 가진것 같다

 

emet

미쳤다 그냥 C++도 보일러플레이트 코드들은 이렇게 짜게 해두었으면 ㅠㅠ

나중에 vs 플러그인 개발에 대해 공부해야겠다..

.xxxx -> div 태그를 하나 만들어준다 class  xxxx

#xxxx -> div 태그를 하나 만들어준다 id 가 xxxx

>  -> 자식을 만들어준다?

+  -> 친구를 만들어준다?

{} -> 내용 추가

어떻게 html에서 뭐라고 하는지 잘모르겠다;;

<!--
ex) .container>.row>.col{hello}+.col{emmet}
예시로 보면 이해가 아주 쉽다
-->

    <div class="container">

      <div class="row">

        <div class="col">hello</div>

        <div class="col">emmet</div>

      </div>

    </div> 

 

css

1. 셀렉터

# -> id 셀렉터

.  ->class 셀렉터

* ->모든 요소 선택

 

emmet과 비슷하다.. 아니 emmet이 css랑 비슷한건가

 

2. 기본 형식?

요소 {/*어쩌고 저쩌고*/}

+) 요소1 요소2 {/*어쩌고 저쩌고*/}

이렇게 하면  요소1 안에 있는 요소2에 적용되게끔 한다

 

윽.. 설명 능력이 딸린다 자세한건 레퍼런스 참조

https://www.w3schools.com/cssref/css_selectors.asp

 

부트스트랩 

뭐 대충 느낀 바로는 자바스크립트랑 css 많이 사용하는 부분들을 묶어 놓은 프레임워크다

부스js는 jquery위에서 돌아간다고 jquery도 스크립트 소스로 추가해주어야한다

부트스트랩 홈페이지 가면 cdn 으로 잘나와있다. 복붙 ㄱㄱㄱㄱ

https://getbootstrap.com/ 

부스의 가장 큰 특징으로는 음.. 그냥 전부 다 클래스 박아주면 알아서 모양을 정해준다

굿굿 아주 편하다

 

아 그리고 레이아웃 짤때 그리드 시스템? 그런게 있는데 대충 화면width를 12등분 한걸 기준으로 삼는다고 보면된다

보통 레이아웃 짤때는

.container[-fluid]>.row>.col

이런식으로 짜는 듯하다 ㅋㅋ

또또 부트스트랩의 장점이라고하는 반응형 웹페이지... 고것은 html 메타태그에 뷰 포트를 설정 해줘야 한다(요것도 부스 홈페이지에 잘 나와있다.)

css도 뭐 마찬가지긴한데.. css로 할때는 미디어 쿼리라고 해서 화면 크기마다 @media 어쩌고 저쩌고{ 또 뭐라뭐라 } 이런걸 해야되는데 부스에서는 col-xs-5 이런 것들로 간단하게 할 수있으니 확실히 편한것 같다

 

생각해보니 아침엔 케라스 공부중이였는데 왜 저녁엔 웹디자인 공부가 되었는지 모르겠다....