[한 번에 끝내는 프론트엔드 개발 : HTML, CSS] Ch1~Ch7 5. 선택자_가상 클래스(1)

yimyg0596·2022년 9월 16일
28

📖 Ch1 개요, Ch2 VS Code

박영웅 강사님 블로그 사이트

https://heropy.blog

웹앱의 동작원리

웹페이지가 출력되는 영역 : 뷰포트(Viewport)

단축키 & 공백2로 만들기

사이드 (Side Bar)열고/닫기 : Ctrl + B

빠른 열기(파일이나 기호 탐색) : Ctrl + P

모든 명령 표시(에디터의 모든 명령에 접근) : Ctrl + Shift + P

편집기 닫기 : Ctrl + W

찾기(검색) : Ctrl + F

찾기(검색)/바꾸기(대체) : Ctrl + H

줄 위로 이동 : Alt + Up

줄 아래로 이동 : Alt + Down

아래에 줄 복사 : Alt + Shift + Down

되돌리기  : Ctrl + Z

위에 줄 복사 : Alt + Shift + Up

내어쓰기 : Shift + Tab

공백 : 2 권장함

편집기 분할(백슬래쉬) : Ctrl + \

📚 Ch3. 무작정 시작하기

Doctype(DTD)

<!DOCTYPE html>

문서의 HTML버전을 지정하고, ‘코드가 작성되어져 있는 HTML파일은 웹표준에 의거하여 동작합니다’ 라는 의미 입니다.

CSS, JS연결하기

<link rel="stylesheet" href="./main.css"> // css연결
<script src="./main.js"></script> // js 연결

html파일의 head태그 안에 작성하면 css, js 파일을 연결할 수 있습니다.

정보를 의미하는 태그 살펴보기

<title>Naver</title>

HTML 문서의 제목(title)을 정의하며, 웹 브라우저 탭에 표시됩니다.

<link rel="icon" href="./favicon.png">

아이콘을 지정하는 코드인데요. Favorite Icon을 줄여서 Favicon(파비콘)이라고 부릅니다. HTML Favicon을 적용할 때는 이름을 favicon이라고 지정하시길 권장하며, favicon.ico혹은 favicon,png파일이 주로 사용됩니다.

화면에 이미지 출력하기

<img src="./images/logo.png" alt="HEROPY">
<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

alt(Alternate 단어의 약어)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부릅니다. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하시면 충분합니다.

상대 경로와 절대 경로

