CSS: box model, border-radius, margin, padding, 가상요소선택자, 순서선택자, 구조선택자, 이후선택자, display, overflow

 

box model 

(블럭 요소에 줄 수 있는 속성)

width

height

border (inner-stroke, 크기가 변함)

outline (outer-stroke)

border-radius

   #1 : 전체

   #1 #2 : (왼위,오아) (오위,왼아)

   #1 #2 #3 : (왼위) (오위왼아) (오아)

   #1 #2 #3 #4 : (왼위) (오위) (오아) (왼아)

   x/y

 

margin

: 블럭요소 밖 여백

   #1 : 전체

   #1 #2 : 위아 왼오

   #1 #2 #3 : 위 왼오 아래

   #1 #2 #3 #4 : 위 오 아 왼

margin-top

margin-right

margin-bottom

margin-left

 

* 마진겹침현상 : 위아래 마진값이 겹치면 큰값 하나만 적용

* margin:0 auto : 좌우 가운데 정렬(단, width가 있을경우)

* 마진오류현상 : 첫번째 자식 요소에 margin-top을 줄경우 부모요소에 적용

(해결 : padding 또는 float을주면된다)

 

padding

: 블럭요소의 안쪽 여백

: 값 순서는 margin과 같음

padding-top

padding-right

padding-bottom

padding-left

 

* padding, border는 박스의 크기가 변함

* body는 기본 마진값이 들어가 있음 8px 

 

* 사이트 구축시 기본 css 

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #222;
}

 

* 인라인요소에서 padding top, bottom은 제대로 적용되지 않음

 

선택자

가상요소선택자

::before 선택자 앞에 가상요소를 추가할때(이하버젼에서 선택자:before 로 사용되었으나 둘다 사용가능함) 

::after 선택자 뒤에 가상요소를 추가할때

:first-letter 선택한 요소의 첫 글자

:first-line 선택한 요소의 첫 줄

 

순서선택자

: 부모요소 기준 순서, 자식 요소가 모두 같고 각 항목별 이름 없는 경우

:first-child

:nth-child(#) 2n(짝수번째), 2n+1(홀수번째)

:last-child

 

구조선택자

: 선택자 기준 순서 (자식요소에 여러가지가 섞여 있는 경우 같은 태그들 기준)

:first-of-type

:last-of-type

:nth-of-type

 

형제선택자, 이후선택자 +, ~

   <p>형제들 선택하기</p>
   
    <h1>바로 다음 형제선택자와 이후 형제선택자</h1>
    
    <h2>바로 다음 형제</h2>
    <p>바로 다음에 오는 형제 하나를 선택할 때 사용</p>
    
    <h2>이후 선택자</h2>
    <p>이후에 오는 모든 형제들을 선택할 때 사용</p>

/*    h1 바로 다음에 오는 h2만 선택*/ 
        h1 + h2{ 
            color:green; 
            text-decoration: underline; 
        } 
/*      h1 이후에 오는 모든 p*/ 
        h1 ~ p{ 
            background: pink; 
        }

 

 

* 아이콘 사진 파일이 다닥다닥 붙은 경우 before 가상 선택자 사용 (파일29)

 

display

block 너비,높이를 줄 때

inline 옆으로

inline-block 너비높이를 주고 옆으로 정렬

none 화면에서 삭제 (마우스 호버시 등장 효과 등), 리더기에서도 읽히지 않음

table-cell 위아래 정렬(vertical-align), like td of table tag

 

* 인라인 요소는 기본3px 간격 자동설정

* 자식이 인라인 속성인 경우 부모태그에 text-align:center 줘서 레이아웃 센터로 조정

 

* display:none  공간도 남지않고 완전 사라짐

  visiblity:hidden 공간은 남고 내용만 사라짐

 

overflow

hidden 넘는 내용 숨김

scroll 넘는 여부 관계 없이 스크롤 생성

auto 넘으면 스크롤

visible (기본)

 

white-space

nowrap 줄바꿈 처리 안함

pre 사용자가 입력한 그대로

pre-wrap 사용자가 입력한 공백은 그대로, 영역 넘을 경우 줄바꿈처리

pre-line 사용자가 입력한 줄바꿈만

 

text-overflow

ellipsis 말 줄임

clip 자르기

 

* 말줄임 기호 사용 시 세가지 모두 적용 必

   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis

 

word-break

:줄이 변경될 경우 단어를 하나로 묶을지 줄을 변경할 지 결정

break-all

keep-all

 

 

* 단색인 경우 gif, 그라디언트 경우는 jpg