💡CSS
CSS란?
사용자에게 문서를 표시하는 방법을 지정하는 언어(스타일, 레이아웃 등)
웹 사이트에서 화면에 표시되는 정보들을 꾸며주는 역할
HTML은 문장의 구조를 만들고 CSS는 문장을 브라우저에 어떻게 보여줄지를 지정하는 언어
➡️구조 = HTML, 디자인 = CSS
사용하는 방법
1️⃣인라인 스타일 : HTML 태그 안에서 style 속성을 이용
2️⃣내부 스타일시트 : <style>태그를 통해 HTML문서 내부에서 이용(<head></head> 안에 작성)
3️⃣외부 스타일시트 : 별도의 CSS파일을 분리하여 HTML문서에 연결
.css파일 작성 후 <link>태그를 이용해 연결
<link rel="stylesheet" href="styles.css(css파일경로)">
css파일에는 .a-button{스타일링 작성}
클래스는 . ID일 경우 #
스타일적용 우선순위
인라인 스타일 > 내부/외부 스타일시트 > 웹브라우저 기본스타일
*혼합되어 사용할 때 외부, 내부 상관없이 인라인 스타일만 사용*
기본구조
1. 선택자(Selector)
css를 적용할 위치의 html요소(태그)를 가리킴[모든 h3에 적용]
2. 프로퍼티(속성)
셀렉터가 지정한 위치의 무엇을 바꿀 것인지 결정
3. 값
프로퍼티로 지정한 것을 얼마나 바뀌게 할지 결정
CSS속성
backgroud-color : 배경색
border-color : 테두리 색
color : 폰트 색
값 : 색이름, rgb값, hex값
height/width
높이/너비 설정
값 : 픽셀, 퍼센티지
border
테두리 설정
none(없음), -radius(모서리 둥근정도), style(solid: 실선, dotted: 점선), -width : 테두리 너비
cursor:pointer
요소 위로 마우스를 가져갈 때 커서 변경(클릭모양)
...
+ 색 표현 방법
색 이름 : red, blue, white, lightpink..
RGB : rgb(255, 255, 255); 흰색
RGBA : rgba(255, 255, 255, 0); 마지막은 투명도 조절
HEX : #000000 (두글자씩 r, g, b의미)
+수치 표현방법
픽셀 : 고정된 절대값(50px; 100px;)
퍼센트: viewport width/height를 다르게 해 달라지게 할 수 있다(상대적 측정) => width: 50%; 페이지 너비의 50%
em/rem : 환경에 따라 변하는 단위(가변단위)
a. em : 같은 요소에서 지정된 font-sizeㄹㄹ 기준으로 px로 바뀌어 화면에 표시
만약, 같은 요소에 설정된 크기가 없을 경우, 상위요소의 폰트사이즈가 기준이 됨
b. rem : 최상위 요소에 지정된 font-size의 값을 기준으로 반환
대부분 HTML태그에 지정된 폰트 사이즈가 기준
별도 지정하지 않을 경우, 각 브라우저의 기본 설정값을 따름(크롬 16px)
+특정 요소를 대상으로 지정
요소에 클래스 추가
여러 요소가 동일한 클래스를 가질 수 있음
요소는 공백으로 구분된 여러개의 클래스를 가질 수 있음 <button class="a-class b-button">
같은 CSS를 여러개 만드는 것이 아닌 클래스를 이용해 여러 요소를 동시에 같이 바꿀 수 있다.