background-color 속성 HTML 문서에 배경색 변경을 위해서는 background-color 속성을 사용하면 됩니다.  배경 지정은 body 태그뿐만이 아닌 일반적인 텍스트 태그 및 기타 태그에도 적용이 되며, 16진수 방식이나 rgb 코드 색상 컬러 문자열 등을 지정해서 사용할 수 있습니다. background-color 예제 < style >     . conainer     {                     background-color : blueviolet ;                 } </ style > </ head > < body > < div class =" container ">     </ div > </ body > 배경 적용 범위 background-clip, background-origin 속성 background-color 속성을 이용해 배경색을 지정했을 때, 적용되는 배경 색의 적용 범위를 박스 모델 관점에서 조절하고 싶을 때 background-clip 속성을 사용하면 됩니다.  밑에서 알아볼 background-image 속성을 사용한 경우에는 background-origin 속성을 사용해서 적용 범위를 지정 할 수 있으며 속성값 리스트는 clip과 같습니다. background-clip, background-origin 속성값 리스트 속성값 내용 border-box 박스 모델에서 테두리영역 까지 적용(기본값) padding-box 박스 모델에서 padding 영역까지 적용 content-box 박스 모델에서 콘텐츠 영역까지 적용 background-image 속성 단순한 배경색이 아닌 이미지 파일을 배경으로 지정하고 싶을 때는 background-image 속성을 사용하면 됩니다.  파일은 로컬 파일 경로를 지정해서 사용이 가능하고, 이미지 파일의 url을 넣어 인터넷상에 있는 이미지 파일을 사용할

HTML 태그 위치 지정 top, right, bottom, left 속성 HTML 태그에서 기준이 되는 자리 위치에서 네 방향을 기준으로 원하는 위치로 태그 위치를 이동시킬 수 있으며, 단위로는 px 등을 지정하여 px 만큼 떨어진 위치에 지정하는 방식입니다. 속성 설명 top 태그 기준 위치로부터 위쪽으로 지정한 숫자 만큼 이동 right 태그 기준 위치로부터 오른쪽으로 지정한 숫자 만큼 이동 bottom 태그 기준 위치로부터 아래쪽로 지정한 숫자 만큼 이동 left 태그 기준 위치로부터 왼쪽으로 지정한 숫자 만큼 이동 HTML 태그 배치 방식 지정 postion 속성 position 속성을 사용하면 HTML 태그를 원하는 방식으로 배치할 수 있게 배치 방식을 변경할 수 있습니다.  원하는 위치에 고정시킨다던가 웹문서 흐름에서 벗어난 배치도 가능합니다. 속성값 설명 static 원래 문서 흐름 상 배치(기본값) relative 방향 위치 속성을 사용해 위치를 조절이 가능하다는 것을 제외하면 static과 동일한 기능 absolute relative로 지정한 상위 요소를 기준으로 자신의 위치를 지정 fixed 웹 브라우저를 기준으로 방향 위치 속성을 사용해 배치 결정. 위에서 설명한 top, right, bottom, left의 위치 속성을 사용하기 위해서는 position 속성 값을 static이 아닌 다른 속성값(relative, absolute, fixed)으로 지정한 후 원하는 방향의 속성을 사용해 지정해서 HTML태그의 위치를 변경 시킵니다. ``` ``` postion 및 방향 위치(top, right, bottom, left) 속성 예제들 이미지 위에 HTML 태그의 위치 변경 예제 HTML 태그 및 기본 CSS 작성 움직이려는 태그(h1)의 상위 요소 position : relative 속성 지정 움직이려는 태그 position : absolute 속성 지정 이동을 원하는 방향의 속성과 함께 거리만큼 속성값 지정   < style

