본문 바로가기

뒷북 정리 (국비 교육)/css15

[css] step03~05. margin / padding / border step03. margin 앞으로 step05. border 까지 이 두 가지 그림을 기억하면 된다. 이 css들은 margin, padding, border를 앞에 쓰고, - (dash)와 함께 top, bottom, left, right를 뒤에 써서 작성한다. (ex - margin-top) 버튼 버튼1 버튼2 버튼3 버튼4 버튼5 버튼6 버튼7 버튼8 margin은 content를 둘러싸는 boundary의 외곽을 말한다. 'margin-위치' 의 방식으로 사용한다. top, bottom, left, right를 모두 작성하는 것은 번거로운 일이다. 때문에 한 줄에 나열할 수도 있다. 이때 순서는 top, right, bottom, left 순서이다. (clockwise or 판굿 반대 방향) 한 .. 2021. 12. 13.
[css] step02. selector (선택자) step02. - 01~06 selector (선택자) div1 div2 div3 div4 div5 어떤 항목의 css를 작성할지, 그것을 결정하는 위치가 바로 selector(선택자)이다. element(요소)가 될 수도 있고, id가 될 수도 있고, class가 될 수도 있다. 요소의 경우는 그대로 작성하면 된다. 작성한 요소에 해당하는 모든 곳의 css에 적용된다. id의 경우 앞에 #을 붙여서 작성한다. id는 유일하기때문에 해당하는 곳에만 css가 적용된다. class의 경우 앞에 .을 붙여서 작성한다. class는 일종의 group이기 때문에, 해당 class의 모든 곳에서 css가 적용된다. Dog Lorem ipsum dolor sit amet, consectetur adipisicing .. 2021. 12. 13.
[css] step01. css란? step01. apply css [외부 css] @charset "utf-8"; /* 한글을 이상한 문자열로 인식하지 않도록 방지 */ /* html 페이지에서 요소 안에 작성하는 문법과 같다 */ p{ border: 1px solid red; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, consequuntur, consectetur doloribus qui ea perferendis alias. Dolorem aliquam optio mollitia commodi nostrum voluptas neque ut voluptatem enim aspernatur, aut eligendi. css에는 세 종류가 있다. Lorem ipsu.. 2021. 12. 13.