[CSS] 배치속성 | 중첩박스 | Box-Sizing | 표현속성 | 태그선택자

24.03.06 15일차

목차

1. 배치 속성

2. 중첩 박스

3. Box-Sizing 속성

4. 표현 속성

5. 태그선택자

 

1. 배치 속성

float: left;  >>  왼쪽 정렬

float: right;  >>  오른쪽 정렬

float: none;  >>  정렬하지 않음

이미지 왼쪽 정렬 / 오른쪽 정렬 / 정렬 X

 

 

* 테두리

border : 굵기 

solid(직선) : 

div는 block 태그이기 때문에 별 다른 설정 없이는 아래로 이어진다

모든 class를 왼쪽 정렬 설정을 하면 나란히 나온다

우측정렬

 

2. 중첩 박스

한 페이지에 여러개의 박스가 중첩된 것

빨강 : 배너 영역  /  파랑 : 로그인 영역

배너영역 왼쪽 정렬 / 로그인 영역 오른쪽 정렬 / 로그인박스 기준 왼쪽 바깥여백 지정

 

2. 부모 박스

여러개의 float 박스들을 묶어서 관리하는 메인 박스

 

margin: 0 auto  >>  가운데 정렬

가운데 정렬 확인

 

공간이 모자라면 설정이 틀어짐

두개박스를 더한값으로 main을 설정하고 테두리 두께 추가

나란히 정렬되던 두 박스가 공간이 모자라 밑으로 밀림

 

 * 픽셀 계산법

   배너박스 넓이 : 740+2(테두리)+2(테두리)=744

   로그인박스 넓이 : 333+8(여백)+2(테두리)+2(테두리)=345

   부모박스넓이 : 744+345=1089

   부모박스높이 : 120+4=124

main 박스의 넓이 조정

설정 확인

 

3. Box-Sizing 속성

border-box : 요소의 전체크기에 padding, border 값을 포함

content-box : 요소의 전체크기에 padding, border 값을 포함하지 않음

border-box / content-box

 

4. 표현 속성

1. display : 요소의 성격을 바꿔주는 속성 (block 태그를 inline으로, inline 태그를 block으로 바꿀 수 있음)

block 태그로 변경한 class transform 들은 span 태그가 block 태그로 변경됨

inline 태그인 ul,li 태그를 h_menu class로 묶어 block 태그 속성으로 변경

 

 *inline : height 지정 불가

  inline-block : height 지정 가능

 

2. visibility: hidden;  >>  보이지는 않지만 자리 유지

    display: none;  >>  보이지 않음

display:none;

visibility:hidden;

 

3. overflow

박스의 세로길이를 텍스트가 벗어나지 않음

 

 * 콘텐츠의 양이 많아서 박스에 흘러넘침

텍스트가 흘러넘침

 

* 박스의 높이를 지정하지 않으면 콘텐츠 양에 따라 높이가 자동으로 늘어남

height를 지정하지 않으니 콘텐츠양에 맞춰서 박스의 높이가 늘어남

 

overflow:hidden;  >>  박스의 높이를 벗어나는 것들은 잘리게 됨

 

overflow:scroll;  >>  스크롤이 생김

 

overflow-x:hidden;  >>  x축의 스크롤을 숨김

overflow-y:hidden;  >>  y축의 스크롤을 숨김

5. 태그선택자

, : 쉼표를 사용하여 여러 태그를 묶을 수 있다

 

 * text-align:center; : 가운데정렬

 

 * 자식 선택자 : '>'

   요소 내부에 있는 해당 요소를 가리키지만, 하위 요소의 하위 요소는 가리키지 않는다

 

form input : 입력을 받는 폼

type=text / type=password

 

hover : 반응선택자 (마우스가 올라갈 때)

hover 속성에 의해 마우스가 올라가면 글자색이 변경됨

active : 마우스로 클릭했을 때

마우스로 h2 태그를 클릭했을 때 active 속성에 의해 글자와 배경의 색상이 변경됨

 

 

2n : 짝수

2n+1 : 홀수

 

체크박스

체크시 div가 사라짐

 

::  >>  이중문자선택자(첫번째 글자만 선택)

 

가상요소선택자

h2의 앞부분에 콘텐츠 추가

p 태그의 맨 마지막에 콘텐츠 추가