본문으로 바로가기

[3일차] #10. CSS 기초 (style 태그)

category Develop/WEB2 - JavaScript 2018. 12. 3. 15:31





3일차



수업의 목적

HTML과 JavaScript의 만남 1 (script 태그)

HTML과 JavaScript의 만남 2 (이벤트)

HTML과 JavaScript의 만남 3 (콘솔)

데이터타입 - 문자열과 숫자

변수와 대입 연산자

웹브라우저 제어

CSS 기초

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

조건문 예고

비교 연산자와 Boolean 데이터 타입

조건문

조건문의 활용

리팩토링(refactoring)

반복문 예고

배열

반복문

배열과 반복문

배열과 반복문의 활용

함수예고

함수

함수의 활용

객체예고

객체

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프래임워크

UI vs API

수업을 마치며





#10. CSS 기초 (style 태그)


▲ 'style 속성' 이용하여, 글자 굵게하기



□ <div></div> ⇒ 무색무취하나, 줄바꿈 O (의미·기능X)

□ <span></span> ⇒ 무색무취 & 줄바꿈 X (의미·기능·줄바꿈 X)




▲ 본문에 있는 '같은 글자'도 굵게처리하기



ctrl + f →  'A'를 'B'로 바꾸기 (Replace All)

□ JavaScript만 굵게 처리됨을 볼 수 있음 




▲ 'style 태그' (헤드부분) 이용하여, 글자굵게 처리하기



□ 기존 'style 속성'을 'style 태그'로 교체하기 (class "js")

□ <style></style> 




▲ 헤드태그 쪽 js에 점 (.) 찍기


▲ 헤드 쪽 'style 태그'를 통해 본문을 통제할 수 있다


CSS를 웹페이지에 포함시키는 방법


① style 속성 ⇒  <span style="font-weight:bold;">JavaScript</span>

② style 태그 ⇒ <style> .js{font-weight: bold;} </style>

③ 선택자 'js'를 통해서 여러개 이벤트 발생 ⇒ <span class="js"></span>