728x90
반응형
class 선택자  ID 선택자
같은 이름을 부여할 때 사용 중복하여 사용할 수 없음
여러 개의 요소에 같은 class 부여 가능 유일한 이름 부여할 때 사용 (고유성 O)
하나의 요소에 여러 개의 class 부여 가능  선택자 앞에 # (올림표)가 붙음.
선택자 앞에 .(온점)이 붙음 .
중복하여 사용 가능
class 이름 교체 가능 (개명 가능)
이름(id)을 여러 개 가질 수 있음
중복 선언 가능
숫자로 시작할 수 없음
주로 영문자로 시작함

 

 

 

▶class 선택자

-여러 개의 요소에 같은 class 부여 가능

  노란 밑줄은 전부 같은 class 이름(sample) 을 가지고 있음. 

 

 

 

-하나의 요소에 여러 개의 class 부여 가능

 분홍색 밑줄처럼 하나의 태그 안에 class가 두 개 들어있는 것을 확인할 수 있음.

 

 

 

-선택자 앞에 .(온점)이 붙음

파란색 밑줄 (class 선택자)는 선택자 앞에 .(온점)이 붙어 있고,

보라색 밑줄 (id 선택자)는 선택자 앞에 #(올림표)가 붙어 있는 것을 확인할 수 있음.

 

 

 

 

▶id 선택자

-유일한 이름을 부여할 때 사용

빨간 밑줄처럼 한 태그에 id 태그가 1개만 부여됨.

 

 

 

-선택자 앞에 #(올림표)가 붙음

 위의 사진에서 봤던 파란 밑줄 쳐진 id 선택자 앞에 전부 # (올림표)가 붙어 있음.

 

728x90
반응형

See the Pen Tail Animation by WOO HYUN (@fiatlux__) on CodePen.

728x90
반응형

자료형[각주:1]

: 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 함. 그런 자료의 형태.

 

크게 원시 유형과 객체로 나누어짐.

 

원시유형
(하나의 값만 저장하는 자료형)		 객체
숫자, 문자열, 논리형, undefined[각주:2], null[각주:3], symbol 원시 유형을 제외한 전부

 

 

 

자료형의 관계

 

 

 

▶ typeof() 함수

-자바스크립트에 미리 만들어져 있는 함수.

-소괄호() 안에 값이나 변수를 넣으면 어떤 자료형인지 알려줌.

 

typeof (값 or 변수)

let data = 5
typeof(data) //"number"

 

 

 

▶숫자형

-모든 프로그램에서 가장 기본이 되는 자료형.

-정수와 실수를 함게 묶어서 '숫자형'이라고 함.

 -" " 없이 입력하면 숫자로 인식.

-그러나, " "로 묶으면 문자열로 인식함.

 

typeof(10 )         //"number"
typeof("10")       //"string"
typeof(3.145)    //"number"

 

 

 

▶문자열

-작은 따옴표(' ')나 큰 따옴표(" ")로 묶은 데이터를 의미.

-문자열의 앞 뒤에 붙이는 따옴표는 같아야함.

-따옴표만 있고 내용이 없어서 문자로 인식함.[각주:4]

 

typeof("안녕하세요?")     //string
typeof("10")                    //string
typeof(" ")                       //string

 

 

 

▶논리형

-참(true)이나 거짓(false) 값을 표현하기 위한 데이터 유형.

-사용할 수 있는 값은 true, false이며 지정한 조건과 일치/불일치 여부를 확인하는 조건식에서 자주 사용함.

 

10 > 2              //true
7 < 3               //false

 

 

 

▶undefined

-변수를 만들기만 하고 값이 할당되지 않았을 때 자동으로 부여하는 변수의 초깃값.

-값이면서 동시에 자료형.

-빈 값인지, 유효한 값인지 정할 수 없는 상태.

-사용자가 실수로 값을 지정하지 않은 것.

 

let  a

console.log (a)            //undefined

=> 변수를 선언만 하고 값을 할당하지 않았음.

 

 

 

▶null

-값이 없거나 유효하지 않은 값.

-반환하거나 사용자가 할당할 수 없는 값.

-값이면서 동시에 자료형.

-사용자가 일부러 유효하지 않은 값을 지정한 것.

 

let age = null;

=> 유효하지 않은 값을 지정함.

 

 

 

