[3주차] 1. HTML의 전역 속성과 CSS의 개요 및 선택자

HTML

 

전역속성 : 모든 html 요소에서 공통적으로 사용 가능한 속성
1. class 속성
- 태그에 별명 혹은 별칭 부여할 때 사용
- 공백으로 여러 개 별명 설정 가능
- css 혹은 js에서 요소를 선택하는 방법으로 쓰일 수 있다.
- 동일한 class가 여러 태그에 동일하게 들어가도 상관없음
- 중복 사용 가능(중요한 부분이 아닐 때 사용)
- css에서 .class이름으로 찾을 수 있다.
- js에서 찾을 때 const 변수이름설정 = document.querySelector(‘.class이름’)
ex) const section = document.querySelector(‘.section’) -> class가 section인 요소 검색

2. id 속성
- 하나의 태그에 고유한 식별자(이름) 설정
- 고유하게 한 곳에 하나만 있어야 함
- 중요한 부분에서 고유하게 사용된다 전제가 있다면 사용 가능
- css에서 #id이름으로 찾을 수 있다.
- js에서 찾을 때 const 변수이름설정 = document.querySelector(‘아이디이름’)
ex) const sectionID= document.getElementByID(‘section’) ->id가 section인 요소 검색

3. style 속성
- html에 style 속성 추가하는 방식은 css의 인라인 작성방식
ex) <h1 style=”color:red; background:blue;”>텍스트</h1>
- html 요소에 적용할 css 선언할 수 있다.

4. title 속성
- html 요소에 정보나 설명을 지정 시 사용 가능
- title 속성 설정 시 브라우저 상 title이 설정된 텍스트에 마우스에 댔을 때 tip으로서 표시가 됨
- 굉장히 많은 곳에서 쓰여서 꼭 알아두어야 할 속성이다.

5. lang 속성
- language의 약어
- 요소의 언어 설정
- 태그 안에 들어간 텍스트가 특정한 언어다 라고 명시할 수 있다.
- 전역속성이기 때문에 태그 안에다가 사용할 수 있지만 굉장히 많은 경우에 html 태그 안에 쓴다.(일반적으로 사용되는 사이트들은 언어가 설정되는 것이 보통은 하나이기 때문에)

6. data-* 속성
- 사용자가 정의하는 데이터 속성 만들어낼 때 사용
- js에서 사용할 수 있는 data를 html에 저장하는 용도로서 사용
- data를 html에서 보관하고 있다가 js에서 활용할 때 쓸 수 있다.
- 사용자 정의 데이터 속성을 지정하는 데 js에서 이용할 수 있는 데이터로서 html에 저장하는 용도로 data- 속성을 쓸 수 있다.
- data-원하는 형태 그 데이터의 이름 작성=”실제값”
- ‘data-‘ 은 데이터이다 라는 뜻
- 예제
<div id="me" data-my-name="YOONS" data-my-age="52">YOONS</div>

<script>
const me = document.getElementById('me');

console에 log로 작성되어 기록되었으면 할 때 작성
console.log(me.dataset.myName); data-my-name 값이 console에 출력
console.log(me.dataset.myAge); data-my-age 값이 console에 출력
</script>

7. draggable 속성 (true/false/auto)
- 요소가 Drag and Drop API 사용 할 수 있는지에 대한 여부 설정
- Drag and Drop API : 실질적으로 웹에서 사용자가 drag하고 drop할 수 있는 명령 체계
- 기본값은 draggable=”auto” 이고 브라우저가 drag하고 drop할 수 있는지 판단하는 것이다.

8. hidden 속성
- 요소를 만들어놓고 화면에서 숨길 때 사용
- 특정 부분을 숨길 수 있지만 숨겨진 부분의 실질적인 html은 동작할 수 있는 내용이다.
- 양식 태그에서 많이 사용됨 ex) form 태그

