Ch8. CSS Beginner
< CSS 연결 >
- <link rel="stylesheet" href="./style.css">
< CSS 구성(1) >
> Box - Sizing
- 박스에 적용된 사이즈 기준 정하기
- content-box : 요소 사이즈에 패딩과 테두리 포함 X (생각했던 요소의 크기 + a) : 기본값
- border-box : 요소 사이즈에 패딩과 테두리 포함 O (보통 이쪽이 왜곡 없음)
- * { box-sizing: border-box; }
< CSS 구성(2) >
- h1 { color: brown; }
> CSS 선택자
- * : 요소 전체에 적용 Universal (부분적 수정에 곤란)
- h2 : 특정 태그 전체에 적용
- h2, p : 여러 종류 태그에 적용
- . coding : 특정 클래스에 해당되는 요소에 대해 적용 (클래스명 사용 : . 클래스명)
- h2.coding : 특정 클래스가 명시된 특정 태그에 대해 적용
- #original : 특정 아이디에 해당되는 요소에 대해 적용 (아이디명 사용 : #아이디명)
- h2#original :특정 아이디가 명시된 특정 태그에 대해 적용
- div p : 부모 내의 특정 자식 요소 (부모 자식)
> CSS 주석
- /* ~~~~~~~~~~ */
< CSS 특성 >
- 같은 태그에 대한 규칙이 있는 경우 : 마지막으로 작성된 규칙 적용
- 부모 요소의 CSS 규칙을 자식 요소가 상속받음 but 자식 요소가 CSS 규칙 가진다면 자식의 규칙이 우선
- CSS 규칙이 충돌할 때 (style 속성 > CSS 파일), (클래스 지정 > 클래스 지정X)
< Box Model >
> Inline Box
- 한 줄에 표시
- <a>, <img>, <span>
- 태그로 감싸진 내용만큼만 영역을 차지
- width와 height로 요소 크기 조절 불가능
- 좌우 margin, padding만 적용 가능
- display: inline
> Block Box
- 개별 요소마다 줄을 바꿈
- <h1>, <p>, <div>
- width와 height로 요소 크기 조절 가능
- 내용과 별개로 자신의 영역 가짐
- display: block
- width, height, margin, padding : 레이아웃 설계
- inline은 좌우 margin, padding만 가능
- inline에 상하 padding이 적용되는 것처럼 보이지만 레이아웃에 영향 미치지 못함
> inline-block
- inline, block 특징 모두 포함
- 줄 바꾸지 않음
- block처럼 width와 height 가짐
- 상하 margin, padding이 레이아웃에 유효
- display: inline-block
> Box Model
- block box가 가지는 기본 모델
- margin : 테두리부터 다른 요소까지의 거리 (margin: 20px;) / 상하,좌우(margin: 20px 30px;) / 상우하좌(margin: 20px 10px 20px 10px;)
- Border : 내용을 둘러싼 테두리 (border: 6px solid blue;)
- padding : 내용으로부터 테두리까지의 거리 (padding: 4px;)
< Box-Sizing >
- 박스에 적용된 사이즈의 기준 정하기
- box-sizing: content-box;
- box-sizing: border-box;
- * { box-sizing: border-box; }
< CSS 단위 >
> px : 스크린을 구성하는 작은 점
> % : 부모 요소 기준으로
> em / rem
- em : 부모 요소의 폰트 크기
- rem : 루트 요소의 폰트 크기 (최상위 요소인 html에 따라 : 통일된 기준으로 권장)
> vw, vh : 화면 꽉 채우도록 하려면 100vh
< 이미지 다루기 >
- 이미지 단독으로 사용 X, div로 마크업
- <img src="이미지경로" alt="대체문구">
- max-width: 100%; 부모 영역에서 벗어나지 않도록
- object-fit: cover; 이미지를 부모 요소의 영역 크기만큼 확대/축소. 가운데로 맞춤.
- object-fit: contain: 이미지의 비율 유지하면서 크기 변경하여 부모 요소 채움
- object-fit: fill; 이미지의 비율 유지하지 않고 부모 요소의 크기에 맞게 변경하여 채움 (원본 비율 훼손)
< Overflow >
- overflow: hidden; 영역 벗어나는 값 무시하기
- overflow: scroll; 영역 벗어나면 스크롤 이동하여 확인. 가로세로 스크롤 모두
- overflow-x: scroll; 영역 벗어나면 스크롤 이동하여 확인. 가로 스크롤만
- overflow-y: scroll; 영역 벗어나면 스크롤 이동하여 확인. 세로 스크롤만
- overflow: auto; 가로가 넘치면 가로에, 세로가 넘치면 세로에
< 폰트 꾸미기 >
- color: ##008000;
red/green/blue
- font-wreight : 100~ 400(normal) ~ 700(bold) ~ 900
- a 테그에 text-decoration: none; 하면 링크 걸어도 밑줄 없음
a.link { color: black; } 클릭한 적이 없는 링크
a.visited { color: black; } 방문했던 링크
- html { font-size: 10px; }
p { font-size: 0.5rem; font-style: italic; font-weight: bold; text-decoration: underline;}
< 테두리 꾸미기 >
- .container { border-width: 2px; border-style: solid; border-color: blue; border-radius: 20px; }
- border-radius: 20px; 모서리를 둥글게
< 배경 이미지 설정 >
- .container { background-color: yellow; }
- 영역 할당 가능
- background-size: contain; 요소가 짤리지 않고 다 보이는게 우선
- background-size: cover; 요소의 배경을 모두 덮는 것이 우선
- background-position: center; 이미지를 가운데로
- 이미지를 레이아웃에 맞는 해상도로 크롭해서 사용하는 것이 베스트
- .container { background-image: url(mimoji.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center; }
< 요소 정렬하기 >
- margin: 0 auto; 상하 마진 0, 좌우 마진 자동
- text-align: center; 인라인 요소를 가운데로 하기 위해 부모 요소에 사용. 부모 요소가 block이고 정렬하려는 자식 요소가 inline일 때. right, left도 가능