▶객체

-하나의 변수에 다양한 정보가 포함되어 있는 자료형.

-{} (중괄호) 안에 모든 정보를 담음.

-데이터와 그 속성까지 저장함.

-키와 값으로 하나 또는 여러 개의 쌍을 만들 수 있음.

-여러 정보를 하나의 객체로 만들 수 있음.

-배열의 특징을 가짐.

-데이터를 식별하여 불러올 수 있음.

 

ex)

const obj = new Object{};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);

 

▷객체 값 출력

객체명. 키 이름               console.log(obj.a)                     //a값 가져오기
           or
객체명["키 이름"]             consloe.log[0]                         //0값 가져오기

 

 

 

▶배열

-하나의 변수에 여려 개의 값을 저장할 수 있는 유형. 역시 객체임.

-[ ] (대괄호)로 묶고 그 안에 값을 나열하며, 각 값은 쉼표(,)로 구분함.

-[ ] 안에 아무 값이 없어도 배열로 인식함. (빈 배열)·

 

   배열명  = [값, 값, ····]

ex)

 

const arr = [ ];

arr [0] = 100;
arr [1] = 200;
arr [2] ="javascript";

 

 

 

▶심벌 (Symbol)

-에크마스크립트[각주:5] 2015에 새롭게 추가된 원시 유형의 자료형.

-유일성을 보장함.

-객체 프로퍼티[각주:6]의 키로 사용할 수 있음.

-한 번 만들면 변경할 수 없음.

-같은 값을 가진 심벌을 만들 수도 없음.

 

Symbol ()

ex)

 

let var1 = Symbol()
let var2 = Symbol()
var1 === var2                     //false

 

 

 

 

 

 

 

 

  1. '데이터 유형' 이나 '데이터 타입이라고도 함' [본문으로]
  2. 값이 할당 되지 않았을 때의 초깃값 [본문으로]
  3. 값이 없거나 유효하지 않은 값(빈 값인지 유혀한 값인지 정할 수 없는 상태) [본문으로]
  4. 이러한 문자열을 빈 문자열이라고 함. [본문으로]
  5. 스크립트 언어들의 표준 [본문으로]
  6. 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형 [본문으로]
728x90
반응형

▶내부 스타일시트

-<style> 태그로 기재.

-문서 안에 CSS가 함께 저장되도록 하는 형태

 

 

 

▶외부 스타일시트

-스타일 속성들을 따로 저장, 파일명으로 연결.

-*.css 확장자를 가진 별도의 파일로 저장

-<link> 태그를 이용하여 선언.

 

CSS 확장자를 가진 파일이 별도로 존재

 

 

▶@import

-CSS 안으로 다른 CSS 파일을 불러들일 경우 사용.

-CSS의 맨 윗줄에 기재

-공통으로 들어가야 할 스타일을 따로 저장하여 다른 CSS에 삽입시켜 사용.

 

 

 

▶인라인 스타일

-태그에 직접 CSS를 정의해주는 기법.

-해당 요소에 style=" " 형식으로 기술.

-내부스타일과 외부 스타일보다 우선 적용됨.

-우선순위가 절대적으로 높아야 할 경우에 사용.

-공통 CSS로 수정 불가.

-일일히 열어서 수정.

 

 

728x90
반응형
728x90
반응형

시멘틱 마크업[각주:1]

▶ 시멘틱(Semantic)은 사전적 뜻은 "의미 있는" 혹은 "의미론적인" 정도로 해석 가능.

▶ 의미에 부합하는 태그를 사용하여 HTML 문서를 작성하라는 뜻이라고 볼  수 있음.

▶ 같은 정보라도 개개인 마다 받아들일 수 있는 의미가 다르므로

    시멘틱하게 마크업 하기 위해 각 태그가 가지고 있는 의미대로 용도에 맞게 적절히 사용하여야 함.

 

      -제목을 정의하기 위해 <h1>~<h6> 중 적절한 태그를 골라서 사용.

      -헤더를 정의하기 위해 <header> 태그 사용.

      -목차, 색인 등에 <nav> 태그 사용.

      -순서 목록 작성 시 <ol> 태그를, 비순서 목록 작성 시 <ul>태그 안에 <li> 태그 사용.

 

시멘틱 마크업을 해야 하는 이유

