본문 바로가기

HTML+CSS+Javascript/CSS38

4. 박스 스타일 모든 html 태그는 하나의 박스로 구성되어 있다. 이 투명한 박스에 선, 색, 테두리, 여백 등을 입히면 박스 형태가 보인다. - 박스의 구성 박스는 다음과 같이 구성되어 있다. 컨텐츠 : 텍스트나 이미지 부분 패딩 : 컨텐츠를 둘러싼 내부 여백 테두리 : 패딩 외부를 외각으로 둘러싼 선 여백 : 테두리 바깥의 공간 박스의 색과 크기를 제어한 예시는 다음과 같다. DIVDIVDIV background는 컨텐츠와 테두리 사이까지의 색을 지정하는 프로퍼티이다. border은 width, color, style의 세부사항이 있는데, width는 테두리의 넓이, color은 색, style은 모양을 지정할 수 있다. solid가 기본형이며, dotted는 점선 등, 테두리의 모양을 지정할 수 있다. paddi.. 2020. 3. 9.
3. 색과 텍스트 꾸미기 - 색 CSS는 주로 색이름, HEX코드(16진수), RGB코드(10진수)로 색 이름을 표현한다. 색 이름으로 표현하는 것은 140여개로 한계가 있으므로, 주로 이용하는 방법은 HEX 코드 방식이다. deepskyblue(#00BFFF) brown(#A52A2A) fuchsia(#FF00FF) darkorange(#FF8C00) darkcyan(#008B80) oliverab(#6b8e23) 다음과 같이 HEX 코드, 색 이름 둘 다 색 출력이 가능하다. -텍스트 텍스트에 주로 사용되는 프로퍼티는 다음과 같다. text-indent : 들여쓰기 text-align : 정렬 text-decoration : 텍스트 꾸미기 텍스트 꾸미기 HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백.. 2020. 3. 9.
2. 셀렉터 셀렉터는 HTML 태그의 모양을 꾸미는 스타일 시트를 선택하는 기능이다. 간단한 CSS의 형태를 보면 h3{color:brown;} 이런 CSS 스타일은 이후 html의 h3 모든 태그에 영향을 준다. 이렇게 h3처럼 선택적으로 태그를 선택하게 하는 것을 셀렉터라고 한다. 다음 html로 셀렉터를 파악해보자. Web Programming 2학기 학습 내용입니다. HTML5 CSS JAVASCRIPT 60점 이하는 F 1. 태그 이름 셀렉터 태그 이름 셀렉터는 태그 이름이 셀렉터로 지정되는 방식이다. h3,li{color: brown;} 아래와 같이 적용된 곳은 h3와 li의 자식값들 뿐이다. 이 때, ,(콤마)를 사용하면 두개 이상의 태그를 한번에 지정할 수 있다. 2. class 셀렉터 셀렉터를 cla.. 2020. 3. 5.
1. CSS3 기초 CSS는 cascading style sheet의 약자로 그 중 현재 사용하고 있는 것은 CSS level 3이다. 이를 축약해서 CSS3라고 지칭한다. CSS는 이름 그대로 웹페이지의 스타일을 담당하는 언어이다. 스타일 시트에서 주로 사용하는 기능은 다음과 같다. 색상과 배경 텍스트 폰트 박스 모델 비주얼 포맷 및 효과 리스트 테이블 사용자 인터페이스 css 언어는 다음과 같이 구성된다. 셀렉터{ 프로퍼티 : 값; 프로퍼티 : 값; } 셀렉터에는 HTML 태그를 넣는다. 셀렉터가 지정되면 그 셀렉터만 {}(스타일시트 블록) 내부의 스타일 시트가 적용된다. 프로퍼티는 값과 쌍으로 표현되며 ;로 분리된다. 다음이 헤더 내의 CSS가 적용된 예시문이다. CSS스타일 맛보기 나는 웹 프로그래밍을 좋아한다. 2.. 2020. 3. 5.
반응형

티스토리툴바