[Day-32] CSS②

chap05

 

1. 선택자

선택자는 CSS 속성을 적용할 대상을 선택하는 문법으로, 다양한 종류의 선택자를 지원합니다.

 

2. 기본 선택자

① 전체 선택자 모든 태그를 선택자로 지정합니다.

② 태그 선택자 태그명으로 선택자를 지정합니다.

③ 아이디 선택자 id 속성값으로 선택자를 지정합니다.

④ 클래스 선택자 class 속성값으로 선택자를 지정합니다.

⑤ 기본 속성 선택자 HTML 태그에서 사용할 수 있는 속성과 값으로 선택자를 지정합니다.

⑥ 문자열 속성 선택자 태그의 속성값이 특정한 문자열과 일치하는 요소를 선택자로 지정합니다.

 

3. 조합 선택자

조합 선택자는 기본 선택자와 조합해서 사용했을 때 선택자의 의미를 더 풍부하게 하는 역할을 합니다.

① 그룹 선택자 여러 선택자를 , 기호로 구분해 선택자를 그룹으로 묶어 지정합니다.

② 자식 선택자 선택자 범위를 자식 관계로 제한하고, > 기호를 구분자로 사용합니다.

③ 하위 선택자 선택자 범위를 자식 및 자손 관계로 제한하고, 공백을 구분자로 사용합니다.

④ 인접 형제 선택자 특정 태그와 가장 인접한 형제 관계 태그를 선택자로 지정하고, + 기호를 구분자로 사용합니다.

⑤ 일반 형제 선택자 특정 태그와 형제 관계에 있는 모든 태그를 선택자로 지정하고, ~ 기호를 구분자로 사용합니다.

 

4. 가상 요소 선택자

실제로 존재하는 요소는 아니지만, 존재한다고 가정하고 선택하는 방법입니다. 가상 요소 선택자 앞에는 :: 기호(콜론 2개)를 붙입니다.

① ::before 요소의 맨 앞 선택

② ::after 요소의 맨 뒤 선택

 

5. 가상 클래스 선택자

가상 클래스 선택자는 요소의 상태를 이용해 선택자를 지정하는 방법입니다.

가상 클래스 선택자 앞에는 : 기호를 붙입니다.

① 링크 가상 클래스 선택자

• :link 링크를 한 번도 방문한 적 없는 상태

• :visited 링크를 한 번 이상 방문한 적이 있는 상태

 

② 동적 가상 클래스 선택자

• :hover 마우스를 올린 상태

• :active 마우스로 클릭한 상태

 

③ 입력 요소 가상 클래스 선택자

• :focus 입력 요소에 커서가 활성화된 상태

• :checked 체크박스 요소에 체크한 상태

• :disabled 상호작용 요소가 비활성화된 상태

• :enabled 상호작용 요소가 활성화된 상태

 

④ 구조적 가상 클래스 선택자

• :first-child, :last-child 첫 번째 자식 태그와 마지막 자식 태그

• :nth-child(n), :nth-last-child(n) n번째 자식 태그와 끝에서 n번째 자식 태그

• :nth-of-type(n), :nth-last-of-type(n) n번째 특정 자식 태그와 끝에서 n번째 특정 자식 태그

• :first-of-type, :last-of-type 부모의 첫 번째 특정 자식 태그와 마지막 특정 자식 태그

---

chap06

CSS필수 속성 다루기

1. CSS의 특징 살펴보기

① 기본 스타일 시트는 웹 브라우저에 기본으로 내장된 스타일 시트를 말합니다.

② 적용 우선순위는 같은 태그에 스타일 속성이 중복으로 작성됐을 때, 어느 속성을 적용할지 결정하는 기준입니다. 적용 우선순위는 개별성 규칙의 점수에 따라 계산됩니다.

③ 상속은 부모 요소의 속성을 자식 요소가 물려받는 것을 말합니다.

④ CSS에는 px, em, rem, %, vw, vh와 같은 다양한 단위가 있습니다.

⑤ 색상 표기법에는 키워드 표기법과 RGB 표기법, HEX 표기법이 있습니다.

 

2. 텍스트 속성

텍스트를 꾸미는 다양한 속성이 있습니다.

속성명	설명
font-family	글꼴을 지정합니다.
font-size	텍스트 크기를 지정합니다.
font-weight	텍스트 굵기를 지정합니다.
font-style	글꼴 스타일을 지정합니다.
font-variant	영문 소문자를 크기가 작은 대문자로 변경합니다.
color	텍스트 색상을 지정합니다.
text-align	텍스트 정렬을 지정합니다.
text-decoration	텍스트 꾸밈을 지정합니다.
letter-spacing	자간을 지정합니다.
line-height	행간을 지정합니다.

 

