(1) 리스트 타입 지정하기 .circle { list-style-type: circle; } .square { list-style-type: square; } .upperAlpha { list-style-type: upper-alpha; } .lowerRoman { list-style-type: lower-roman; } 리스트의 스타일의 종류를 지정할 수 있다. 단, UL(Unordered List)와 OL(Ordered List)는 서로 갖는 속성값이 다르므로 주의가 필요하다. 속성명 요소 종류 값 설명 list-style-type ul disc 작은 검은색 원 circle 작은 흰색 원 square 사각형 ol decimal 숫자(기본값) upper-alpha 영문 대문자 lower-alpha 영..
1.색 표현 법 (1) 색상 이름으로 표현 색 이름 aqua blue lime purple white teal olive green black fuchsia navy silver yellow red maroon gray 사전 설정된 컬러 값으로 표현함. 위 표기는 html4.0에서 적용된 14개의 기본 컬러이다. 또한 웹 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 그러므로 사용시에는 컬러 이름으로 지정하는 것 보다 hex코드로 입력하는 것을 추천한다. (2) RGB 색상값으로 표현 RGB 표현 예시 h1{ color: rgb(0,128,0); } h2{ color: rgb(192,192,192); } RGB값으로 색을 표기하는 방식. 순서..
1_FONT 속성 (1) 서체(font-family) See the Pen aeVoYV by ++EXP (@pp_exp) on CodePen. FONT 속성은 서체와 관련된 속성으로, 종류, 스타일, 작성 형태, 크기, 굵기 등을 지정할 수 있다. 국가별로 분류되는 방식과 시스템 내에서 읽히는 방식의 문제 때문에 다수의 폰트를 지정한다. (만약 앞서 폰트가 없다면, 뒤의 폰트로 읽는다.) 한글 폰트는 한글-영문의 순서로 입력하며, 한글 혹은 공백이 포함된 경우, 따옴표로 묶어준다. 영문 폰트는 폰트 종류를 입력하고 공백이 포함된 경우 쌍따옴표로 묶어준다. 또한 영문 폰트는 여기에 서체의 종류(generic-family)를 지정할 수 있고, 종류는 다음과 같다. font-family 사전 설정 값 설명 s..
1. 기본적인 선택자의 종류 - 전체 선택자 (*) 선택자 설명 * '*'는 존재하는 전체 요소에 사용하는 선택자로, 전체 요소에 적용시키는 만큼, 선택자들 중에 그 무엇보다도 우선하지 않는다. - 후손 선택자 ( ) 와 자식 선택자 (>) 선택자 설명 ul li ul의 후손인 li 요소를 모두 선택한다. (띄어쓰기 공백으로 구분한다.) ul>li ul의 자식인 li만 선택한다. = 자식 아래의 자손은 선택하지 않는다. - 형제 선택자 (+ ~) 선택자 설명 H1 + P 인접 형제 선택자 : h1의 바로 뒤에 있는 P요소를 선택한다. (즉, H1이후에 P요소가 아닌 SPAN요소가 있을 때는 선택하지 않는다.) H1 ~ P 일반 형제 선택자 : h1의 바로 뒤부터 이하의 모든 P요소를 선택한다. ( H1 ..
1. CSS 문서의 삽입 (1) 내부 스타일시트 (2) 외부 스타일시트 CSS를 사용하기에 앞서서, CSS문서를 HTML이 읽도록 하기 위해서는 반드시 문서 내에서 호출이 이루어져야 한다. 여기서 방법이 두 가지가 있는데, 하나는 내부 문서에서 CSS를 직접 작성하는 방법(내부 스타일시트)과, 외부 문서로 만들어서 연결하는 방법(외부 스타일시트)이 있다. HTML5 웹표준에서 권장하고 있는 것은 외부스타일시트이다. 이 외에도 HTML 태그의 STYLE 속성으로 처리하는 요소가 있는데, 이 경우를 인라인(INLINE)이라고 한다. 일부 파일 속성을 제외하고 HTML5웹 표준에 위반하므로 사용을 지양해야 한다. 2. CSS 기본규칙 : 선택자와 선언부 (1) 선택자{ 선언부 } - 선택자{선언부} 선택자{속..
본문 텍스트에 다양한 강조 표기를 통해 여러 형식의 텍스트를 입력할 수 있다. 여러 방식으로 텍스트를 강조할 수 있다. 다만 출력만을 위해서가 아니라, 형식에 따른 의미까지 포함된다. 1. 강조 표기 EM & STORNG (주관적&객관적 강조) See the Pen dxVxJN by ++EXP (@pp_exp) on CodePen. 기존 요소와 요소와를 대신하여 과 을 사용한다. 은굵게 표시되어 강조되고, 은 기울어진 채로 강조된다. 그러나 이 두 요소는 의미마저도 포함하여 강조한다. 은 가장 객관적인 사실로서 강조를, 은 주관적인 감상으로서의 강조를 의미한다. 2. 인용 표기 BLOCKQUOTE, Q, CITE (인용 표기영역, 인용 줄, 인용 출처) See the Pen MNENQd by ++EXP ..
텍스트만으로는 불충분한 설명을 이미지, 동영상, 사운드 등을 통해서 전달할 수 있다. 이미지 요소는 ,비디오 요소는 , 오디오 요소는 를 사용한다. 1. See the Pen PMJMwj by ++EXP (@pp_exp) on CodePen. 는 이미지를 출력할 때 쓰인다. SouRCe 속성으로 이미지 경로의 값을 붙여 넣으면 된다. ALTernate 속성은 이미지가 어떠한 이유로든 출력되지 않을 경우, 혹은 시각장애인과 시각을 사용하지 않는 검색엔진을 대비하여 이미지의 설명을 추가한다. 또한, 빈 태그이므로, 스스로 닫는 표기 "/>"를 사용하여 닫는다. See the Pen WVZVbz by ++EXP (@pp_exp) on CodePen. 그 외에 TITLE 속성을 사용하여 마우스 오버 시 이미지 ..
목록은 문서 내 텍스트 구조를 명확하게 보이는 데 도움을 준다. 내부 문서 구조를 명확하게 하기 위해 사용한다. 가장 기본적인 목록 태그는 로 리스트를 만들 때 사용한다. 그러나 태그 혼자서만 존재하지 않는다. 반드시 목록을 규정하는 혹은 의 하위 요소로서 위치하여야 한다. 반대로, , 의 하위에는 반드시 1개 이상의 가 있어야 한다. 1. 순서가 있는 목록 (Ordered List) See the Pen RXLzZN by ++EXP (@pp_exp) on CodePen. 순서가 있는 리스트 목록을 만들 때 태그를 사용한다. 2. 순서가 없는 목록 (Unordered List) See the Pen RXLXwo by ++EXP (@pp_exp) on CodePen. 순서가 없는 리스트 목록을 만들 때 태..
See the Pen zgEVZL by ++EXP (@pp_exp) on CodePen. HTML 문서에서 가장 핵심적인 역할을 하는 제목태그와 본문 태그, 그리고 A 태그에 대해서 알아보자. 1. 제목 요소 See the Pen RXLzVw by ++EXP (@pp_exp) on CodePen. 제목을 설정할 때 사용한다. 1~6단계까지 있으며, 가장 중요한 제목이 , 덜 중요한 제목이 이다. 2. 본문 요소 See the Pen gVGNWa by ++EXP (@pp_exp) on CodePen. 긴 문장의 텍스트를 한 구역에 넣고 영역을 지정하는 태그. 일반적으로 제목과 본문으로 분리하여 영역을 구분한다. 가장 기본적인 형태의 문서 3. 링크 요소 See the Pen JgrQNx by ++EXP (..
1. 는 "메타정보"라고 하는, 출력되지 않는 정보를 전달 혹은 이용하는데 쓴다. 앞서 배운 빈 태그이며, 속성값으로 정보를 나타낸다. 여러 속성들 중 가장 대표적인 것은 국가별 언어 출력을 담당하는 인코딩 정보를 설정하는데 쓰인다. 위 사례에서, CHARASET(CHARACTER SET,( : 문자열 지정))은 인코딩 속성을 지칭하는 속성이름이며, "UTF-8"은 한국어 출력을 담당하는 속성값이다. 이 외에도 여러 속성이 존재한다. - 속성값 description : 현재 페이지의 설명을 담고 있고, 이는 검색엔진이 주로 확인함. 구글 검색결과의 페이지 소개 내용은 주로 이 메타 정보를 이용한다. 글자 수는 160자 이내로 작성 권장. - 속성값 Keywords : 페이지에 대한 주요 키워드들을 담고 ..
See the Pen voeqXo by ++EXP (@pp_exp) on CodePen. 1. 버전 선언 은 HTML의 버젼에 관한 정보를 나타내는 부분으로 HTML 문서에 가장 첫 줄에 위치한다. HTML 문서 작성시 웹 브라우저에게 버젼을 알려주기 위해서 맨 처음에 위치하며,현재 HTML5 버전의 독타입을 을 쓴다. 2. 웹 페이지에 직접적으로 노출되지 않는 데이터를 어떻게 처리하는지에 대하여 작성한다. 문서의 제목, 검색엔진 노출 여부, 페이지 소개 글, CSS와 JS문서의 연동 등을 연결하는 요소도 이 곳에 작성한다. *대표적 사례 : , , 3. 웹 페이지에 직접적으로 노출되는 영역 요소를 지칭한다. 제목, 본문, 목록, 이미지, 비디오 등 일반적으로 문서의 내용을 작성할 수 있다.
1. 요소 = 내용 or 내용 HTML은 시작태그와 종료태그가 "내용(컨텐츠)"를 감싸고 있는 형태이다. 그러나 반대로 "내용"을 감싸지 않는 태그도 있는데 이런 태그를 가리켜서 '빈 태그'라고 한다. 빈 태그는 와 같이 스스로 닫는 표기를 포함하여야 한다. 이렇게 완성된 태그로 표기된 대상을 '요소'로 지칭한다. 요소에는 속성과 값이 포함된다. 2. 태그의 속성 표기 HTML 속성은 태그의 동작을 제어하기 위해서 "시작태그" 안에 사용되는 특수 용어이다. 기본 기능을 수정하거나, 스스로 기능하지 못하는 특정 요소에 기능을 제공한다. HTML문법에서 속성은 HTML 시작 태그에 추가된다. 속성 중에 아직 배우지 않았지만, STYLE 속성을 통해 CSS를 구현할 수 있다. 이를 INLINE 이라 하여 내부..
