본문 바로가기

반응형

온라인 강의/HTML&CSS(네이버 부스트코스)

(8)
CSS 문법5 # 미디어쿼리 ■ 미디어쿼리 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것 @media(at media) @media mediaqueries { /* style rules */ } 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있음 □ 미디어 타입 all, braille, embossed, handheld, print, projection, screen, speech, tty, tv □ 미디어 특성 width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, mono..
CSS 문법4 # 레이아웃 ■ display 요소의 렌더링 박스 유형을 결정하는 속성 display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 display와 box model의 관계 display width height margin padding border block ㅇ ㅇ ㅇ ㅇ ㅇ inline X X 좌/우 ㅇ(설명) ㅇ(설명) inline-block ㅇ ㅇ ㅇ ㅇ ㅇ ■ visibility 요소의 화면 표시 여부를 지정 vi..
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) 문법 ▶ 문법: 태그, 속성, 중첩, 빈 태그, 공백, 주석 ■ 태그 태그는 기호로 표현 기호 사이에 태그 이름이 들어감 종료 태그는 태그 이름 앞에 '/' 기호 시작 태그와 종료 태그 사이에 실제 화면에 나타나는 내용 들어감 ■ 속성 태그에 추가적인 정보를 제공 원하는대로 동작이나 표현을 조절할 수있는 설정값들 이름과 값으로 이루어짐 '이름 = 값'에서 =기호 말고는 어떤 공백도 들어가서는 안됨 "로시작했으면 "로닫고 '로 시작했으면 '로 끝나야함 추가되는 속성도 공백으로 구분해서 사용 선언 순서는 중요하지 않음 ■ 요소 내용을 포함한 태그 전체 ■ 태그 중첩 태그-중첩이 가능하며 부모태그안에 들어가야 한다. ■ 빈 태그 종결태그가 없는 태그..

반응형