고정 헤더 영역
상세 컨텐츠
본문
반응형
들어가기 전
___________________________________________________
안녕하세요 :) 오랜만에 업로드하는것 같습니다 ㅠㅠ
그동안 알바와 알고리즘 공부와 병행하니... 시간이 남아나질 않더라구요 ㅠㅠ
변명 그만하고 오늘 업로드할것들에 대해 소개하겠습니다
오늘의 업로드는 !
1. Style 속성
2. style 태그
3. 선택자
=> Style 태그에 대해 살펴보도록 하겠습니다.
Style 태그
___________________________________________________
이번강의의 학습 목표 , 핵심 단어는 다음과 같습니다!
우리가 웹 페이지등을 꾸미다 보면 CSS를 이용하여 어떠한 글들을 강조하고 싶을때!
그럴때 그 해당 문구를 감싸 사용할수 있는것이 div, span 태그입니다.
그렇다면 이 두가지의 태그들이 어떠한 기능을 가지고 있는 태그들일까요!?
정답은!
놀랍게도 아무런 기능을 가지고있지 않습니다. 그저 이 두개의 태그는
어떠한 특정한 기능들을 가지고있는것이 아닌 해당 문구나 꾸미고싶은 부분에 태그를 하여
CSS나 자바스크립트 코드를 삽입하기 위해 존재하는 태그들 입니다!
다만 두가지의 차이점이 있다면
1. div 태그 : 화면 전체를 사용하기 때문에 줄바꿈이 이루어진다.
2. span태그 : div와 반대되는 개념으로 줄바꿈이 이루어지지 않습니다.
한번 코드를 통해 사용법을 간단하게 알아보도록 하겠습니다.
다음처럼 div 태그를 걸게될 경우!
보이시나요!?
이렇게 줄바꿈이 이루어진것을 확인하실수 있습니다.
반대로 span을 사용할 경우
이렇게 div부분만 span으로 바꾸고 작동시킬경우!
이렇게 줄바꿈 없이 문장이 계속 이어짐을 확인하실수 있습니다.
Class에 대하여
프로그래밍은 항상 최악의 경우를 생각해야합니다.
왜냐하면 코딩을 할때 항상 쉽고 간편하게 나올수가 없기때문이죠.. ㅠㅠ
만약 웹사이트를 만든다 했을때 같은 100개에서 1000개의 반복 되는 문자들을 강조하고싶다했을때
각각 마다 div , span태그로 감싼다음 선언을한다면 매우 어지롭고 시간도 많이걸릴수있습니다. (실수가 생길수도있고)
이때문에 class를 통해 선언을 해준다음 , 각 강조하고 싶은 부분에 해당 클래스를 적용시킨다면 조금 더 간편하게 활용이 가능합니다.
한번, 코드를 통해 자세히 살펴보도록 하겠습니다!
이렇게 해당 코드를 통해 살펴본다면 Javascript를 강조하고 싶다했을때
<head> 부분에 <style>..</style> 태그를 넣은 후 클래스를 만든 후
각 강조하고 싶은 부분에 간편하게 선언했음을 확인할수 있습니다.
여기서 주의해야할점!
클래스를 선언할때 꼭 앞에 .을 붙여야 클래스 선언이 됩니다!
이것은 약속이기 때문에 꼭 붙여야 클래스 선언이 되기 때문에 잊지 말고 꼭 붙이기로!
이렇게 클래스를 통해 해당 클래스에 변경하고싶은 폰트, 색상을 넣어준다면
좀 더 간편하게 바뀐다는 점!
생각해보기
___________________________________________________
오늘의 생각해보기를 한번 살펴보겠습니다.
해당 ATOM에서 이렇게 html문을 선언 후 .js라는 함수안에 글자를 강조해 준 후 색깔을 파랑으로 선언했었습니다!
이렇게 쉽게 글자가 출력됨을 알수 있었습니다!
마치며
___________________________________________________
현재 강의가 다 마무리가 된다면 깃허브를 이용하여 내 홈페이지를 만들고싶었는데
이번 강의를 통해 웹사이트 제작을하는 기초 기반이 잘 다져지는것 같아서 너무 좋았습니다!
과식하지말고 천천히 차근차근 기초부터 쌓자는 마인드!
끝까지 완강하자는 마인드로 열심히 하겠습니다 :)
제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다!
아래 링크드릴게요!
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
다음 업로드는 이어서 선택자 업로드 하도록 하겠습니다 :)
반응형
'네이버 부스트코스 서포터즈 3기' 카테고리의 다른 글
| [부스트코스 서포터즈3기]웹과 자바스크립트 - 제어할 태그 선택하기 + QUIZ 1 (0) | 2021.01.21 |
|---|---|
| [부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(선택자) (0) | 2021.01.20 |
| [부스트코스 서포터즈3기]웹과 자바스크립트 - CSS기초(style 속성) (0) | 2021.01.15 |
| [부스트코스 서포터즈3기] 웹과 자바스크립트 - 변수와 대입연산자 & 웹브라우저 제어 (0) | 2021.01.12 |
| [부스트코스 서포터즈3기]웹과 Java script - 콘솔 (0) | 2021.01.11 |
