" 노마드 코더(Nomad Coders) - 코코아톡 클론 코딩(KokoaTalk Clone Coding) 복습 "
" 책 'Do it! HTML5 + CSS3 웹 표준의 정석' 참고"
"국비지원 컴퓨터학원 복습"
💻 CSS
CSS 정의
Cascading Style Sheets 라는 뜻으로,
즉, html로 뼈대를 만든 뒤, CSS로 꾸며준다고 생각하면 된다. Cascading은 "폭포의" 라는 뜻인데, 
갑분폭포..? 위에서 아래로 흐른다는 의미를 가져온 것으로, 적용되는 순서는 가장 밑부분부터 이다.
아래 코드로 예를 들어보자.
<style>
button {cursor:text;}
</style>
<button style="cursor: pointer;">button</button>
<button style="cursor: grab;">button</button>
<button>button</button>사용 방법은 1) html 문서 <head>에<style> 태그를 이용, 2) 여러 개의 CSS 파일을 만들어 <link> 태그를 이용해 html 문서에 넣어주면 된다.
💻 태그 이용하기
🔍
<style>:
html 안에서 바로 스타일을 바꾸는 방법이다.
<head>
<meta charset="utf-8">
<title>CSS 적용하기</title>
<style>
h5 { /* 태그 전체에 스타일 입히는 방법 */
color: blue;
}
.textcolor{ /* class명을 이용하여 원하는 부분에만 스타일 입히기 */
color: red;
}
</style>
</head>
<body>
<h5>[ CSS는 정말 재밌어 ]</h5>
<p>오늘은 CSS를 배웠다. <br> <!-- break : 줄바꾸기(닫는태그X) -->
<span class="textcolor">
CSS는 <!-- span : 의미 없는 태그 -->
</span>
정말 재밌다.</p>
</body>
위의 코드처럼 <head>의 <title> 태그 바로 밑에 <style> 태그를 입력하면 된다. 스타일을 주고 싶은 태그, 또는 class, id 등을 앞에 쓰고 변경하고 싶은 CSS 속성과 변경하고 싶은 값을 써준다. 그리고 마지막엔
즉, CSS는 선택자 {속성 : 속성을 변경할 값;} 와 같은 구성이다.
특히 class명을 이용할 때는 앞에 . 을 (id를 이용한다면 앞에 #)을 붙여준다. 그러면 이런 결과가 나온다.
🔍
<link>:
여러 장의 CSS를 하나의 폴더에 넣어 html에 연결한다.
<head>
<meta charset="utf-8">
<title> CSS 적용하기 </title>
<link rel="stylesheet" href="스타일 파일 이름.css">
</head>
<body>
<h1>CSS는 재밌어</h1>
</body>
<link>👉 html tags(3)
마찬가지로 <head>의 가장 밑에 입력해주면 해당 html에 멋있는 CSS가 적용된다👏👏!
💡 왜 따로쓸까?
html 하나의 문서에 CSS를 포함한다면, 짧은 코드는 괜찮지만 긴 코드는 화면을 위 아래로 왔다갔다 하는 효율적이지 못한 움직임이 생긴다. "html로 웹 사이트의 뼈대를 만들고 CSS로 스타일을 꾸며준다." 라며 내용과 디자인을 구분짓는 것이 웹 표준을 준수하는 것이기 때문이다. 이렇게 하면 내용/스타일 서로를 건드리지 않고 각 수정해야 할 부분만 바꿔주기 쉽다.
✅ 정리
HTML과 CSS의 기본을 정리했다.
이제는 아주 쉬운 단계의 클론 코딩을 하면서 여러가지 속성을 다시 공부해야겠다.
