본문 바로가기

반응형

온라인 강의

(22)
CSS 문법3 # 폰트, 텍스트 ■ typhography •em : 폰트의 전체 높이를 의미 •ex ( = x-height ) : 해당 폰트의 영문 소문자 x의 높이를 의미 •Baseline : 소문자 x를 기준으로 하단의 라인을 의미 •Descender : 소문자에서 baseline 아래로 쳐지는 영역을 의미. 서체에 따라 descender의 길이가 다름( g, j, p, q, y ) •Ascender : 소문자 x의 상단 라인 위로 넘어가는 영역을 의미 ( b, d, h, l ) ■ font family font-family: family-name | generic-family ( | initial | inherit ); family-name: 사용할 폰트의 이름을 나타내며 ' , ' 로 구분하여 여러 개 선언 할..
CSS 문법2 #단위, 속성, 구문 ■ 단위 1. 절대길이 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않음 px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적임 2. 상대길이 다른 요소의 크기나 폰트 크기, 브라우저(viewport) 등의 크기에 따라 상대적으로 값이 변함 %: 부모의 값에 대해서 백분율로 환산한 크기를 가짐 em: font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 가능 rem: root의 font-size를 기준으로 값을 환산 vw: viewport의 width값을 기준으로 1%의 값으로 계산 ■ color h1 { color: 색상 값;} heading ..
CSS 문법 # CSS (Cascading Style Sheets) 문법 CSS : HTML(마크업 언어)을 꾸며주는 표현용 언어 HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인 ! ■ CSS 구문 h1 { color: yellow; font-size:2em; } 선택자(selector) - "h1" 속성(property) - "color"값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ color: yellow; font-size:2em; } 규칙(rule set) - "h1 { color: yellow; font-size:2em; }" ■ 주석 ■ 적용(ht..
HTML 문법3 # 콘텐츠모델, 시멘틱마크업, 블록&인라인 ■ 콘텐츠모델(HTML 규칙에 비슷한 성격의 요소끼리 그룹화함) Content Models 의 7 분류 Metadata Content Flow Content Sectioning Content Heading Content Phrasing Content Embedded Content Interacitve Content Metadata : 콘텐츠의 표현, 동작, 다른 문서와의 관계, head내 존재, base, link, meta, script, style, title 등 Phrasing : 문서 텍스트, 문서 내부레벨, a, abbr, audio , b, br, button, i 등 embeded : 외부 콘텐츠, audio, video, img, canvas, e..
HTML 문법2 HTML 태그 ■ 제목과 단락 요소 1. 제목(heading) 태그 문서 내 제목 표현 제목의 레벨에 따라서 ~까지 있음 은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타냄 2. 단락(paragraph) 태그 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조 ■ 개행 내부에서 강제로 개행을 하기 위해서는 을 이용해야 함 ■ 텍스트 표현 태그 : bold 태그는 글자를 굵게 표현하는 태그 : italic 태그는 글자를 기울여서 표현하는 태그 : underline 태그는 글자의 밑줄을 표현하는 태그 : strike 태그는 글자의 중간선을 표현하는 태그(예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습..
HTML 문법 # HTML(Hypertext Markup Language) 문법 ▶ 문법: 태그, 속성, 중첩, 빈 태그, 공백, 주석 ■ 태그 태그는 기호로 표현 기호 사이에 태그 이름이 들어감 종료 태그는 태그 이름 앞에 '/' 기호 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용 들어감 ■ 속성 태그에 추가적인 정보를 제공 원하는대로 동작이나 표현을 조절할 수있는 설정값들 이름과 값으로 이루어짐 '이름 = 값'에서 =기호 말고는 어떤 공백도 들어가서는 안됨 "로시작했으면 "로닫고 '로 시작했으면 '로 끝나야함 추가되는 속성도 공백으로 구분해서 사용 선언 순서는 중요하지 않음 ■ 요소 내용을 포함한 태그 전체 ■ 태그 중첩 태그-중첩이 가능하며 부모태그안에 들어가야 한다. ■ 빈 태그 종결태그가 없는 태그..

반응형