본문 바로가기

전체 글556

5. 배경 여태까지는 배경에 background-color을 이용해 색을 입히는 것만 했지만, 이미지를 제공하는 것 역시 가능하다. 이 때 사용하는 속성이 background-image이다. 배경이미지도 html에서 불러올때와 마찬가지로 url 혹은 경로를 지정하여 참조할 수 있다. 배경에도 다른 CSS와 마찬가지로 여러 프로퍼티가 존재한다. background-position : 배경이미지 위치 background-size : 배경이미지 크기 background-repeat : 반복출력 이를 이용한 예시를 보자. 박스에 배경 꾸미기 SpongeBob is an over-optimistic sponge that annoys other characters. background-size 프로퍼티를 통해 배경으로 쓰인 .. 2020. 3. 9.
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.
반응형

티스토리툴바