3. 박스 모델의 성격과 display 속성

1) margin

margin은 박스 모델에서 가장 외부에 있는 영역으로, 요소의 외부 여백을 담당

 방향에 해당하는 속성이 독립적으로 존재합니다. margin 영역을 다룰 때 사용할 수 있는 속성으로는 margin-top, margin-right, margin-bottom, margin-left

모든 방향을 통합해 margin 속성으로 사용할 수도

 

속성값이 2개이므로 공백을 기준으로 첫 번째는 위쪽과 아래쪽, 두 번째는 왼쪽과 오른쪽의 margin 값이 됩니다. 

 margin 겹침 현상(margin collapse)입니다. margin 겹침 현상은 인접한 margin 값이 둘 중 더 큰 값으로 통일되는 것을 말합니다. 

 

2) border

border 속성은 margin 속성과 달리 여러 속성값이 복합적으로 사용

border-width

 border-style,

 color 속성값

 

3) padding

margin, border 영역보다 안쪽에 있으며 요소의 내부 여백을 담당

 

4)  content

content 영역 자체를 다루는 속성은 없으나 다만, 6.2 텍스트 속성으로 텍스트 꾸미기에 나온 텍스트 관련 스타일 속성이면 모두 content 영역을 제어하는 속성이라고 할 수 있습니다.

content 영역에 영향을 주는 width 속성과 height 속성이 있음

 

* 

width 속성으로 HTML 요소의 너비를 줄였을 때, 다음 코드처럼 margin 속성을 적용하면 수평 방향으로 중앙에 HTML 요소가 위치하게 됩니다.

 

* 웹 브라우저가 요소를 화면에 렌더링할 때 border, padding, content 영역의 너비와 높이를 종합적으로 계산하기 때문입니다. 즉, 화면에 보이는 요소의 너비와 높이는 외부 여백인 margin 영역을 제외하고 border, padding, content 영역을 전부 포함한 크기가 됩니다.

ㆍ content-box: width, height 속성의 적용 범위를 content 영역으로 제한합니다.

ㆍ border-box: width, height 속성의 적용 범위를 border 영역으로 제한합니다.

box-sizing 속성은 width, height 속성의 적용 기준을 지정합니다. 이 속성은 기본으로 content-box 값이 적용된 상태여서 width, height 속성으로 지정되는 영역을 content 영역으로 제한합니다. 따라서 값을 border-box로 정의하면 width, height 속성의 지정 영역을 border 영역으로 바꿀 수 있습니다.

 

5) 박스 모델의 성격과 display 속성

● 블록 성격

블록 성격은 hn, p, div 태그를 사용했을 때 요소의 너비가 콘텐츠 유무와 상관없이 항상 가로 한 줄을 다 차지하는 것을 말합니다. 그래서 hn, p, div 태그를 여러 번 사용하면 무조건 줄 바꿈됩니다.

 width, height, margin, padding 속성이 전부 적용

 

● 인라인 성격

인라인 성격은 a, span, strong 태그를 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 성격을 말합니다. 수평 공간이 남아 있으면 한 줄로 배치됩니다.

인라인 성격은 width, height 속성은 적용되지 않고 padding과 margin 속성은 각각 왼쪽과 오른쪽 방향만 적용됩니다. 

 

● 인라인 블록 성격

인라인 블록 성격은 인라인 성격처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 복합적인 성격을 말합니다

 width, height, margin, padding 속성이 전부 적용

 

● display 속성

HTML 태그가 기본으로 가지고 있는 박스 모델의 성격은 display 속성을 사용하면 변경할 수 있습니다

속성값으로는 block, inline, inline-block을 사용합니다.

 

4. 배경 속성으로 요소의 배경 설정하기

 

1) background_color 속성

요소의 배경에 색상을 넣을 수 있습니다. 속성값으로는 색상값을 사용

속성	설명
background-color	배경색을 지정합니다.
background-image	배경에 이미지를 삽입합니다.
background-repeat	배경 이미지의 반복 여부를 지정합니다.
background-size	배경 이미지의 크기를 지정합니다.
background-position	배경 이미지의 위치를 지정합니다.
background-attachment	배경 이미지를 스크롤할 때의 모습을 결정합니다.
background	모든 배경 속성을 한 번에 사용할 수 있는 단축 속성입니다

 

