블럭 요소의 수직 마진 공유 특성. 중첩되는 수직 마진은 서로 상쇄되어 하나의 마진으로 공유된다.수직마진이 서로 다른 경우 중첩되어 상쇄되는 특징으로 인해,마진이 큰 쪽으로 수렴되어 통합된다.부모요소와 자식관계의 수직 마진을 지정시에부모요소 안에 자식 요소안에 배치되는데 수직 마진이 서로 닿지 않는 경우서로 공유 되지 않았음을 확인 할 수 있다.point ! 블럭 요소의 마진이 서로 맞닿는가 ?  2) 경우 두 박스를 동일 마진을 줌으로써 , 중간에 맞닿은 마진 부분이 상쇄되어 마진이 10px 20px 10px 로 보이는 것이 아닌10px 10px 10px 로 변경됨을 볼 수 있음. 3 )경우 두 박스를 다른 마진을 줌으로써,중간에 맞닿은 마진이 상쇄되면서 , 마진이 큰 쪽으로 수렴됨.20px 30px ..

box Model개별 컨텐츠 요소를 감싸고 있는 사각 박스 형태.브라우저 화면에 영역을 차지하면서 , 표시되는 컨텐트 호함하는 전체 영역을 의미한다.컨텐트(content) - 패딩(padding) - 보더(border) - 마진 (margin) 으로 구성된다.또한 보더(border)의 바깥에 표시되는 아웃라인 (outline) 을 추가로 구성이 가능하다. content : 실제 내용이 표시 되는 영역.유일하게 영역에 대한 너비와 높이 지정이 가능하다.(width / height ) padding : 테두리와 컨텐츠 사이의 안쪽 여백. border : 테두리.외각 테두리 라인을 표시하는 영역으로 마진과 패딩사이에 표시된다. margin : 바깥쪽 여백.다른 요소와 공간적으로 분리 되며 , 빈 공간인 최 외..

background-img : url( 사진 경로 ) ; url 함수에 경로를 지정하여 백그라운드 이미지를 지정한다. background-image: url(../image/hamburger_img.JPG); } background-repeat: 이미지의 반복 여부를 결정. 배경크기가 이미지보다 클 경우 부분 조각이미지로 반복하여 패턴을 완성함으로 메모리 낭비를 최소화. background-repeat: repeat ; 디폴트 값. 가로 세로 방향으로 반복한다. background-repeat: no-repeat ; 반복하지 않겠다. background-repeat: repeat - x ; 수평방향으로 반복하겠다. background-repeat: repeat - y ; 수직 방향으로 이미지를 반복하겠다..

text-decoration 글자 장식, 글자 스타일 , 글자를 변형 시키는 기능. text-decoration-style , text-decoration-color 등과 같은 속성은 반드시 text-decoration 속성이 설정 된 후 사용 가능. text-decoraion:underline; 글자 장식 밑줄 text-decoration:overline; 글자 장식 윗줄 text-decoration:line-through; 글자 장식 가운데 줄 text-decoration:line-through ; text-decoration-style:double; 글자 장식 지정속성 제거 line-through 속성과 동일한 기능은 하나 , text-decoration-style , text-decoration-..

line-height 글자 중심선을 기준으로 한 top~bottom 까지의 전체 높이. 글자 중심선으로 부터 top이나 bottom 까지의 개별 높이가 아님에 주의 line-height 의 지정은 본인 요소가 아닌 부모 요소에 지정함으로써, 부모 요소 안에서의 자식 요소에 대한 요소의 높이가 결정됨의 주의 h2:nth-of-type(n+4)+p { width: 500px; height: 100px; } h2:nth-of-type(4):hover+p { text-align: center; line-height: 100px; } 500 , 100 px line-height 를 똑같은 높이 100px 을 주면서 , 수평 정렬 line-height 의 % 예외. line-height 에 대한 % 적용은 상위 부..

white -space : normal ; ( 디폴트 값 ) 문자 공백 , tab , 개행(줄내림) 을 모두 공백 처리하고 , 연속된 white-space 문자도 하나의 공백으로 인정. white-space : nowrap ; 수평 너비 영역 끝에 닿을 때 자동 개행(줄내림)이 되는 특성을 해제함. (영역에 넘치도록 한줄에 모두 표현되는 특성으로 인해 , overflow 와 함께 쓰기도 한다. 이전 overflow의 예제를 살펴보자.) white-space : pre ; pre 속성과 동일하게 적용되어, 들여쓰기가 됨을 확인 할 수 있다. white-space : pre-wrap ; pre 속성과 동일하게 적용되며 , 들여쓰기가 됨을 확인 할 수 있다. 수평 너비 영역을 벗어 났을때 , nowrap 되는..