“./ (생략가능)“는 주변에서 찾는 개념이며, 주변의 기준은 상대적으로 바뀔 수 있습니다.
“../ “는 상위폴더로 올라간다는 의미로 자기가 속해있는 폴더에 위쪽으로 올라가서 주변에서 찾게 되며, 밖으로 한번 나가세요 라는 의미입니다.
“http(https)”는 원격의 다른 사이트를 의미합니다.
“/ (//)” 는 최상위 경로(루트경로)를 의미합니다. 프로젝트 폴더 경로로 들어오자마자 있는 그 위치를 루트경로라고 합니다.

localhost 는 우리의 컴퓨터 환경이며, 루트경로에는 index.html파일, images,css폴더가 있는 것입니다.

페이지를 나누고 연결(링크)하기

<a href="https://naver.com">NAVER</a>
<a href="/about">About</a>
<a href="/login">Login</a>

/about만 쓰기 : 이것이 가능한 이유는 브라우저는 자동으로 index.html이라는 파일을 찾기 때문에 그 파일이 들어있는 폴더만 명시해두면 자동으로 index.html파일을 찾습니다.

<a href="/">Home</a>

/ : index.html을 찾습니다.

📚 Ch 4. 웹에서 시작하기

Codepen.io 소개

브라우저 스타일 초기화

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">

각 브라우저마다 기본적으로 적용되는 스타일이 있는데 그걸 초기화하려면 https://www.jsdelivr.com/package/npm/reset-css 페이지에 들어가서 코드 복사하고(copy html), main.css link태그 위에 적으면 스타일 초기화를 할 수 있습니다.

Codepen에서는 css설정 들어가서 CSS Base를 Reset으로 체크하면 브라우저 스타일을 초기화 할 수 있습니다.

Emmet

div>ul>li*4{$}

<div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

Emmet은 CSS 선택자를 활용해 사용하는 기능입니다. *기호는 곱하기, { }는 내용을 삽입, $는 순서대로 숫자 입력을 의미합니다. tab키를 누르면 적용됩니다.

📚 Ch5. HTML 개요

부모와 자식 관계의 이해

부모요소는 바로 윗 단계에 있는 요소이며, 상위(조상)요소는 부모요소도 포함하는 개념으로 윗 단계에 있는 요소들을 모두 포함합니다.

자식요소는 바로 아랫단계에 있는 요소이며, 하위(후손)요소는 자식요소도 포함하는 개념으로 아랫단계에 있는 요소들을 모두 포함합니다.

글자와 상자

인라인(Inline) 요소 : 글자를 만들기 위한 요소들

인라인 요소는 요소가 수평으로 쌓이고, 가로 세로 사이즈를 지정할 수 없으며 포함한 콘텐츠 크기만큼 자동으로 줄어듭니다. 가로 세로 너비 스타일을 지정해도 반응을 하지 않습니다.

여백이라는 개념을 사용할 때 좌우는 되는데 위 아래는 안됩니다.

인라인요소는 자식요소로 블럭요소를 사용할 수 없습니다.

블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들

블록 요소는 요소가 수직으로 쌓이고, 가로 세로 사이즈, 여백을 모두 지정할 수 있습니다.

📚 Ch 6. HTML 핵심 정리

핵심 요소 정리

블록(상자)요소 : div, h1, p, ul, li
인라인(글자)요소 : img, a, span, br, label

<a href="https://www.google.com" target="_blank">Google</a>

target은 링크URL의 브라우저 탭 위치를 지정해주는데 _blank를 입력하면 기존탭이 아니라 새탭에 Google 사이트가 열립니다.

  • input요소는 수평으로 쌓이는 특징을 갖고 있지만 가로세로 여백을 지정할 수 있어서 inline-block이라고 합니다. 베이스는 인라인요소지만 블록요소의 특징을 가지고 있습니다.

  • input type=”radio”는 그룹을 만들어줘야 합니다.

  • HTML은 구조를 만드는 역할을 하므로, 각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 사용하는지 정도만 기억해 두시면 충분합니다. 눈에 보이는 예쁘게 만드는 작업은 CSS가 그 역할을 담당합니다.

주석

단축키 : Ctrl + /

전역속성

전체 영역에서 모두 사용할 수 있는 속성을 의미합니다.

  • title : 마우스를 올리면 보이는 요소의 정보나 설명을 지정합니다.
  • style, class(중복 가능), id(고유)
  • data-이름=”데이터” : 요소에 데이터를 지정합니다.
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>
const els = document.querySelectorAll('div')
els.forEach(el => {
  console.log(el.dataset.fruitName)
})

콘솔창에 apple, banana가 출력됩니다.

<script defer src="./main.js"></script>

Script 요소에 defer 속성은, HTML구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미입니다.

📚 Ch7. CSS 개요

선언 방식

내장방식은 html head태그 안에 작성하며 권장하는 방식은 아닙니다.

링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식입니다.

@import 방식은 직렬로 연결하는 것이고, main.css가 html에 연결되어 있지 않으면 box.css도 연결되지 않습니다.

선택자_기본

* {
	color: red;
}

전체 선택자로 모든 요소를 선택합니다.

li {
	color: red;
}

태그 선택자로 태그 이름이 li인 요소를 선택합니다.

.orange {
	color: red;
}

클래스 선택자로 앞에 . 을 붙입니다.

#orange {
	color: red;
}

아이디 선택자로 앞에 #을 붙입니다.

선택자_복합

span.orange {
	color: red;
}

일치 선택자 : 선택자를 동시에 만족하는 요소를 선택합니다. 일치선택자를 작성할 때, 태그선택자를 사용해야 한다면 태그선택자는 항상 앞에 적어줍니다.

선택자는 뒤에서부터 해석하는게 편합니다.

ul > .orange {
	color: red;
}

자식 선택자 : ul의 자식 요소이고, .orange 인 요소를 선택합니다.

div .orange {
	color: red;
}

하위(후손) 선택자 : div의 하위 요소이고, .orange인 요소를 선택합니다. ‘띄어쓰기’가 선택자의 기호입니다.

.orange + li {
	color: red;
}

인접 형제 선택자 : .orange선택자 다음 형제 요소 하나를 선택합니다.

.orange ~ li {
	color: red;
}

일반 형제 선택자 : .orange선택자 다음 형제 요소 모두를 선택합니다.

선택자_가상 클래스(1)

우리가 어떤 행동을 했을 때 동작하는 개념입니다.

:hover : 마우스를 올렸을 때, 어떻게 처리할 것인지에 대한 선택자

:active : 마우스를 클릭하고 있는 동안

<div class="box" tabindex="-1"></div>
.box:focus {
  width: 300px;
  background-color: royalblue;
}

:focus : 선택자 요소가 포커스되면

포커스가 될 수 있는 요소는 몇가지 정해져 있습니다. 대표적으로 input 요소, 사용자에게 데이터를 입력받는 요소들 입니다.

그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있습니다. 값으로 -1을 넣습니다.

profile
프론트엔드 개발 공부

4개의 댓글

comment-user-thumbnail
2022년 9월 16일

퀄리티에 감탄하고 갑니다... 정보찾으려면 제 벨로그말고 여기로 오겠습니다...
잘 부탁드립니다 ㅎㅎ 😆😆

1개의 답글
comment-user-thumbnail
2022년 9월 17일

작성하는데 정성이 느껴지는 블로그예요 👍🥰
예지님 공부열심히 하셨군요!! 앞으로도 잘하실꺼같아요 화이팅!! :)

1개의 답글