display 속성으로 block, inline 요소 변환하기 이전에 박스 모델에 대해 정리한 글에서도 말씀드렸다시피 HTML 요소는 각기 고유의 박스 모델을 가지고 있습니다.  태그에 따라 블록 레벨 요소 태그와 인라인 레벨 요소로 구분되어 부여됩니다.  이렇게 기본값으로 부여된 박스 모델 레벨을 display 속성을 사용하면 변환이 가능 합니다.  즉 block 레벨 요소 태그를 inline 레벨 요소 태그로 바꿀 수 있으며 그 반대로도 가능 합니다. CSS 블록 레벨 요소 인라인 레벨 요소 차이점 CSS display 속성값 중 레이아웃에 쓰이는 속성값 속성값 설명 block inline 요소 -> block 요소로 변환 inline block 요소 -> inline 요소로 변환 inline-block inline 요소와 block 요소의 속성을 모두 가지고 margin과 padding 지정 가능 none HTML에서 표시되지 않게 함. display 속성을 사용한 HTML 가로 메뉴 구현 예제 < style >   * {     box-sizing : border-box ;   }   ul   {     list-style-type : none ;           }   li   {     margin : 0 15px ;     padding : 30px ;         border : 2px double black ;         display : inline-block ;             } </ style > </ head > < body >   < ul >     < li > 홈 </ li >     < li > 생산 </ li >     < li > 구매 </ li >     < li > 회계 </ li >     < li > 재무 <

