Frontend
CSS 총정리
- -
반응형
서론 글
1. CSS 사용방법
- HTML 파일에 HTML 코드와 CSS 코드를 같이 넣음.
- head태그(header아님) 안의 style태그 넣어서 CSS 코드 사용
- HTML 코드와 CSS 코드 분리.
- head태그 안의 link 태그 사용 => <link href="css파일" rel="stylesheet" />
1-1. CSS 구조
- HTML의 어떤 태그를 가리키고 CSS로 잡아와서 속성을 부여.
- 셀렉터 { 속성(프러퍼티); }
- ex)
h1 {
color : blue;
font-size : 20px
}
- CSS(Cascading Style Sheet) : Cascading은 작은 폭포 => 위에서 아래로 차례로 적용됨.
- ex) inline CSS와 external CSS 모두 같은 태그 같은 속성을 가리킬 경우 결과는 inline CSS! => 이유는 inline CSS가 가장 나중에 실행되기 때문
HTML 태그 안에 있는 style태그 : inline CSS
<link href="styles.css" rel="stylesheet"/>
<style>
h1 {
color : yellowgreen;
}
</style>CSS 파일을 include하는 것 : external CSS
h1 {
color : red;
}
결과
2. Display : Blocks and inlines
2-1. Blocks and Inlines
- div와 같은 박스는 옆에 아무것도 올 수 없고 오직 div하나만 존재, 반면에 span과 같은 글자는 옆으로 나열됨.
ex)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 150px;
width: 150px;
background-color: red;
margin-bottom: 5px;
}
span{
background-color: aquamarine;
font-size: 30px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>결과
- diplay 속성
- block : 하나의 요소 옆에 다른 요소가 올 수 없는 것
- inline : 하나의 요소 옆에 다른 요소가 올 수 있는 것
- inline(in the same line) : 같은 줄에 위치할 수 있다는 뜻
- block이 아닌 것들 중 주의해야할 태그들 : span, a, image
- inline 요소는 높이와 너비 속성을 가질 수 없음 => div태그를 display : inline을 적용하면 사라짐. => inline요소이면서 높이와 너비 속성을 가질 수 있게하려면 display 속성을 inline-block으로 적용해주면 됨.(but 추천하지는 않음)
- block 요소는 margin, padding, border 요소를 가짐
- margin : box의 border(경계)의 바깥에 있는 공간
- padding : box의 border(경계)의 안쪽에 있는 공간
2-2. Margin
- 브라우저는 태그에 자기 마음대로 margin을 설정함 => body에 margin : 8px을 부여해서 배경색을 빨간색으로 하면 브라우저 내부에 빈 공간(파란색 점선)이 보임. => 이를 제거해주기 위해서 css로 body태그 margin값을 0으로 초기화.
변경 후
- margin 속성 부여 방법 예시
- margin : 20px => 위 아래 좌 우 20px
- margin : 20px 15px => 위 아래(수직)) 20px, 좌 우(수평) 10px
- margin : 5px 10px 15px 20px => 위, 오른쪽, 아래, 왼쪽순(시계방향)으로 차례대로
- span 태그와 같이 display요소가 inline인 경우에는 margin이 좌 우로만 가능. => 만약 상하 margin을 넣고싶다면 display요소를 block으로 변경해줘야함.
- collapsing margin 현상 : margin이 겹쳐지만 하나로 취급된다? (위 아래로만 현상이 나타남)
2-3. Padding and Border
- border은 inline과 block 모두 적용됨.
- border : <line-width> <line-style> <color>
- ex) border : 2px solid black
Tip
- 공통적인 부분은 *{} 로 설정해주기 => casecading 덕분에 따로 설정해야 하는 부분은 밑에서 설정하면 됨.
3. Classes
- class는 언제사용할까? : 여러 요소들을 한꺼번에 css적용할 때. <= id는 유니크해야하기 때문에 class를 사용!
- 사용법
- .클스명{}
- 참고로 id로 css 적용할 땐 #id명{}
- 특징
- 하나의 태그에서 여러개의 클래스를 가질 수 있음. (반면 id는 하나의 id만 가짐) / 띄어쓰기로 구분
- ex) <span class="tomato hello potato"> hello </span>
4. Display : flex
4-1. Flexbox
- inline-block : 반응형 디자인을 지원하지 않음. => display의 flex 속성 사용
- flexbox 규칙
- 자식 엘리먼트에는 어떤 것도 적지 말아야함 => 부모 엘리먼트에만 명시해야함
- main axis : 주축(디폴트 수평, row)
- cross axis : 교차축(디폴트 수직, column)
=> 축을 바꾸려면 flex-direction : column으로 설정
5. Position
5-1. Position : fixed
- fixed 특징
- position : fixed를 이용하면 스크롤해도 항상 제자리에 머무르고 처음 만들어진 자리에 고정되어 있음.
- top, left, right, bottom 중 하나만 수정해도 서로 다른 레이어에 위치하게 되면서 원래 위치가 무시됨.
- positon : fixed를 이용하면 가장 위에 위치하게 된다.
4-3. Position : relative, Position : absolute
- relative : element가 '처음 생성된 위치'를 기준점으로, top bottom left right으로 위치를 조금씩 수정 가능
- absolute : 가장 가까운 relative 부모를 기준으로 이동
6. Pseudo Selectors
6-1. Pseudo Selectors
- Pseudo Selectors : 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음.
- :first-child, :last-child, :nth-child, :nth-child(even), :nth-child(odd), :nth-child(2n+1)...
6-2. Combinators
- > : 바로 밑의 자식 태그 찾아 적용(ex. div>span과 div span의 차이는 div span은 div태그 아래의 span모두 적용 반면 div>span은 div태그 바로 아래의 span만 적용함)
- + : 안에 있는 태그가 아닌 바로 다음으로 오는 태그(바로 옆 태그)를 찾아 적용
- ~ : 안에 있는 태그가 아닌 다음으로 오는 태그(바로 옆이 아니어도 됨)
7. Colors and Variables
7-1. CSS Custom properties
- :root {} 사용
- --변수-변수이름 : --main-color: yellow 지정 후에 각 태그안에서 var(--main-color)로 사용
- ex
:root {
--main-color: #fcce00;
}
p {
background-color: var(--main-color);
}
a {
color: var(--main-color);
}
8. Advanced CSS
8-1. Transition
- transition : state가 없는 요소에 붙어야함.
8-2. Transformation
- transform:
8-3. Animation
- animation:
9. Media Querie
-
반응형
Contents
소중한 공감 감사합니다