프론트엔드 CSS[운동하는IT]

CSS 위주로 정리했어요^^

 

 

CSS

[ cascading style sheets ]

 

 

기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다.

 

 

 

 

 

css 기본 문법

div {
  font-size: 50px;
  color: blue;
  text-decoration: underline;
}

선택자{속성:값;}
선택자는 스타일을 적용할 대상
속성은 스타일의 종류
:은 :이다

중가로는 스타일의 시작과 끝의 범위

margin:20px;
마진이라는 건 요소 외부 여백을 말한다.

쉬프트 탭 : 내어쓰기

css에 설명주석을 작성하면 좋다.


CSS 선언 방식
1) 내장방식
2) 링크방식
3) 인라인 방식
4) @import방식

1)내장방식
html에 헤드안에 <style></style>태그를 넣고 요소 안에 스타일을 작성함
CSS파일 안만들고 사용가능하지만 CSS내용이 많을 때 복잡함
보통 H, C, J 각각만들어서 시작함


2)인라인 방식
<div style="color: red; margin: 20px;"></div>
처럼 요소의 style 속성에 직접 스타일을 작성하는 방식
요소를 찾는 행위없이 바로 시작
인라인 방식은 스타일을 우선으로 잡기 때문에 나중에 유지보수할 때 어려움

3)링크방식
<link rel="stylesheet" href="./css/main.css">
<link/>로 외부CSS문서를 가져와서 연결하는 방식

4)@import방식(직렬로 연결하는 방식)
CSS의 @import규칙으로 CSS문서 안에서 또 다른 CSS문서를 가져와 연결하는 방식

<link rel="stylesheet" href="./css/main.css">

main.css
@import url("./box.css");
div{
  color: red;
}


box.css
.box{
  background-color: red;
}

main.css가 연결이 안되면 box.css가 연결이 안됨 직렬이니까.



링크방식은 병렬방식임




css 선택자
기본, 복합, 가상 클래스, 가상 요소, 속성

1)기본
* 에스터리스크
기본 선택자이며 전체선택자이다.
모든 요소를 선택
*{
  color: red;
}

2)태그선택자
태그 이름의 요소 선택.
태그의 이름으로 요소를 선택
li{
color: red;
}

3)클래스 선택자
HTML 클래스 속성의 값인 요소 선택.
class="orange" 의 경우
.orange{
  color: red;
}
class의 이름이 같으면 해당하는 요소의 스타일을 바꿔준다
점(.)중요

4)아이디 선택자
HTML id 속성의 값인 요소 선택
id="orange" 의 경우
#orange{
  color: red;
}
샵(#) 중요




복합선택자
1) 일치 선택자
선택자를 동시에 만족하는 요소 선택
기본 선택자4개중 두개를 합쳐서 사용

span.orange {
  color: red;
}

위의 경우 태그 선택자와 클래스 선택자를 같이 사용했는데
태그 선택자는 꼭 앞에 적는다.

2) 자식 선택자
선택자의 자식요소 선택

ul > .orange{
  color: red;
}

3) 하위 선택자
선택자의 하위(후손) 요소 선택
띄어쓰기가 선택자의 기호
div .orange {
  color: red;
}

4) 인접 형제 선택자
선택자의 다음 형제 요소 하나를 선택.
.orange + li {
  color: red;
}

5) 일반 형제 선택자
선택자의 다음 형제 요소를 모두 선택.
.orange ~ li {
  color: red;
}





가상 클래스 선택자

어떤 행동을 했을 때 동작한다.

1) 선택자:hover
.box {
  wifth: 100px;
  height: 100px;
  background-color: red
  transition: 1s;
}

.box:hover{
  width: 300px;
}

여기서 :hover가 가상 클래스 선택자인데
마우스를 위에 대면 width:300px로 바뀐다
마우스 커서가 올라가 있는 동안만 변함

2) 선택자:active
선택자 요소에 마우스를 클릭하고 있는 동안 변함

3) 선택자:focus
선택자요소가 포커스 되면 선택
focus가 될수 있는 요소는 HTML 대화형 콘텐츠가 해당됨
input, a, button, label, select 등 여러 요소가 있다.
그리고 tabindex 속성을 사용한 요소도 focus가 될 수 있습니다.

input {

}
input:focus {
  background-color: red;
}

인풋창이 활성화 되면 색이 빨간색으로 바뀜

tabindex속성을 통해 포커스가 될 수 있는 요소를 만들 수 있다
tabindex="-1" 로 사용하지만 논리적 흐름을 방해하기 때문에 권장하진 않는다




4)선택자:first-child
선택자가 형제 요소 중 첫째라면 선택.
.클래스명 태그:first-child {
  color: red;
}

5)선택자:last-child
선택자가 형제 요소 중 막내라면 선택.

6)선택자:nth-child(n)
선택자가 형제 요소 중 (n)째라면 선택.

.클래스명 *:nth-child(2)
클래스에 있는  태그의 두번째 요소 선택.

.클래스명 *:nth-child(2n)
n은 0부터 시작 
이건 2의 배수로 선택이 된다. 


.클래스명 *:nth-child(2n+1)
하면 홀수가 선택됨


.클래스명 *:nth-child(n+2)
두번째 요소부터 선택됨


7) 부정 선택자
선택자가 아닌 요소를 선택
.fruits *:not(span) {
 color: red;
}






가상 요소 선택자
선택자 요소의 내부 앞에 내용을 삽입

.box::before {
  content : "앞!"
}

이러면 앞이란 글자가 앞에 출력됨

.box::after{
  content : "뒤!"
}

이러면 앞이란 글자가  뒤에 출력됨





속성 선택자
속성을 포함한 요소 선택
[disabled]{
  color: red;
}

속성을 포함하고 값인 요소 선택
[type="password"]{
  color: red;
}