margin 속성 사용법 magin 속성은 HTML 요소의 맨 마지막 단계의 여백으로 콘텐츠와 콘텐츠 간의 간격을 의미합니다.  margin 속성을 이용해 HTML 태그 간의 간격 및 여백을 지정할 수 있으며 HTML 문서 디스플레이 구성에 중요한 역할을 하는 속성입니다. margin 속성값 속성값 설명 크기(px, em) 직접적으로 margin 속성의 크기를 px 및 em 단위로 입력해서 지정 백분율 퍼센트 값을 지정할 경우 자기 자신의 부모요소의 크기를 기준으로 크기가 지정되게 됩니다. auto display 속성 값에 따라 적절한 크기로 자동 지정됩니다. HTML 문서 가독성을 위한 전체 페이지 가운데 정렬 시키기 HTML 문서는 기본적으로 좌측 정렬이 됩니다. 요즘에는 HTML 문서의 가독성을 위해 가운데 정렬하는 경우가 많은데요. 이때 margin 속성을 사용해 HTML 문서 전체의 가운데 정렬할 수 있습니다.  아래의 예제에서는 전체 문서의 위, 아랫부분의 여백을 15px 간격을 띄우고, 가운데 정렬 시킬 수 있습니다. body 태그 하위에 전체 문서의 최상위 시맨틱 태그 or div 태그 선언 선언된 최상위 태그의 너비(width)를 지정. margin 속성값의 좌우에 해당하는 값을 auto로 지정. < style >             main     {         width : 768px ;         margin : 15px auto ;         background-color : # 32877b ;         color : white ;     } </ style > </ head > < body > < main >     < h1 > margin 속성 이용 HTML 문서 전체 가운데 정렬 예제 </ h1 >     < p > Lorem ipsum dolor sit amet, consectetur adipisicing eli

CSS 스타일 적용되는 방향 지난번 HTML 태그에 스타일이 적용될 때, 박스 모델 단위로 적용된다고 정리했었는데, 상하좌우에 적용되는 스타일을 각기 다르게 적용할 수 있습니다.  상하좌우의 값 구분은 공백으로 구분을 해주고, 속성값을 4개 모두 입력했을 경우와 3개 그리고 2개를 입력한 경우 적용되는 방향에 차이가 있으니 아래의 내용을 확인하시기 바랍니다. CSS 속성값 갯수에 따른 적용 방향 CSS 속성값 1개 입력 했을 경우 - 4방향 모두에 동일한 속성값으로 적용됨. CSS 속성값 2개 입력 했을 경우 - 첫번째 속성값은 위,아래 방향에 적용되고 두번째 속성값은 좌우에 적용됨. CSS 속성값 3개 입력 했을 경우 - 입력 순서대로 상 ->  우 -> 하 의 순서로 적용되고 왼쪽은 오른쪽 속성값과 동일하게 적용됨. CSS 속성값 4개 입력 했을 경우 - 입력 순서대로 상 -> 우 -> 하 -> 좌 의 순서로 적용 됨. 테두리 선 스타일 지정 지난번 HTML 테이블 태그의 스타일 지정에서도 알아본 테두리의 선 스타일은 HTML의 표뿐만 아니라 일반적인 요소에도 지정할 수 있습니다. CSS의 border-style 속성을 사용하면 됩니다. border-style 속성값 속성값 설명 none 테두리 선을 없앴니다. border-style 속성의 기본값 solid 일반적인 실선 dotted 일반적인 점선 dashed 짧은 직선 모양의 점선 double 테두리 선을 이중선으로 표시 groove 테두리가 조각낸 모양으로 파인 듯한 느낌 ridge 테두리 선이 입체감 있게 튀어나온 느낌 border-style 예제 border-style에 속성값을 공백으로 구분하여 입력시 박스 4방향을 다른 스타일로 지정할 수 있으며, 그 순서는 top -> right -> bottom -> left 순서입니다. < style >         body   {     width : 1920px ;     height :

블록(Block) 요소와 인라인(Inline) 요소의 정의와 차이점 블록 레벨 요소 는 콘텐츠 태그가 문서의 한 줄을 다 차지하는 것 을 말합니다. 별도의 너비를 지정하지 않을 경우 문서 너비의 100%를 다 차지하는 요소입니다. 블록 레벨 요소로 한 줄을 다 차지하는 HTML 태그로는 h1부터 시작하는 Heading 태그 들과 태그들을 구분 짓는 div 태그 문단을 구성하는 p 태그 등이 있습니다.  인라인 레벨 요소 는 블록 레벨 요소와 달리 한 줄을 차지하지 않고, 태그에 명시된 콘텐츠의 크기만큼만 자리를 차지하는 요소 입니다. 대표적인 인라인 레벨 요소 태그로는 span 태그와 img 태그 등이 있습니다. 블록레벨 요소는 한칸을 다 자치하고, 인라인 레벨 요소는 콘텐츠의 길이만큼만 차지합니다. 블록 레벨과 인라인 레벨 차이 예제 < body >       < h1 > 대표적인 블록레벨 헤딩 태그 </ h1 >   < p > 블록레벨 요소는 콘텐츠 길이와 상관없이 너비 100%를 차지합니다. </ p >   < div > 영역 구분 div태그도 블록레벨로 한줄을 다 차지합니다. </ div >   < br >< br >< br >   < span > 인라인 요소는 콘텐츠의 양만큼만 너비를 </ span >   < span > 차지합니다. 그러므로 태그가 여러개 여도 </ span >   < strong > 모두 한줄에 표시됩니다. </ strong > </ body > 박스 모델 구성요소 마진, 테두리, 패딩 CSS는 HTML 태그 요소들을 박스 단위로 구분하여 스타일을 지정하게 됩니다.  이것을 박스 모델이라고 하며, 박스 모델의 구성요소 에는 태그의 콘텐츠가 포함된 콘텐츠 영역, 콘텐츠 영역 과 박스 사이의 여백 패딩(padding) 그리고 박스 테두리(bo

테이블 제목 위치 지정 caption-side 속성 HTML 태그로 표를 작성할 때 table 태그를 사용하며, table 태그 하위에 caption 태그로 표 제목을 지정할 수 있습니다. 이때 표 제목의 위치는 기본값으로 위에 표시됩니다만 표 제목을 아래에 위치시키고 싶을 경우 caption-side 속성을 사용하면 됩니다. caption-side 속성 기본형 caption-side : top | bottom 표 테두리 스타일 border 속성 표 테두리의 스타일 변경이 필요할 때는 border 속성을 사용하면 됩니다. border 속성은 표 이외에도 다양한 곳에 사용됩니다.  기본적으로 HTML의 table 태그로 그려진 표의 테두리는 외부 테두리와 내부 테두리로 표현이 됩니다. 외부 테두리는 table 태그에 스타일 지정해 주면 되고, 내부 테두리는 td, th 태그에 지정해 주면 됩니다. border 속성 기본형 border : <테두리 굵기> <테두리 모양> <테두리 색> border 테두리 속성값 리스트 속성값 설명 none 테두리 표시 안함.(단 주변에 의해서 그려질 수 있음.) hidden 테두리 표시 안함.(강한 우선순위로 표시되지 않음.) dotted 테두리가 점선으로 표현 dashed dotted 보다 길게 표현되는 점선 solid 테두리가 직선으로 표현 double 테두리가 두 선으로 표현 groove 테두리가 파인 듯한 모양으로 표현 ride 테두리가 튀어나온 듯한 모양. inset 테두리가 파인 듯한 모양으로 표현. boder-collapse의 값에 따라 차이가 있음. outset 테두리가 튀어나온 듯한 표현. boder-collapse의 값에 따라 차이가 있음. border 속성 사용 예제     < style >         table     {         border : 2px solid gray ;         caption-side : bottom ;         }