9. tabindex 속성
- 탭키를 사용해서 요소를 순차적으로 포커스 탐색 할 때 순서를 지정해주는 속성
- 일반적으로 대화형 콘텐츠(input 태그, img 태그, a 태그, button 태그, video 태그 등)에 해당하는 경우 기본적으로 html 작성하는 코드 순서에 따라 탭의 순서가 자동으로 지정.
- 대화형 콘텐츠는 기본적으로 tabindex=”0”
- 0을 제외한 양수가 있는 순서대로 tabindex 이동 > tabindex=”0”인 경우 코드 먼저 작성된 순서대로 이동
- tabindex를 뒤죽박죽인 것을 만드는 것 보다는 되도록 html 작성된 순서대로 탭 이동이 가능하게 두는 것이 좋음
- tabindex=”-1”을 통해서 대화형 콘텐츠이긴 하지만 탭순서에서 제외 가능
- 비대화형 콘텐츠는 tabindex = “0”을 지정하여 대화형 콘텐츠와 같이 탭 순서를 사용할 수 있다.(작성 안할시 탭이 안먹음)

특수 기호(entity)
- html에서 특정한 명령으로서 동작할 수 있는 코드를 텍스트로 출력이 가능한 형태로 특수기호를 사용해서 작성할 수 있다.
1. 띄어쓰기
- &nbsp; 은 한번의 띄어쓰기를 의미 ex) Hello&nbsp;world -> Hello world
- HTML에서 기본적으로 입력되는 띄어쓰기는 여러 번이 들어가더라도 브라우저 상 한번만 들어가게 됨(그래서 &nbsp; 사용해서 여러 번 입력시 여러 번의 띄어쓰기 다 적용됨)

2. <> 꺽쇠괄호
- <는 &lt; >는 &gt;
- 특수기호로 대체해서 텍스트화 해서 화면에 삽입할 수 있다.
- 예제
<h1>
<div></div>
</h1>
위코드와 동일하게 작성하면 브라우저 상 아무것도 나타나지 않지만

<h1>
&lt;div&gt;&lt;/div&gt;
</h1>

위 코드와 같이 작성시에는 <div></div>태그가 브라우저에 아래 그림과 같이 나타남

구현

 

---

CSS

기본적인 문법
1. 작성방법
- 선택자 { 속성: 속성값; 속성: 속성값; } -> :과 ;이 꼭 붙어야 함
- 왼쪽에서 오른쪽에서 작성하는 방식은 코드가 많아질 시 가독성이 떨어진다. 그래서 아래와 같이 작성
선택자 {
속성: 속성값;
속성: 속성값;
}

2. 선택자
- html의 원하는 요소 검색해주는 것
- html의 특정한 부분을 검색해서 연결해주는 역할을 한다.
- 속성을 잘 알아도 적용할 부분을 잘 선택하지 못할 시 도루묵이다.

3. 속성과 값
- 선택자로 검색된 그 대상에 지정할 css의 명령 세트
-  ‘속성’은 ‘값’이다로 해석
- 속성: 스타일을 꾸며주는 명령들, 값: 속성에 따는 값
ex) color: red; 여기서 color가 속성 red가 값이다.

4. 주석
-문서 내의 수정사항이나 설명 등을 작성, 작성된 것은 실질적인 코드로 해석되지 않음
- 기호 외우지 말고 단축키 사용 윈도우의 경우 ctrl + / , 맥의 경우 command + /
- /* comment */
선언방식
1. 인라인(in-line) 방식
- html에 직접 작성해서 선택자를 사용할 필요가 없다. 하지만 더 좋은 것은 아님
- 반복적인 사용과 유지보수를 하려면 직접 작성하는 것은 좋지 않다.
- 예제
<div style="color: red; font-size: 16px;" ></div>

2. 내장(embedded) 방식
-html에 style 태그 사용하여 작성하는 방식
-head 태그 안에 작성하는 것이 대다수
- 예제
<style>
div {
color: red;
font-size: 16px;
}
</style>

