![]()
Box Model1. 개념HTML 의 각 요소들은 모두 사각의 박스 형태를 가지는데, 이 박스를 표현하기 위해 지정하게 되는 여러 요소들HTML 의 몇몇 태그들은 배경색이 없고, 테두리가 없어서 박스처럼 보이지 않을 뿐이다content내용border테두리margin 테두리를 기준으로 바깥쪽 여백padding 테두리와 content 사이의 안쪽 여백 2. 속성width:, height:width:, height: 속성이 지정하는 크기 == content 의 크기border:테두리 표현박스의 기준이 되는 바깥 테두리 선width:(두께), style:(형태), color:(색상)를 적용 가능색상을 지정하지 않으면, 해당 요소의 글자색과 같은 색이 적용 margin: 테두리 바깥 여백 border 기준..
배경(background) 스타일1. 개념배경에 관련된 여러 가지 속성을 포함한다background 속성은 아래의 여러 속성 들을 지정할 수 있다한 요소에 여러 개의 배경 이미지를 적용할 수 있다.bg { width: 600px; height: 400px; border: 3px solid; background: url(img/bg_a.png) no-repeat 0 0, url(img/bg_b.png) no-repeat 100% 0, url(img/bg_c.png) no-repeat 0 100%, url(img/bg_d.png) no-repeat 100% 100%, url(img/bg_e.png) no-repeat 40px 40px;} 2. 속성background-color :색상red, rgba(..
CSS 셀렉터1. 개념CSS 에서 꾸밀 대상, 즉 속성을 줄 대상 2. 종류 **** : 전체 선택자tag : 태그 선택자.class : 클래스선택자#id : 아이디선택자선택자:가상상황 : 가상선택자 CSS 기본 셀렉터태그 이름으로 접근한다 h1 { ... } /* 태그의 속성을 지정한다 */ 예시 body CSS 자식 셀렉터 ( > )> : 자식 셀렉터, HTML 태그의 계층 구조를 표현한다 p > div > fieldset > #pwd {......}/* p태그 안의, div태그 안의, fieldset태그 안의, id가 pwd인 태그 */ CSS 후손[자손] 셀렉터 ( ) (공백)후손 셀렉터는 태그의 계층 관계를 나타낸다자식 셀렉터와 다르게, 명시과정에서 ..
![]()
CSS(Cascading Style Sheets)1. 개념웹페이지에 자주 적용되는 부분들은 미리 정리하고 조합하여 정의한 후 페이지 부에서 필요할 때마다 해당 부분을 적용하는 스타일시트 중 하나HTML로는 부족한 레이아웃이나 폰트 등에 다양성을 부여한다 2. 특징폰트 크기는 지정하는 수치에 따라 마음대로 조절 가능 자간/행간 배치가 자유로워 가독성을 높인다링크 상의 밑줄 변형이 자유롭다페이지의 여백을 원하는 만큼 만들어 줄 수 있다 3. CSS 기본 문법단일 속성 지정selector(선택자) { property(속성) : value(값) ;} 다중 속성 지정selector(선택자) { property(속성) : value(값) ; property(속성) : value(값)..
