2020/12/23 3

header 메뉴바 부분 예제

Personal Open Source Business Explore body { margin: 0; padding: 0; } .header { background: white; border-bottom : 1px solid lightgray; /*밑줄선으로 1px 두께에 그냥줄로 빨간색으로 하겠다*/ } .container { width: 980px; margin: auto;/*화면 중앙으로 이동해줘*/ } .container-left { padding-top : 20px; /*padding은 최상위 요소에서 고치는것보다는 당장 효과를 봐야하는 작은 요소에서 설정하는것이 좋다*/ padding-bottom : 20px; } .logo { float: left; margin-right : 5px; } .l..

HTML & CSS/기초 2020.12.23

CSS 기본 문법 & 선택자의 역할

1. CSS 기본 문법 CSS문법은 HTML보다 더 쉽다. 아래 예시처럼 선택자, 속성, 값이 있으며 무엇을 의미하는지 이해하는 것으로 문법은 충분하다. div{ font-size : 20px; color : red; } /*다음과 같이 이해할 수 있다.*/ 선택자{ 속성 : 값; 속성 : 값; } 2.선택자의 역할 선택자는 HTML에 스타일(CSS)을 적용하기 위해서 HTML의 특정한 요소를 선택하는 사인이다. 적용할 스타일을 속성(color)과 값(red, blue)으로 나타내고 적용할 대상(h1, p)을 선택자로 나타낸다. 제목.. 본문.. h1 { color: red; } p { color: blue; } /*빨강 글자색(CSS, color: red;)을 저기 제목(HTML, )에 적용하겠어!” ..

CSS/기초 2020.12.23