본문 바로가기

CSS

CSS 마진 Margin 마진에는 top, right, bottom, left가 있다.요소의 각 측면은margin-topmargin-rightmargin-bottommargin-left로 지정할 수 있다. 모든 마진 속성은 다음 값을 가질 수 있다.auto - 브라우저가 마진을 계산한다.length - px, pt, cm 등으로 마진 지정% - 포함하는 요소의 너비에 대한 마진을 %로 지정inherit - 부모 요소로부터 상속되어야 하는 마진을 지정 음수 값 허용됨 상하좌우에 다른 마진 설정margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; margin - shorthand 속성하나의 속성에 모든 마진 속성을 지정할 수 있다. 위에서 각..
CSS 테두리 Borders border 속성은 요소의 테두리의 스타일, 너비, 색을 지정할 수 있게 해준다.border-style 속성은 테두리의 모습을 지정할 때 쓰인다. 근데 보통 solid로 쓰는 것 같다. A dotted border.A dashed border.A solid border.A double border.A groove border. The effect depends on the border-color value.A ridge border. The effect depends on the border-color value.An inset border. The effect depends on the border-color value.An outset border. The effect depends on the bo..
CSS 배경 Background background properties background-color background-image background-repeat background-attachment background-position 배경색body { background-color: lightblue; } 배경 이미지요소의 배경으로써 이미지를 특정한다. 기본적으로 이미지는 반복되며, 전체 요소를 덮는다.body { background-image: url("paper.gif"); } 배경 이미지 - 수평적 또는 수직적 반복background-image 속성은 이미지가 수직, 수평적으로 반복된다. 어떤 이미지들은 오직 수직 또는 수평적으로만 반복되어야 한다.background-repeat:repeat-x는 x축으로 반복, repeat..
CSS 색 Colors 미리 정의된 색상 이름을 사용하여 색을 지정하거나 RGB, HEX, HSL, RGBA, HSLA 값을 사용하여 지정한다. HTML에서 색상 이름을 사용하여 색을 지정할 수 있다.Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGrayTomatoOrangeDodgerBlueMediumSeaGreenGraySlateBlueVioletLightGray 배경색Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutp..
CSS 사용법 How to 브라우저가 스타일 시트를 읽을 때, 브라우저는 스타일 시트에 있는 정보에 따라 HTML 문서를 포맷할 것이다. CSS 삽입하는 3가지 방식1. 외부 스타일 시트 2. 내부 스타일 시트 3. 인라인 스타일 시트 1. 외부 스타일 시트하나의 파일을 변경함으로써 웹사이트의 전체적인 모습을 바꿀 수 있다.각 페이지는 반드시 요소 안에 외부 스타일 시트를 참조해야 한다. 요소는 섹션에 들어간다. 외부 스타일 시트는 아무 텍스트 에디터에서 쓰여져도 된다. 파일은 html 태그를 포함하지 않아야 한다. 파일은 .css 확장자로 저장되어야 한다.속성의 값과 단위 사이에는 띄어쓰기가 없어야 한다. 20 px; (X) -> 20px; (O) 2. 내부 스타일 시트단일 페이지가 유일한 스타일을 가질 경우 사용될 수 있다. ..
CSS 문법 Syntax selector는 html 요소를 가리킨다. declaration block은 세미콜론으로 구분된 하나 이상의 선언을 포함한다.각 선언은 콜론으로 구분된 CSS 속성 이름과 값을 포함한다.선언은 항상 세미콜론으로 끝나고 선언 블록은 중괄호로 둘러싸인다. p태그에 있는 글자는 빨간색이고 가운데 정렬된다.p { color: red; text-align: center; } id selector아이디는 페이지에서 유일해야한다. 유일한 요소를 선택하고 싶은 경우 id 선택자를 쓴다. #을 써서 특정 id를 선택할 수 있다.#para1 { text-align: center; color: red; } class selector특정 클래스 속성으로 요소들을 선택할 수 있다. 특정 클래스를 선택하려면 . 을 사용한다....
오버플로우 overflow 박스의 배경 색은 박스의 높이만큼 설정된다. 박스의 높이는 자식의 높이로 설정되어 있다. 부모의 높이를 바꿔도 자식의 높이는 유지된다. 자식이 부모의 영역을 넘어섰다.overflow의 값에는 auto, hidden, inherit, scroll, visible(기본)이 있다. hidden을 설정하면 부모의 높이만큼만 자식이 보이게 된다. 즉, 자식이 overflow된 자식이 hidden 되는 것이다. scroll 설정을 하면 스크롤이 생겨서 가려진 부분까지 볼 수 있게 된다. 1234567891011 Colored by Color Scriptercs 12345678body{ background-color:antiquewhite;}.box{ background-color:white; overflow:scr..
상속 inheritance a 태그의 색을 blue로 바꾸고 싶은데 모든 a 태그의 색이 blue가 되는 건 원치 않을 경우자식 color 속성에 inherit을 줘서 부모의 색깔을 상속받을 수 있다. 1234567891011121314151617 hi hello !!! Submit nice to meet you! Colored by Color Scriptercs 12345678910111213141516171819202122232425262728293031body{ background-color:whitesmoke;}.box{ color:orangered; font-family: "Times New Roman", Times, serif;}a{ color:inherit;/*부모 font-color 상속*/ text-decorati..

티스토리툴바