선택n집중

블럭 요소의 수직 마진 공유 특성. 중첩되는 수직 마진은 서로 상쇄되어 하나의 마진으로 공유된다.수직마진이 서로 다른 경우 중첩되어 상쇄되는 특징으로 인해,마진이 큰 쪽으로 수렴되어 통합된다.부모요소와 자식관계의 수직 마진을 지정시에부모요소 안에 자식 요소안에 배치되는데 수직 마진이 서로 닿지 않는 경우서로 공유 되지 않았음을 확인 할 수 있다.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 되는..

display : display 에는 주요 inline . block . inline-block . none 요소 들이 있다. : inline 기본적으로 텍스트 속성을 가져 인라인 요소간의 수평 나열이 가능. 크기 지정은 불가. : block 높이는 내부 컨텐트에 의해 결정되지만 , 너비는 수평 영역 전체를 차지. 수평나열이 불가. :inline-block 인라인 요소와 같이 요소간의 수평 나열이 가능하면서도 , 블럭 요소와 같이 크기 지정이 가능한 특성. a { display: inline-block; width: 5em; height: 5em; text-align: center; line-height: 5em; } div { display: inline-block; width: 5em; height:..

헷갈림의 주의 하자, 이전에 배운 vh 와 vw 도 함께 보자. vh 단위 : viewport의 높이에 대한 백분율. vw 단위 : viewport의 너비에 대한 백분율. min-width : ( 이상 - 너비 ) 요소가 가질 수 있는 최소 너비를 지정. 단 , 이는 요소의 최초 너비를 지정하는 것. 브라우저 창의 너비를 늘린다고해서 그 최대 크기를 제한하지 않음. 제한 함으로 스크롤이 생성되나, 브라우저 창의 너비가 min-width 보다 큰 경우 요소 최대 크기를 제한하지 않음의 주의. max-width : ( 이하 - 너비 ) 요소가 가질 수 있는 최대 너비를 지정. 브라우저 창의 너비를 늘려도 요소의 너비가 최대 너비로 제한됨. min-height : ( 이상 - 높이 ) 요소가 가질 수 있는 최..

viewport 를 알아보기 이전에 블럭 레벨 요소 와 % 단위의 특성을 한번 더 확인하고 가자. 블럭 레벨 요소는 높이는 내부컨텐트에 의해 결정되나 , 너비는 수평영역 전체를 차지. % 는 부모 요소를 기준으로 부모 요소의 컨텐트 영역 내에서 상대적 백분율 적용. p태그는 블럭 레벨 요소이다. 부모요소에 별도의 높이가 결정되지 않는 이상, p 태그의 높이에 대한 100% 지정은 부모 요소내에서 그 크기가 상대적으로 결정되는 % 단위의 특성과 내부 컨텐트의 크기에 의하여 높이가 결정되는 body 와 html등의 블럭 요소 특성이 서로 상쇄되어 의미 없는 높이 지정에 불과하다. p{ height: 100%; /*바보 코딩*/ } 부모의 컨텐트 영역 내에서 상대적 비율이 적용되는 % 단위의 특성으로 인해 p..

% / em / rem / root 를 쓰는 이유 ? 사용처에 의해 화면 배율이 달라졌을 경우 px 로 직접 지정한다면 , 추후 사용처 마다 직접 전부 수정해야 하는 단점이 있음. 하지만 비율로 적용 시키게 되면 , 사용처 마다 자연스럽게 비율로 따라가게 됨. % 단위 부모 요소를 기준으로 적용되는 모든 단위에 대한 상대적 백분율. 부모요소 중첩 , 계층별 부모요소에 % 단위가 각각 적용시 → 누적 비율 적용. section:nth-child(1) p { background-color: brown; font-size: 80%; /* 16px * 0.8 = 12.8px */ } section:nth-child(1) p strong { color: white; font-size: 150%; /* 12.8px..