5. 위치 속성으로 HTML  요소 배치하기

HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있는 속성이 있음

요소의 위치에 관여한다고 해서 위치 속성이라고 합니다.

 

1) position 속성

position 속성은 HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용합니다.

 

● relative

position 속성값을 relative로 지정하면 요소를 좌표 속성에 따라 배치할 수 있습니

relative일 때는 기준점이 요소의 왼쪽 위 모서리가 됩니다.

relative 값일 때는 요소가 이동하더라도 요소가 원래 위치에 있는 것처럼 유지됩니다

top	위쪽을 기준으로 좌푯값을 지정합니다.
right	오른쪽을 기준으로 좌푯값을 지정합니다.
bottom	아래쪽을 기준으로 좌푯값을 지정합니다.
left	왼쪽을 기준으로 좌푯값을 지정합니다.

●  absolute

속성에서 빠진다

 absolute일 때는 기준점 웹 브라우저의 왼쪽 위 모서리입니다.

absolute 값일 때는 요소를 움직이면 요소가 원래 있던 공간은 빈 공간으로 인식됩니다. 그래서 파란색 요소가 초록색 요소가 원래 있던 위치로 올라옵니다.

position 속성값이 absolute일 때 top이나 bottom 속성을 지정하지 않으면 left나 right 속성은 원래 위치에서 x축(가로) 방향으로만 움직이기 때문입니다

 

● fixed

position 속성값을 fixed로 지정하면 해당 요소는 지정된 위치에 고정됩니다. 실행하면 absolute와 똑같이 작동하는 것처럼 보이지만, 스크롤했을 때 차이가 나타납니다.

 

● sticky

position 속성값이 sticky일 때는 스크롤하는 중에 일정 지점(임계점)이 되면 요소가 fixed 값처럼 작동합

 

● z-index 속성

z-index 속성을 사용하면 position 속성으로 배치한 요소의 z축 위치를 결정할 수 있습니다. 속성값으로는 하나의 정숫값이 옵니다.

속성값의 숫자가 클수록 요소가 더 앞쪽에 배치됩니다. 모든 요소는 기본으로 z-index 속성값이 0이므로 0보다 크게 설정하면 됩니다.

* 모든 요소는 최대한 기본 흐름을 유지하면서 정말 필요한 대상에만 position 속성을 사용해야 합니다.

    <style>
        .box{
          width:100px;
          height:100px;
        }
        .red-box{
          background-color:red;
          position:relative;
          /*z-index 속성 추가*/
          z-index:10;
        }
        .green-box{
          background-color:green;
          position:absolute;
          left:0;
          top:0;
        }
      </style>
</head>
<body>    
  <div class="box red-box"></div>
  <div class="box green-box"></div>
</body>

 

2)  float 속성

float 속성은 대상 요소를 공중에 띄워 다음에 오는 요소를 주변에 자연스럽게 배치하기 위한 용도로 사용합니다

 

● 이미지 요소와 텍스트 요소 배치하기

이미지 요소와 텍스트 요소가 함께 사용될 때 float 속성의 특징을 적용

  <style>
    img{
      float:left; 
      margin-right:1rem;
    }
  </style>
</head>
<body>
  <img src="images/coffee.jpg" alt="커피">
  <p>Lorem, ipsum dolor ... </p>
</body>

● 블록 성격 요소를 인라인 성격 요소처럼 배치하기

float 속성이 적용 대상을 공중에 띄워 배치하기 때문에 대상이 있던 위치를 빈 공간으로 인식해서 그렇습니다. 그래서 파란색 요소는 마치 빨간색 요소가 없는 것처럼 인식하고 해당 공간을 파란색 요소의 배경이 차지합니다. 다만, 다음에 오는 요소를 대상 요소 주변에 흐르듯이 배치한다는 float 속성의 특징 때문에 blue-box라는 글씨는 빨간색 요소의 옆으로 배치될 뿐입니다

그리고 float 속성이 적용된 대상은 별도로 width 속성이 지정되지 않으면 요소가 가지고 있는 콘텐츠만큼 너비가 자동으로 조정됩니다. 그래서 빨간색 요소는 원래 가로 한 줄을 다 차지하는 너비였지만, red-box 텍스트가 차지한 너비만큼으로 줄어들었습니다.

이 특징을 이용해 블록 성격 요소를 한 줄로 배치할 수 있습니다

 

3) clear

float 속성을 해제할 때 사용하는 속성입니다