1. 검색 엔진이 시멘틱 태그를 중요 키워드로 간주, 검색엔진 최적화에 유리.

2. 웹 접근성 [각주:2]이 필요한 사용자가 의미를 잘 파악할 수 있도록 하기 위함.

3. 같은 태그로 둘러싸인 코드 보다 적절한 태그를 사용하였을 때 가독성이 높아짐.

 

 

논리적 순서 마크업

▶ 논리적 순서에 의해 마크업을 하는 것은 매우 중요함.

▶ 키보드나 마우스, 터치 패드와 같은 입력 장치 만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수         있도록 하는 입력장치 접근성과 밀접한 관련이 있음.

▶ 콘텐츠는 사용자가 내용을 쉽게 이해할 수 있도록 논리적인 순서로 제공되어야 하기 때문.
▶ 단순히 디자인의 시각적인 흐름 보다는 내용에 대한 논리적 흐름 순서를 정확히 파악하는 것이 중요.

 

 

예를 들어서,

이 사이트를 디자인 한다고 쳤을 때, 파란색 화살표 순(국가자격시험 - 전문자격시험··· 순)으로 HTML 문서를 작성하는 것보다,

빨간색 화살표 (국가자격시험 - 원서접수···) 순으로 HTML 문서를 작성하는 것이 논리적인 순서이며, 사이트 사용자도, 사이트 제작자도 알아보기 쉽다는 것.

 

 

이처럼 마크업을 할 때는 디자인의 시각적 흐름 보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요함.

 

  1. HTML 태그로 문서를 작성하는 것. [본문으로]
  2. 장애인이나 고령인 사용자들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용하며, 이해할 수 있도록 보장하는 것. [본문으로]
728x90
반응형

블록 레벨 요소 (Block-Level Elements)

  • 마크업(Mark up) 시 줄이 바뀌는 특성(세로정렬)을 가짐. 
  • 박스 개념으로 가로 폭 전체를 홀로 차지하고, 옆에 다른 요소를 두지 않음. (한 덩어리라고 이해하면 쉬움)
  • 텍스트 요소 (문자)와 인라인 요소를 자식 요소(안에 들어가는 요소)로 포함 시킬 수 있음.
  • 블록 요소 중에서도 자식 요소로 포함 시킬 수 있는 요소가 있고, 아닌 요소가 있음.

 

자주 쓰이는 블록 레벨 요소

1. <h1> ~ <h6>: 제목을 정의할 때 사용하는 태그

 

2. <header>

: 헤더를 정의할 때 사용하는 태그 (머리글)

 

3. <p>

: 단락을 정의할 때 사용하는 태그

 

4. <nav>

: 주로 메뉴, 목차, 색인 등을 정의하는 태그

내비게이션처럼 쉽게 찾을 수 있도록 사용함.

  

5. <table>

: 표를 만드는 태그

 

6. <ol>

: 순서 목록을 정의할 때 사용하는 태그

 

7. <ul>

:  비순서 목록을 정의할 때 사용하는 태그

   <li> 태그만 자식 요소로 올 수 있음.

 

8. <li>

: 항목을 정의할 때 사용하는 태그

 

9. <div>

: 요소들을 그룹으로 정의하는 태그 

 태그 자체에는 아무런 의미도 없음.

 

인라인 요소 (Inline Elements)

  •  마크업(Mark up) 시 가로 정렬 됨. (줄 바꿈이 없음)
  •  자신의 글자 수 만큼의 영역만 차지함.
  •  텍스트(문자) 요소와 인라인 요소를 자식 요소로 포함할 수 있음.
  •  블록 레벨 요소를 자식 요소로 포함 할 수 없음.

 

자주 쓰이는 인라인 요소

 

1. <span>

: 인라인 요소들을 그룹으로 정의하는 태그

 

2. <a>

: 링크를 지정할 때 사용하는 태그

 

3. <br>

: 줄 바꿈 시 사용하는 태그

 엔터(Enter)라고 생각하면 쉬움.

 

4. <strong>

: 중요한 텍스트 (문자)를 정의하기 위한 태그

 <strong> 태그 사이의 문자는 굵고 진하게 표시됨.

 

5. <img>

:이미지를 삽입하기 위해 사용하는 태그

 

 

+ Recent posts

티스토리툴바