CSS/실습 환경 3

emmet 문법

emmet을 사용하게 되면 쉽고 빠르게 코딩 할 수 있도록 도와준다. 1. 클래스 이름과 태그 이름을 한꺼번에 쉽게 작성하는 방법 ---> ex) ul.list입력후 탭키를 누르면 자동으로 다음과 같이 코딩이 된다. 2. 복잡한 코드도 가능하며, 자식요소도 한꺼번에 한줄로 설정할 수 있다. --> ex) container라는 클래스이며, 자식요소로 ul태그인데, ul태그는 list클래스이름을 가지고, 그 자식요소로 li태그로 list-item이라는 이름을 가지고, 그 li태그는 총 10개이며 li태그의 자식요소로는 a태그가 들어있고, a태그의 텍스트로는 list숫자를 붙히도록 하겠다 .container>ul.list>li.list-item*10>a{list$} 입력후 탭키를 누르면 자동으로 다음과 같이 ..

CSS/실습 환경 2021.01.08

Codepen

코딩작업할때, 이미 body태그가 있다고 가정하기 때문에 body태그를 입력하지 않고 시작해도 된다. 그리고 html, css, javascript가 세팅이 되어있기 때문에 개발 환경을 따로 준비하지 않아도된다. Codepen의 장점 1. 개발환경을 세팅하지 않아도 된다. 2. 로그인되어있으면 작업한 코딩을 저장하고 또 쓸 수 있다. 3. html, css, javascript를 세팅을 통해서 외부 라이브러리 들고 오지않고도 실행 가능하게 만들었다. 4. 소스코드 제목도 쉽게 지정 가능하다.

CSS/실습 환경 2021.01.08

CSS Reset

body { margin : 0; padding : 0; } .box{ width : 300px; height : 150px; background : tomato; } 스타일링을 했을때 여백 설정하지 않아도, 알아서 여백 공간이 생긴다. 만약 이 여백을 없애고 싶으면 다음과 같이하면 된다. 이러한 초기화 과정을 reset-css로 이용해 보겠다. reset-css 사이트에 들어가서 html코드 복사후 붙혀넣기를 하는데, 우리가 기존에 사용하던 CSS연결 코드보다 위에 있어야 한다. 이건 반드시 그래야 한다. 이렇게 하면 아까전에 번거롭게 CSS에서 초기화 하지 않고도 모든 태그 기능들이 초기화가 되어 버린다. 이것은 모든 브라우저가 제공하는 스타일을 없애고 내가 만드는 스타일로 새롭게 채워넣겠다 라는 뜻..

CSS/실습 환경 2021.01.08