2주차 FRONT-E스터디를 진행하였다. 오늘은 HTML에서 CSS를 먹이는 방법을 배워보았다.
CSS를 먹이는 방법에는 인라인스타일시트,내부스타일시트,링킹스타일시트가 있다.
우선순위는 인라인>내부>링킹 순이다.
인라인스타일 시트는 안에 태그에 적용하는 방법이다
<h1 style="color: red;">인라인 스타일 입니다.</h1> 로 작성을 하면,
이와 같이 h1태그안에 글자를 red색상으로 바꾸어주는 것을 알 수 있다.
내부 스타일은 선택자를 사용하여 css를 먹여보겠다.
선택자는 내부와 링킹스타일시트에 사용한다.
head태그 안에 style태그를 사용하여 color를 작성하면 된다.
선택자는 p(태그){} 와 같이 작성하면 된다. {}안에 ;를 작성하는 것을 잊지 말자!
<style>
h2{
color:blue;
}
</style> head안에 이 태그를 작성하면 h2태그에 blue색깔을 입힐 수 있다.
이처럼 h2태그가 파란색으로 컬러가 입혀진것을 알 수 있다.
링킹 스타일 시트는 따로 css파일을 만들어 HTML파일에 연결시키는 것을 말한다.
css파일을 작성하면 css파일에 작성한 컬러가 HTML의 태그에 입혀진다.
p{
color: violet;
}
h3{
color:aquamarine;
}
h4{
color:brown;
}
h5{
color:cornflowerblue;
}이 코드를 css파일에 따로 작성한다
<p>링킹 스타일 시트입니다</p>
<h3 class="likelion">안녕하세요</h3>
<h4 class="likelion1">박규원입니다</h4>
<h5>규성이 누나 결혼식 가기</h5> 이처럼 HTML 파일에 태그를 작성하면 css파일에 작성한 컬러가 적용된다.
이렇게 컬러가 적용되기 위해서는 HTML파일에 CSS파일을 링킹해야 한다. 그러기 위해서는
head태그안에 <link rel="stylesheet" href="style.css"> 코드를 작성해준다.
그럼 아래와 같이 출력된다 href뒤에 작성되는 것은 css파일의 이름
선택자의 특징과 종류에 대해 알아보자,
* 기호를 사용하면 모든 요소(태그)가 선택된다. (모든 태그에 css를 먹인다)
같은 선택자의 경우 뒤에 오는 것이 우선순위가 높다
class선택자
*{
color:brown; //전체 태그의 색깔을 갈색으로 입히기
} 단, 링킹스타일시트로 작성하였기 때문에 인라인,내부 스타일시트에는 적용되지 않는다
(우선순위, 인라인>내부>링킹)
클래스 선택자. 클래스 선택자는 특정 클래스를 가진 태그에 css를 먹이기 위해 사용하는 선택자 이다.
.likelion{ //likelion클래스를 가진 태그
color:yellow;
}
.likelion1{
color:orange;
} <h3 class="likelion">안녕하세요</h3> //태그안에 클래스명을 작성한다.
<h4 class="likelion1">안녕히가세요</h4> 
코드를 작성하다보면 특정 태그의 특정 클래스에 색깔을 입히고 싶은 경우가 있는데,
그럴때는 이와 같이 작성하면 된다.
.korea{ //korea클래스
color:crimson;
}
p.korea{ //p태그의 korea클래스
color:blue;
}
p.korea.sejong{ //p태그 korea sejong클래스 korea와 sejong은 .으로 구분
color:yellow;
} <p class="korea">태그1</p>
<h3 class="korea">태그2</h3>
<p class="korea sejong">태그3</p> 
특정한 한가지 태그만 css를 먹이고싶을때, id를 사용한다.
#korea{ //id를 사용할때는 . 대신 #을 사용한다.
color:yellow;
}
#sejong{
color: green;
}
.korea{
color:crimson;
} <h3 id="korea">테스트1</h3> //class가 아닌 id작성
<p class="korea">테스트2</p>
<p id="sejong">테스트3</p> 
또한 github에 자신이 작성한 코드를 올리는것을 알게되었다.
git add .
git commit -m "(ex>second week UDR - 파일이름)"