- H : Hyper text – 하이퍼링크
- T : Text - 언어
- M : markup – 구조
- L : 랭귀지 - 언어
- 컨텐츠를 브라우저가 해석을 하면서 자동으로 여러가지의 HTML 요소를 구성 하는 일을 마크업이라고 한다.
- 언시멘틱 마크업 : 의미가 없는 구조
- 구조를 의미있게 구성하기 위해서는 공부할 때 각 태크 또는 요소 마다의 의미를 정확하게 알고 정욕할 필요가 있다.
- 제목 : heading → h1
- 단락 : paragraph→ p
- 웹 페이지는 헤드(head) 영역과 바디(body) 영역으로 구성된다.
- 문서 타이틀(title)은 웹 페이지의 제목으로 브라우저 탭에 표시된다.
- element : 요소
- open tag : 여는 태그
- tag : 닫는 태그
- attribute : 속성
- value : 값
- <여는태그> 컨텐츠 <닫는태그>
- <태그이름 속성="값"> 컨텐츠 <태그이름>
- P : 단락요소
- title : 내부의 타이틀 속성
- Development Tools : 값 (내용 컨텐츠)
- P(Paragraph) 태그인 단락태그는 개발 도구(DevTools)이라는 컨텐츠를 감싸안고 있다.
- empty element (콘텐츠를 감싸지 않는 요소) : 닫는 태그가 없다, 내용이 비어있다는 의미
- 내용 컨텐츠를 감싸지 않았기 때문이다 (내용 x)
- 여는 태그 만으로서 정보를 제공할 수 있는 요소이다
- HTML 요소 간 관계(부모, 자식, 형제)가 있다.
- HTML element 는 root element로 모든 요소의 조상이 될 수 있다.
- HTML element
- head : first child
- body : last child
- 각 요소 사이에는 어떠한 것도 들어 올 수 없다.
- 이를 통해 계층 구조를 시각적을 표현한다.
- 반드시 필요한 것은 아님, 보기 편하게 하려고 하는 것
- 들여쓰기를 하지 않아도 웹브라우저에 나타나는 것은 똑같음
- 표준모드와 비표준모드를 설정
- 웹 표준 문서이자, 모든 문서에서 호환되는 문서가 된다.(표준모드)
- 만약 DOCTYPE 없다면 해당 문서는 비표준 문서가 된다.
- 페이지의 가장 상위에 존재해야 한다.
- 소문자, 대문자 구분 x
- 대부분의 웹브라우저에서 표준모드를 사용하기 때문에 DOCTYPE을 사용해서 페이지를 작성하는 것이 좋다.
- 사용자가 가장 많이 읽는 콘텐츠는 단락(Paragraph)입니다. 단락은 p 요소로 구성됩니다.
- 글의 덩어리를 나눌 때 단락을 사용함
-
<>제목 레벨 : 1 ~ 6단계
- 1단계는 문서에서 하나만 작성
- 2단계부터는 여러 개의 제목을 사용할 수 있다.
- HTML 주석은 브라우저에서 해석되지 않습니다.
- souce : src
- alterate test : alt
- 대체 텍스트 : 이미지의 경로가 잘못됐거나 서버에 올려진 이미지가 깨졌을 경우에 대치되는 텍스트를 출력하는 경로이다.
- 한글이나 워드는 문서에 이미지를 포함시키지만 HTML 문서는 이미지를 포함시키지 않는다.
- 이미지를 연결해서 사용한다.
- HTML 파일에 이미지가 포함이 된다면 파일의 용량이 커지기 때문에 속도가 느려진다.
- 캡션은 이미지와 묶여서 하나의 덩어리가 되어야 한다.
- 피규어(Figure)요소를 사용해서 이미지와 캡션 요소를 하나도 감쌀 수 있다.
- 도표, 차트, 이미지, 표를 감쌀 때 사용되는 요소
- 피규어 요소 안에 피그캡션 요소를 넣어 줄 수 있다.
- 순차 (ordered) : ul
- 비순차 (unordered) : ol
- 목록 아이템 (List Item)
- li은 ul, ol 안에 들어갈 수 있다.
- 앵커(anchor)
- 같은 페이지에서 이동
- 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다.
- 하이퍼링크(hyperlink)
- 페이지가 변하면서 이동하는 것
- tel: URL을 사용하는 전화번호
- mailto: URL을 사용하는 이메일 주소
- 절대경로 (absolute path)
- 현재 HTML 문서와 상관없이 URL 주소를 사용해 리소스를 찾는 것
- 상대경로 (relative path)
- 현재 HTML 문서에서 상대적인 위치를 설정하는 것
- 루트 상대경로 (root-relative path)
- 현재 HTML 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것
- 설명목록(Description List) : dl
- 설명하는 것들을 묶어주는 그룹 역할
- 용어(Description Term) : dt
- 내부에 해당하는 용어
- 기술(Description Description) : dd
- 그 용어를 설명하는 역할
- 텍스트가 짧은 인라인 인용문 : q
- 긴 인용문 : blockquote
- 줄 바꿈(Line Break) : br
- 절대 두 번 같이 사용할 수 없음
- 출처(Citation) : cite
- [중요성] : 제목/캡션의 글자 중 일부를 더욱 강조하는데 사용
- [심각성] : 경고 또는 주의를 주고자 할 때 사용
- [긴급성] : 문서의 다른 부분보다 빨리 보아야 하는 내용을 나타내는데 사용
- 아래 조건에 부합하지 않을 경우 최종적으로 b 요소 사용을 고려
- 제목은 h1 ~ h6 요소를 사용하고
- 강조는 em 요소를 사용해야 하며
- 중요도는 strong 요소로 표시 되어야 하고
- 표시 또는 강조 표시된 텍스트는 mark 요소를 사용
- css는 html 문서 내에 포함시킬 수 있다
<head>
내부에서만 사용 가능하고<style>
태그를 사용해서 css코드 넣기- MIME type을 지정하는데 HTML5에서는 기본 생략
-
인라인 스타일
- 요소 내부에 style 속성을 이용하여 css 코드 작성
<section style="color: #903000; text-decoration: none:">
-
인터널 스타일
<style> section { color: #903000; } </style>
-
익스터널 스타일
- Link 요소를 사용하여 외부에 있는 css 파일을 적용하는 방법
<link rel="stylesheet" href="css/style.css">
- 문서 내의 특정 요소를 선택해서 편집 가능
- 우선권을 갖고 있음
- 공통적으로 스타일을 적용하고 싶을 때는 요소 선택자를 묶어서 꾸며줄 수 있다.
- *를 사용한다
- 모든 요소에 스타일을 적용할 수 있다.
- .class (대소문자 구분하기 때문에 주의)
-
- .class1.class2 : 하나의 요소가 두 개의 class를 가진 형태
-
- .class1 .class2 : class1이라는 값을 가진 요소가 내부의 class2라는 요소를 찾을 때 사용(자손 선택자)
-
- 1과 2는 각각 다른 의미를 가진다.
- ID 값이 동일한 대상자를 찾음.
- 직계 자식만 포함, 손주는 포함 하지 않는다.
*[] { ... }
: *요소가 [] 속성값을 가지고 있다면.- 연속해서 사용 가능 [], [] 두 가지 속성을 모두 갖고 있다.
- [] 앞에는 생략 가능
- 단어가 반드시 일치해야 한다.
<a>
: 상태라는 의미를 가지고 있다- 콜론(:) 한 개 사용
- 콜론(::) 두 개 사용
-
Q ) class 란?
- A ) 태그는 한 문서 안에서 여러번 사용할 수 있는데 이때 같은 이름을 가진 태그가 여러개일 경우, 태그에 이름(class 또는 id)를 부여해서 구체화 시킬 수 있다. class와 id의 차이는 사람의 이름과 주민등록 번호 같은 개념이다. 예를들어 홍길동은 class 개념이고 홍길동의 주민등록 번호는 id 개념이다. 홍길동은 다른 사람들도 쓸 수 있는 이름이고 홍길동의 주민등록 번호는 길동만 가질 수 있는 고유의 식별자이다.
- HTML 요소를 묶어주는 컨테이너 요소
- 아무런 의미(semantic)는 가지지 않는다.
- 그러하무로 이 요소들은 적절한 시멘틱 요소가 없을 때 사용해야 한다.
- 블록(block) 컨테이너(감싼다는 의미)
- 단락이나 섹션 등 특정 범위를 묶는 용도로 사용
- 인라인(inline) 요소
- 인라인 요소들(a, strong, em, b, i 등)을 감쌀 때 사용
- 블록 요소들(h1-6, p, blockquote, section 등)을 감쌀 수 없다.
<dfn>
: definition 정의 요소- 윗첨자와 아래첨자를 구분하기 위해
<div>
요소를 사용해 준다. -
<address>
요소<a> href="tel:"
: 전화- 사람 또는 조직의 정보를 제공할 때 사용 (전화, 팩스, 주소 사업자 번호 등)
- 조직의 저작자의 정보를 사용할 때는
<small>
을 사용
-
<pre>
(Preserved text) 요소- 코드의 공백이나 줄바꿈을 보존한다.
- 이메일, 빈 줄이 표시된 단락, 글 머리표가 붙은 줄로 표시된 목록 등에 사용.
- 컴퓨터 코드(언어) 표시 목적으로 사용.
- 컴퓨터 코드, 출력, 키보드 블록을 나타내기 위해 pre 요소는 code, samp, kbd 요소와 함께 사용 가능.
- ASCII 아트 표시.
<pre> ____ ∧ ∧ |\ /(´~`)\<변화구 | | ̄ ̄ ̄ ̄ ̄| | |=みかん=| \|_____| </pre>
- 브라우저 개발 툴에서 상속 여부를 확인
- color
- font-size
- font-family
- letter- spacing
- outline
- margin
- border
- padding
- 정의 : 여러 스타일 시트를 결합하고 이들 사이의 충돌을 해결하는 프로세스
- CSS는 케스케이드 개념이 중요하다는 것을 약어에서 강조, 가장 기본적인 수준에서는 규직 순서가 중요하지만 그보다 더 복잡하다는 것을 말한다.
- !important 선언은 다른 모든 선언보다 우선권을 가진다.
- !important 가 적용된 속성을 덮어 쓰려면. 다시 !important를 사용해야 하기에 최대한(절대!) 사용하지 않도록 노력해야 한다. (이 요소를 사용하지 않고 문제를 해결하려고 노력!)
- 선택자의 우선권에 대한 척도
- 각 척도를 1, 10, 100, 1000 단위로 생각하면 이해하기 좋다.
-
중요성, 특성이 설정되지 않았거나 동일한 경우 나중에 나온 소스의 스타일이 우선권을 가진다.
예시
p.note { color: #930212; } p { color: #d5727e; } // 우선권을 가진다.
-
폰트에 영향을 주는 속성으로 적용되는 모양, 크기, 굵기, 기울임 등
- font-family 모양
- font-size 크기
- font-weight 굵기
- font-style 기울임 (이탤릭체)
- font-variant 등.
-
글자 색상은 color 속성으로 설정.
- color keywords
- red, gree, blue, pink, black
- hex color code
- #RRGGBB / 0 ~ 9, a ~ f 예)#1868a7
- rgb, rgba
- RED, GREEN, BLUE, ALPHA(투명도)
- 예)rgb(127,255,0), rgba(127,255,0,0.3)
- 색상은 256가지색이 있다 (0 ~ 255)
- RED, GREEN, BLUE, ALPHA(투명도)
- hsl, hsla
- HUE(색상), SATURATION(채도), LIGHTNESS(명도), ALPHA
- 예)hsla(360,60%,70%+ )
- HUE는 각도(deg)는 사용, 채도 및 명도는 퍼센트(%) 사용
- HUE(색상), SATURATION(채도), LIGHTNESS(명도), ALPHA
- 웹브라우저는 운영체제가 지원하는 기본 폰트(웹 안전 폰트)만 화면에 렌더링 한다. (참고: https://cssfontstack.com) 즉, 사용된 폰트가 사용자 컴퓨터에 없으면 렌더링 X.
사용하기 전 안전한 폰트인지 확인! -
비주얼 디자인 과정에서 적용 가능한 웹폰트를 사용해야 한다. 폰트 저작권에 주의!
-
<local>
속성 : 서버에서 다운받지 않고 사용자의 컴퓨터의 해당 폰트가 있으면 그 폰트를 사용해라. - 텍스트 간격 및 레이아웃 기능에 영향을 주는 속성으로 행간, 자간, 어간, 정렬, 변형, 꾸밈, 그림자
- 최소 1.5이상이 글읽기에 용이하다.
- px값 보다는 em단위로 설정하는것이 좋음.
- px, em(소수점) 단위 사용
- 행간 > 어간 > 자간 - 가독하기가 쉬워짐.
- left(기본값) / center / right
- 속성 또한 부모로 부터 상속 받을 수 있다.
- 첫 번째 줄 라인만 들여쓰기 가능하다.
- padding-left를 사용하면 전체 들여쓰기 가능
- em단위 사용(마이너스 값 사용 가능)
- uppercase(모두 대문자), lowercase(모두 소문자)
- small-caps(대문자만 크게, 소문자는 작은대문자)
- all-small-caps(모두 크기가 작은 대문자)
- 영문에서만 사용, 한글을 적용 X
- underline(밑줄) : 판독의 어려움을 주기 때문에 권장하지 않음
- overline(윗줄)
- line-through(중간줄)
- break-all (공백/띄어쓰기) 수고했어.오늘도 (음절) 수.고.했.어.오.늘.도
- break-word
- text-shadow : x y blur sprea color;
- 그림자의 색상값을 멀티로 줄 수 있다. (콤마(,)로 구분)
- 그림자를 적용하지 않은 글자가 가독성이 더 좋다
검사 사이트 (http://validator.w3.org/) 엔티티 코드 (http://entitycode.com/)
- 목록(List)
1) 문법이나 속성을 코드로 메모하는 방법을 모르겠습니다.
2) 예를들어 위의 방법을 궁금해서 MDN 사이트를 이용한다고 할 때 어떤식으로 검색을 해야하는 지 모르겠습니다. '코드', '속성'등의 키워드로 검색을 해도 원하는 정보를 얻기가 쉽지가 않네요... 이용법을 검색해도 잘 안나오고요..
어휘 요소 활용 : strong, em, d, i
내용의 중요성, 심각성, 긴급성을 강조할 경우 사용
: 특정 내용의 스트레스 강조 - 문장 의미를 변경
: 단순히 다른 글자와 구분된 용도로 사용.
문서 요약의 주요 단어, 리뷰 제품 이름 등
다른 글자와 구분된 용도로 사용.
기술적 용어, 다른 언어(목소리), 인물의 생각 등을 표현
UI 디자인에 필요한 그래픽 디자인 툴이다.
개발자와 디자이너가 실시간으로 같이 편집할 수 있는 기능이 있어
서로 효율적으로 작업 진행이 가능하다.
Window와 Mac 상관없이 UI 편집이 가능하다
CSS는 HTML 문서를 스타일링 하는 언어이다
선택자 {
속성1: 값;
속성2: 값2;
}
h1 {
color: deepskyblue;
font-size: 2em;
}
<link
href="css/style.css"
type="text/css"
rel="stylesheet"
/>
*포함하고 있는 요소를 꾸밀 때 사용
[id] { ... }
[class] { ... }
[title] { ... }
[shape] { ... }
area[shape][title] { ... }
<area shape="" coords="" href="">
<area shape="" coords="" href="" title="">
[id="about-css"] { ... }
#about-css { ... }
[class="note"] { ... }
.note
:link { ... } 기본적으로 가지고 있는 상태
:visited { ... } 방문 상태
:hover { ... } 마우스가 올라간 상태
:active { ... } 마우스로 클릭한 상태
:focus { ... } 포커스가 된 상태
:focus:hover { ... } 포거스가 된 상태에서 마우스가 올라간 상태
:focus:active { ... } 포거스가 된 상태에서 마우스로 클릭한 상태
:first-child { ... } 첫 번째 자식(대상을 선택하기 쉽게)
:last-child { ... } 마지막 자식
:nth-child(n) { ... } 중간 자식 (처음과 마지막을 제외한)포뮬러 공식이 사용될 수 있다
:lang(ko) { ... } 사용되는 언어에 따라 디자인을 적용 가능
::first-letter { ... } 단락의 첫 번째 글자
::first-line { ... } 첫 줄 문자
::before { ... }
::after { ... }
<div class="division">
<h2>
SIX
<span class="green ">C</span>
<span class="yellow">O</span>
<span class="orange">L</span>
<span class="red ">O</span>
<span class="violet">R</span>
<span class="blue ">S</span>
</h2>
<dfn id="sulfuric-acid">
H<sub>2</sub>SO<sub>4</sub>
</dfn>
참고
<a id="이동위치이름">이동할 위치</a>
<a href="#이동위치이름"> 위치 이동 클릭</a>
<sup><a href="#footnote-1">[1]</a></sup>
<mark>삼각함수</mark>
<time datetime="2017-08-14T10:18">2017.08.14 10:18</time>
<abbr title="맥도날드">맥날</abbr>
<s>11,900원</s> <em>50%</em> 5,900원
그룹핑(Grouping) 요소
요소 선택자 < 클래스 선택자 < ID 선택자 < 인라인 스타일
0,0,0,1 0,0,1,0 0,1,0,0 1,0,0,0
[NOTE]
*, >, +, ~ 등 콤비네이터(Combinators),
:not() 가상 클래스는 특성에 영향을 주지 않는다.
[예시]
* --0000
a --0001
a.link --0011
li:nth-child(2) a:hover --0022
.nav:nth-child(2) a:hover --0031
#outer a --0101
#outer #inner a --0201
style="color: tan" --1000
--important
[웹 안전 폰트]
Arial [sans-serif] 고딕체
Verdana [sans-serif] 고딕체
Courier New [monospace] 코드체(공간이 동일)
Georgia [serif] 명조체
Times New Roman [serif] 명조체
Trebuchet MS [serif] 명조체
normal 기본값 : 공백 없이 그대로 유지 pre - 텍스트를 입력한 그대로 유지 pre-line - 텍스트를 입력한 그대로 유지하면서 들여쓰기 제거 nowrap - 랩핑을 하지 않는다는 뜻, 한 줄로 길게 나타남
text-shadow : 4px 4px 0px #9bdbde,
0px 3px 10px #943978;