3. link 방식
- html 의 link 태그를 이용해서 외부 css 문서를 가지고 와서 적용하는 방식
- link 태그 이용시 html은 link 태그로 가져오라는 명령하는 css들을 동시 호출(여러 개의 문서 동시 호출 가능) -> 병렬방식 호출(4개 문서 호출시 1초 걸림)

- 예제
<link rel="stylesheet" href="./main.css"> html에 작성

4. @import 방식
- @import를 이용해서 외부에 있는 css를 가져오는 방식
- link 태그는 html의 외부에 있는 css를 가져오는 것이고 css에서 외부 css 문서를 가져오는 것
- css가 css를 불러올 때 사용
- 여러 개의 css 문서 호출시 1번 css 호출완료시 2번 css 문서가 호출되고 이런 앞 문서가 먼저 호출이 완료가 되야 다음 문서가 호출이 될 수 있다(직렬방식 호출) -> 4개 문서 호출시 4초 걸림
- 일반적으로는 link 방식을 활용하되 2번 css를 호출하기 위해선 1번 css가 먼저 호출되어야 하는 특수한 상황이 필요한 경우에는 @import 방식을 쓰는 것이 좋다.
- 예제
@import url(./common2.css);

기본 선택자(basic selectors)
- 굉장히 중요한 개념으로 완벽하게 학습하는 것이 좋음
- html과 css를 연결하는 개념
- 순서대로 기억하기
1. 전체 선택자(universal selector)
-전체 선택
- 요소 내부의 모든 요소를 선택할 때 사용
- 기호 : *

2. 태그 선택자(type selector)
- 태그이름을 가지고 요소를 찾을 때 사용
- 앞뒤로 기호 없을 경우 태그 선택자
- 단독으로 사용하는 경우 활용도가 떨어짐
- 태그이름 { 속성: 값; }

3. 클래스 선택자(class selector)
-html이 가지고 있는 class 별명을 통해서 검색
- 많이 사용되는 선택자 중 하나
- .클래스별명 { 속성: 값; }

4. 아이디 선택자(ID selector)
- html id 속성 값에 따른 요소 설정
- #아이디이름 { 속성: 값; }
- 중요하게 사용됨

---

기타

상대경로(./ , ../)
-상대적으로 경로가 달라질 수 있다.
- 특정한 명령이 작성된 파일에서 출발
- ./  현재 파일의 주변에서 찾는 개념(생략 가능)
- ../  폴더 밖으로 한번 나가라는 개념
- html에서 사용하는 경우 <img src=”./assets/images/xxx.jpg”> (이미지 삽입 작성 코드) 이런 식으로 작성
- css에서 사용하는 경우 background:url(“../assets/images/xxx.jpg”); (배경 이미지 삽입 작성 코드) 이런 식으로 작성

절대경로(http, /)
- 바뀌지 않는 경로
- html의 경우 <img src=”http://사이트주소/assets/images/xxx.jpg”>
- css의 경우 background:url(“http://사이트주소/assets/images/xxx.jpg”);
- html에서 가져오나 css에서 가져오나 주소는 동일하다.
- 계속해서 한 사이트 내에서만 가져올 경우 도메인(http://사이트주소) 생략 가능

주석
-문서 내의 수정사항이나 설명 등을 작성, 작성된 것은 실질적인 코드로 해석되지 않음
- 모든 editor(html, css 등) 상 단축키 : 주석 처리할 영역 드래그 후 ctrl + /
- 단축키를 외우는 것이 낫다.
- html 의 경우<!--텍스트-->
- css의 경우 /* 텍스트 */
- js의 경우 //텍스트 or /* 텍스트 */

---

TIPS
- 일반적으로 js는 –(하이픈)을 사용(대쉬표기법)하는 이름을 쓰지 않음. 그래서 카멜 표기법을 씀(myAge)
- @ at 규칙
- E = 요소 = 태그

---

참고자료
https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리