MARS 2차시 과제

입문자를 위한 HTML 기초 강의 #2 개발자 도구와 코드 에디터

https://www.youtube.com/watch?v=KBTN9NxjOWM 

개발자 도구

웹사이트 개발용 도구로, 대부분의 최신 브라우저에 탑재되어 있다

HTML. CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 다양한 기능을 제공

 

개발자 도구 열기 (크롬 기준)

F12 or 우측 상단 메뉴 -> 도구 더보기 -> 개발자 도구

 

코드 에디터

프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어

 ex) vs code, intellij 등등

---

입문자를 위한 CSS 기초 강의 #2 CSS 기본 문법 및 사용 방법

https://www.youtube.com/watch?v=yZq_B6cQ9mo 

CSS 기본 문법

선택자{
	속성명: 속성값;
}

선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보

{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역

속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)

속성값 : 어떻게 정의하고 싶은지에 대한 정보

 

주석

사람에게는 보이지만, 컴퓨터(웹 브라우저)에게는 보이지 않는 코드

주로 코드에 대한 메모를 남기기 위한 용도로 사용

 

HTML에 CSS를 더하려면

• 인라인 스타일 : HTML 태그에 직접 작성
• 내부 스타일 : style 태그를 추가하여 작성
• 외부 스타일 : css 문서를 따로 작성하여 HTML 문서와 연결

인라인 스타일

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식

웹 콘텐츠와 스타일시트를 구분하기 위해서는 사용하지 않는 편이 좋다

<p style="color: blue;">
	글자를 파랗게 만들어줘
</p>

내부 스타일

HTML 문서에 style 태그를 추가하여 그 안에 CSS 코드를 작성 및 적용한다

<style>
	p{
    	color: red;
    }
</style>

외부 스타일

확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고,HTML문서에 link 태그로 연결한다

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

• href : 연결하고자 하는외부 소스의 url을 기술하는 속성
• rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

link 태그는 HTML 문서의 head 태그 안에 사용해야 함!!!

---

입문자를 위한 CSS 기초 강의 #3 CSS 선택자 1편

https://www.youtube.com/watch?v=ZDNHpONynUk 

선택자

선택자{
	속성명: 속성값;
}

종류

• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소

기본 선택자 

  1. 전체 선택자

    - 모든 요소를 선택한다

    - *(애스터리스크)는 문서 내의 모든 요소를 의미하는 기호이다

*{
	color: blue;
}

  => 문서 내 모든 요소의 글자 색을 파란 색으로 지정한다!

    2. 태그 선택자

    - 주어진 이름을 가진 태그를 선택한다.

p{
	color: blue;
}

  => 문서 내 모든 p 태그 요소의 글자 색을 파란 색으로 지정한다!

    3. 클래스 선택자

    - 주어진 class 속성값을 가진 요소를 선택한다

.text{
	color: blue;
}

  => 문서 내 모든 class가 text인 모든 요소의 글자 색을 파란 색으로 지정한다!

    4. 아이디 선택자

    - 주어진 id 속성값을 가진 요소를 선택한다.

#topic{
	color: blue;
}

  => 문서 내 id가 topic인 요소의 글자 색을 파란 색으로 지정한다

  5. 그룹 선택자

    - 다양한 유형의 태그를 한꺼번에 선택하고자 할 때 사용

h1, p, div {
	color: blue;
}

  => 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란 색으로 지정한다!

 

선택자가 겹치는 경우

  - 기본적으로 나중에 작성된 스타일이 저용됨

  - 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정됨

선택자 우선순위

  아이디 선택자 > 클래스 선택자 > 태그 선택자