문법
css 는 선택자, 속성, 값으로 코드를 구성한다.
h1 { color: green; }
/*h1 { color: red; }*/ 선택자는 html태그를 지정한다.
속성은 지정한태그의 꾸밀 요소를 선택한다.
값은 어떻게 변화시킬지 정한다.
; 은 여러개의 속성값을 지정시 구분하기위해 마지막에 사용한다.
{}를 사용하여 감싼다.
/* */은 주석을 의미한다.
css는 속성을 상속할 수 있다.
부모요소에 지정한 속성이 자식요소에게도 적용될 수 있다.
<style>
p { color: blue; }
</style>
<p>Lorem <em>Ipsum</em></p>여기서 p가 부모요소 이고 em태그가 자식요소가 됨으로
둘다 색이 파란색이 된다.
상속시키지 않는 속성
border와 padding은 상속시키지 않는다.
변수 선언
css에 자주사용되는 속성이 있다면 변수로 지정하여 사용이가능하다.
:root에 정의하면 연결된 css에서 모두 사용이 가능하다.
:root {
--yellow: #fae100;
--horizontal-space: 25px;
--main-border: 1px solid rgba(0, 0, 0, 0.2);
--gray: rgba(0, 0, 0, 0.5);
}
변수를 사용하기 위해서는 위의 코드가 있는 css파일과 연결시켜야 하는데
그 때 사용하는 @import 를 사용하여 연결한다.
:root가 있는 css 파일이 variables.css 라고 가정할 때
@import "variables.css";변수를 사용할 css파일 상단에 위와 같이 작성하여 연결한다.
하나의 css 파일에 모든 코드를 작성하게 되면 가독성도 떨어지고 수정이 어렵다.
css파일을 주제별로 여러 파일에 작성하여 나누고 하나의 메인 css파일에 import하게 되면 추후 수정도 용이하고
유지 보수가 편리하다.
선택자
html코드의 태그를 지정하기위한 css 문법이다.
* : 전체 선택자(Universal Selector)
모든 html 요소를 선택한다.
태그이름: type 선택자
h1, p, div, span 등 HTML 요소(Element)를 선택한다.
#: id 선택자
아이디 선택자(ID Selector)는 id 값을 선택한다. 속성값 앞에 #을 붙여 아이디임을 나타낸다.
<h1 id="title">hello</h1>
#title {
color:green;
}.: class선택자
class 값을 받는 요소를 선택한다. clss속성은 여러개의 값을 가질 수 있다.
<h1 class="title">hello</h1>
.title {
color:green;
}
[]: 속성(Attribute) 선택자
속성 선택자는 html의 태그가 아닌 태그가 가진 속성을 지정할 때 사용한다.
input[type="submit"] {
background-color: var(--yellow);
cursor: pointer;
padding: 20px 0px;
border-radius: 5px;
}가상클래스
가상클래스는 요소의 이벤트에 대응하기 위하여 미리 만들어 놓은 클래스다.
1) 가상클래스의 종류
link : 하이퍼링크가 적용된 요소
visited : 링크 요소를 한 번 이상 방문한 요소
hover: 요소에 마우스가 올라간 상태
active : 링크 요소가 활성화된 상태 / 마우스가 누르고 있을 때
focus : 폼요소가 선택된 상태, 입력대기모드
사용법
.reply input:focus {
width: 90vw;
transform: translateX(-13%) translateY(-80px);
}html요소 : 가상클래스 {}
가상요소
가상 클래스가 실제로 존재하는 요소에 클래스 추가 없이 디자인을 입히기 위한 것이라면,
가상 요소는 아예 실제로 존재하지 않는 요소를 만들게 해준다.
선택자::가상요소 { property: value; }:first-line : 해당 가상 요소는 텍스트의 첫번째 줄에만 특정 스타일을 입혀준다. 문장의 첫 줄은 상위 요소의 크기나 브라우저의 크기에 따라 달라질 수 있으니 주의한다.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}::first-letter : 이 요소는 텍스트의 첫 문자에 특정 스타일을 입혀준다. 미디엄 글 맨 상단에 있는 이런 스타일을 입힐 때 좋다.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
::before 과 ::after 요소
::before : 요소의 앞에 내용을 생성 함
::after: 요소의 뒤에 내용을 생성 함
::after와 ::before쓸때 유의할 점
꼭 content속성과 같이 써줘야한다.
content속성은 css안에서 가상의 html cotent를 만들어
출력시키는 거라고 보면 된다.
ul li.sale:after{
content:"SALE!";
font-size: small;
padding: 3px 6px; margin: 0 5px;
border-radius:4px;
color:#fff; background: #f55;코드를 해석하게 되면 ul태그 안 li태그의 클래스가 sale인 요소를 지정하여
요소 뒤에 가상요소를 다음내용과 같이 만들어 출력한다.
글자 꾸미기
font-family : 글꼴을 지정한다.
https://fonts.google.com/ 에서 폰트를 선택하여
html의 head태그 안에 코드를 link를 넣거나
css 코드안에 @import를 통해 넣어주고
해당 폰트를 font-family 안에 지정해주면 사용이 가능하다.
color: 글자 색을 지정
font-size:글자 크기를 지정
medium : 웹브라우저에서 정한 기본 글자크기
xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기
smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기
length : px, %, em, rem 등으로 크기를 정한다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
여기서 em와 %은 부모요소에 대한 상대적인 글자 크기를 의미한다. 100%와 1em은 부모 요소의 글자 크기가 같다.
rem은 최상위 요소, 즉 html 요소의 글자 크기에 대한 상대적인 글자 크기를 의미한다.
font-style: 글자 모양을 정하는 속성을 선택
normal : 보통 모양
italic : 기울임꼴
oblique : 기울임꼴
initial : 기본값
inherit : 부모 요소의 속성값을 상속받는다.
font-variant: 소문자를 대문자로 바꾸는 속성을 선택
normal : 소문자를 작은 대문자로 바꾸지 않는다.
small-caps : 소문자를 작은 대문자로 바꾼다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받는다.
font-weight: 글자 굵기를 지정
text-shadow: 글자에 그림자 효과 지정
letter-spacing: 글자 사이 간격을 지정
a태그 꾸미기
a:link - 방문하지 않은 링크
a:visited - 방문했던 링크
a:hover - 마우스가 올려진 링크
a:active - 클릭하는 순간 링크
a:visited { color: purple; text-decoration: none; }a로 지정된 링크를 방문 후 링크의 밑줄은 없어지고 색깔은 보라색으로 변한다.
