CSS
기본 개념
CSS Box
CSS Selector
CSS다!! 하고 신났는데 그건 잠깐이였다,,
와 셀렉트 넘나 머리아픈것,,
그리고 예시에 나와있던 사이트 중에 vw 적용된 사례가 있었는데
정말 도무지 이해가 가지 않았따,,😭😭
BUT 라이브세션에서 완전 이해감 홍식님 짱 👍
vm 질문 내용(이해 내용 추가 예정)
레이아웃 디자인
)Cascoding Style Sheets
콘텐츠를 적당한 위치에 배치
웹페이지 스타일 및 레이아웃 정의하는스타일시트 언어
스타일링 도구로 독립적으로 기능하지 않으며 반드시HTML
이 있어야 함
body {
color : red;
}
body
: 셀렉터(selector){}
: 선언블록color=red;
: 선언color
: 속성명(property)red
: 속성값(value)HTML 파일에 CSS 파일 연결할 때(다른 파일을) 연결하는 목적의 <link>
태그 사용
<link rel="stylesheet" href="파일명.css"/>
<!-- rel속성: 연결하고자 하는 파일의 역할 / href속성: 파일의 위치-->
.box {
color: #000000 /*글자 색상*/
background-color: #000 /*배경 색상*/
border-color: #000 /*테두리 색상*/
}
color
: 글자의 색상을 변경하는 속성background-color
: 배경 색상을 변경하는 속성border-color
: 테두리 색상을 변경하는 속성.box {
font-family: "SF Pro KR", "MalgunGothic", "Verdana"
}
font-family
: 글꼴 변경하는 속성''
를 붙여서 적용fall back
: 사용하려는 글꼴이 존재하지 않거나 디바이스 별로 지원이 안된다면 대비책의 글꼴 추가,
쉼표로 구분하고 입력순으로 fall back 적용네트워크 속도, 웹폰트 용량으로 웹폰트가 적용된 텍스트가 보이지 않는 문제가 발생할 수 있음
참고링크
text-align
: 가로 정렬 (left
, right
, center
, justify
(양쪽정렬))vertical-align
: 세로 정렬display
속성이 반드시 table-cell
글꼴 크기, 화면 크기 등 크기를 다룰 때 쓰는 단위
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 항상 고정된 길이를 나타내는 단위
px
: 픽셀, 크기가 고정된 절대 단위로 사용자 접근성이 불리pt
: 포인트,고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위
em과 rem의 차이 참조링크
%
: %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환em
: 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준이 됨.content (
font-size: 14px; // 부모에 기준값 지정
}
.content {
width: 10em; // 14px(기준값) * 10 로 140px 로 보임
}
rem
: 최상위 요소가 font-size 속성값이 됨<html>
html (
font-size: 16px; // 부모에 기준값 지정
}
.div {
font-size: 1.5em; // 14px(기준값) * 1.5 로 21px 로 보임
}
ch
: 요소 글꼴의 "0" 의 사전 길이(너비)vw
: (viewport width) 보여지는 화면의 가로값이 100%일때 1vw는 1%vh
: (viewport height) 보여지는 화면의 세로값이 100%일때 1vh는 1%모든 콘텐츠는 각자의 영역을 가지고, 하나의 콘텐츠로 묶이는 요소들이 하나의 박스가 됨
<div>
, <p>
, <h1>
display:block
해도 div
넣을 수 Xdisplay:inline-block
하면 할 수 있음<span>
, <a>
, <em>
<input>
, <button>
, <select>
class | class | class | |
---|---|---|---|
줄 바꿈 | O | X | X |
기본 width | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
width, height 사용 가능 | O | O | X |
박스의 크기보다 콘텐츠의 크기가 더 큰 경우 콘텐츠가 박스 밖으로 빠져나옴
이걸 박스 크기에 맞게 스크롤을 추가하거나 콘텐츠를 안보여 줄 수 있게 만들 수 있음
p {
height : 40px;
overflow : auto; /*스크롤 추가 방법*/
/* ㄴ속성값을 hidden 으로 하면 박스사이즈 만큼만 콘텐츠 보여줌*/
}
여백과 테두리 두께를 포함해서 박스 크기를 계산하게 만드는 법은
모든 요소 선택해 box-sizing: border-box 속성 추가
*
은 모든 요소를 선택하는 셀렉터
* {
box-sizing: border-box;
}
오늘 라이브세션에서 얻은 Tip!
- !important : 9999999999(무한대)점
- 인라인 선언 : 1000점
- id 선택자 : 100점
- class 선택자 : 10점
- 태그 선택자 : 1점
- 전체 선택자 : 0점
- 상속 : 점수 계산 X