style 마무리 소스코드 login.css red, blue, green, opcity 순으로 값을 주어 배경 색 지정 배경색을 투명하게 지정 music.css volume.css 또는 속성을 통해 기본 CSS 스타일을 사용하지 않겠다고 선언해야만 위와 같은 CSS 스타일링을 반영할 수 있습니다. 그렇지 않으면 맨 기본적인 처럼 보이게 됩니다. clock.css todo.css backGround.css quote.css 소스코드 login.css music.css volume.css clock.css todo.css backGround.css quote.css

position 속성 CSS에서 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정한다. 속성은 요소의 정확한 위치 지정을 위해서 , , , 속성과 함께 사용된다 position: static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용된다 요소들이 HTML에 작성된 순서대로 브라우저 화면에 표시가 된다. 따라서 , , , 속성값은 속성이 ****일 때는 무시된다. 위 결과를 보면 작성된 순서대로 배치 되는걸 볼 수 있다. position: relative position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 된다. 요소의 위치 지정은 , , , 속성을 이용해서 요소가 원래 위치에 있을 때의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다. position: absolute 속성이 일 때 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾는다. 부모 요소(가장 가까운…

css box-model (1) box-model 이란? 모든 HTML의 요소는 box 모양으로 구성되어 있습니다. 박스모델은 content, padding, border, margin으로 구성되어 있습니다. 구성요소 : 텍스트나 이미지를 포함하는 실질적인 내용을 포함하는 부분 : content(내용)과 border(테두리) 사이에 위치하는 내부 여백 부분 : padding(패딩)과 margin(마진) 사이에 위치하는 테두리 부분 : 가장 바깥쪽에 위치한 외부 여백 부분 width와 height 속성 css에서 width와 height 속성을 설정할때에 가르키는 부분은 content(내용) 부분만을 가르킨다. 다른 부분인 padding, border, margin은 포함되지 않는다. width 속성 위의 코드를 실행해 보면 div태그의 길이가 body 전체의 길이를 갖는걸 볼 수 있다. width에 50%의 값을 할당하게 되면 div 태그의 길이가 절반이 되는걸 볼 수 있다…

border 속성 css에서 border에 제공하는 속성은 다음과 같습니다 dotted: 테두리를 점선으로 설정합니다. dashed: 테두리를 약간 긴 점선으로 설정합니다. solid: 테두리를 실선으로 설정합니다. double: 테두리를 이중선으로 설정합니다. groove: 테두리를 3차원인 입체적인 선으로 border-color에 영향을 받습니다. ridge: 테두리를 3차원인 능선효과가 있는 선으로 설정하며 border-color에 영향을 받습니다. inset: 테두리를 3차원인 내지로 끼운 선으로 설정하며 border-color에 영향을 받습니다. outset: 테두리를 3차원인 외지로 끼운 선으로 설정하며 border-color에 영향을 받습니다. none: 테투리를 없앱니다. hidden: 테투리는 존재하지만 보이지 표현하지 않습니다. border-width 속성 테두리의 두께를 설정합니다 px, em, cm등과 같은 css 크기 단위를 이용해 두께를 직접 설정 할 수 …

margin 속성 에 대해서 은 (테두리)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 결정한다 은 과 달리 속성으로 설정하는 배경색의 영향을 받지 않는다 를 사용해 영역의 크기를 방향별로 지정할 수 있다. 에서 제공하는 속성은 다음과 같습니다. 의 값을 음수로 지정해 해당 요소를 다른 요소의 위에 겹치게 할 수 있습니다. 위에 코드를 실행하게 되면 에 을 할당해서 서로 겹치는걸 볼 수 있다 inherit 속성 에 속성을 적용해 부모인 의 margin-left 속성을 물려받는다. margin의 개별 설정 속성이 4개일때 위 코드의 적용순서와 의미는 다음과 같다 margin-top: 10px margin-right: 20px margin-bottom: 30px margint-left: 40px 속성이 3개일때 위 코드의 적용순서와 의미는 다음과 같다 margin-top: 10px margin-right: 20px margin-bottom: 30px margint-l…