서브라임 에밋 Emmet / html attribute, list, table

 

# Html 태그 : html 문서를 구성하고 있는요소(: 태그에는 이름과 속성이 있다.

# Emmet을 이용해서 빠르게 코딩하는 법!

h2{h2태그입니다} 태그하면, 텍스트까지 같이 뽑아낼수있다(:

 

# h$*6 : 코딩을 빠르게하는 Emmet을 쓰는 방법이다.

 

# h$*6을 하면 h1~h6태그가 완성된다.

그 안에 텍스트만 주면 될것!

# ctrl 과 alt를 동시에 누르고 화살표를 밑으로 내리면 커서가 동시에 깜박임.(다만, 윈도우에서만 작용.. 그렇담 맥은 ㅠㅠ?=>알아볼것!)

그 상태에서 텍스트를 입력하면, 동시에 h1~h6태그안에 텍스트가 동일하게 입력됨.

커서를 빠져나오고싶으면 esc누르면 된다.

 

# 컨트롤을 누르면서 화살표를 하면, 단어만큼 띄어짐.

 

# 텍스트를 뽑아낼때 기호: 중가로.

 

# 그래서, h1~h6 안에 텍스트와 같이 한꺼번에 뽑아내고 싶으면

중가로를 사용하면 된다:0

 

# 다만,

h$*6{h$태그입니다.} : 안뽑아짐 -> (*6을 뒤로 빼줘야함)

h${h$태그입니다.}*6 : 뽑아짐

 

# 물론 Emmet을 필수로 써야하는 건 아님.

하지만 속도를 붙이고 싶다면 Emmet선호!

 

# 그리고 단락을 표시하고 싶을 때 쓰는 태그가 p태그.

# 하나의 문단에서 혹은, 웹페이지가 있는데 전체 대제목이있고 부제목이있고..

연결관계를 생각했을때 대제목이 하나의 웹페이지에서 두번이상 사용되지 않음.

 

# 그래서 h1태그는 한번정도만 들어가는 게 맞다.

 

# 보통 문장을 쓸때 prototype의 형식으로 표현하고 싶을때 (의미없는 문구넣는방법은?)

: lorem10이라고 넣고 tab을 눌러주면, 단어 10개가 빠져나옴.

 

# 단, 나중에 다 바꿔줄것! but, 일단 텍스트 덩어리를 넣고싶어서 프로토타입 표현시에 편함.

 

# 문장을 많이 뽑고싶은면, 엔터를 치고 lorem50 탭하면, 된다.

 

 

# br태그는 줄바꿈하고싶은 곳에 넣기. 단, 한깐 띄고 넣어주기.

 

 

# 서브라임 쓰다가 경고창 띌 수 있는데, 그냥 패스하면 됨.

 

# br태그를 이용해야지 문단을 만들 수 있는데,

p태그는 바로 문단을 만들어줌. (자동으로 줄바꿈 해줌.)

p태그는 paragraph 문단의 약자다.

 

# 글씨가 기울여서 나오는게 이탤릭체

글자만 기울여졌지 스크린 리더기가 강조해주진 않음.

 

# p*3태그를 해주면 한 번에, 3개의 문단을 뽑아줌.

 

# 꺾음가로: 부모자식 표현

p>b{볼드체} ->뽑아보면, <p><b></b></p>나옴.

 

# 이탤릭체 : i / em 태그

볼드체 : b / strong 태그

 

# <p>강조할 때 스크린 리더기가 <strong>강조</strong>해서 읽어주는 태그들 : <em>의미론적 태그</em> sementic tag: </p>

 

# 윗첨자를 표현할 수 있는 superscript 태그 : sup 태그

아래첨자를 표현할 수 있는 subscript 태그 : sub 태그

추가하고 싶을 때 insert 태그 : ins 태그

삭제하고 싶을 때 delete 태그 : del 태그

 

**p{lorem50}을 하지 않는 이유는 ? : lorem50이 한꺼번에 emmet이 안 먹음.

 

# 새창에서 열기 : target="_blank"

# 현재창에서 열기 : target="_self"

 

# a 태그는 anchor의 약자.

 

***자동으로 줄바꿈이 안되고 옆으로 들어가는 요소 : inline 요소

a태그는 인라인 요소임.

블럭으로 쌓여 있는 요소 : block 요소

 

# 코딩을 하면서 줄을 잘 맞춰야 함.

 

# 컨트로를 누르면서 대가로 열고닫기 활용 : 들여쓰기, 내어쓰기

Ctrl+] , Ctrl+[

 

# 형제관계를 한꺼번에 뽑고싶으면?

h1+h2 탭해주면 된다~

 

h1h2 탭해주면 안뽑아짐.

+를 붙여줘야 함.

 

# h1+h2+hr+p*4 누를경우 : 한꺼번에 다 뽑아짐.

<h1></h1>
<h2></h2>
<hr>
<p></p>
<p></p>
<p></p>
<p></p>

 

이렇게 다 뽑아짐(:

 

# attirbute 태그 : id

 

id들어가는건, identity file 유일한거. 딱 하나뿐인거. 정체성을 붙여주는것.

굉장히 중요함!! 별표 다섯개~~

 

그리고 #도 중요!

 

# 클릭하는데 바로바로 같은 창에서 해당하는 페이지로 넘어가는 것:

a태그에 #을 넣어주고

해당하는 페이지에는 id를 넣어준다.

 

# 마우스를 스크롤하거나 클릭했을 때 새로운 창이 뜰때,

자바 스크립트, 제이쿼리로.

 

# 하나의 페이지에서 각각 중요한 타이틀이 있고 해당 타이틀을 클릭하면

관련된 내용의 컨텐츠 영역으로 바로 이동하고 싶다면 타이틀을 a태그를 이용해서

넣어주고 href 속성값으로 #id명을 지정한다. 또한, 관련된 내용의 컨텐츠 상단에

위치한 태그에 id속성값을 지정한다!!

 

# 소가로 열고닫기 : 그룹을 의미.

 

(h1{title}+p*4)*3 : 그룹으로 묶을때 예시.

 

<리스트 LIST>

 

# li 태그 : 리스트의 약자(:

 

<li></li>

 

별개의 목록을 표시할 때, 구분하기 위한 방법은 ul태그, ol태그.

 

# ul == unordered list

순서가 없는 리스트다.

 

# 보통 코딩할때, 자바스크립트나 제이쿼리 배우면 등호를 쓰게 되는데

등호: 같다 는 뜻.

 

# 1+3=4 수학적으로는 등호를 한번만 넣지만,

코딩에서는 등호를 한 번만 넣으면 오른쪽값을 왼쪽에 대입하겠다는 뜻임.

그래서 등호를 두 번 넣어줘야 함.

세번 들어가기도 함. 타입까지 같다는 디테일한 속성까지 보게 되는건데

무튼 ul == unordered list 에서

==는 같다는 의미!

 

# ol == ordered list

순서가 있는 리스트다.

 

# 순서가 관련없는 리스트를 만들 때는 ul==unordered list를 사용한다.

 

# 네비게이션을 만들 수 있는 태그가 리스트 태그다.

 

# 조상과 후손관계.

 

# 부모자식관계는 바로 밑에일 경우만~

 

# li태그는 자동으로 줄바꿈이 됨. -> 블럭요소

 

# a태그는 인라인요소.

 

# dl 정의목록 : 사전처럼 용어를 설명하는 목록을 만든다.

 

# dt 정의용어

 

# dd 정의설명

 

dl>h1{browser's kind}+(dt{browser's name}+dd*2)*4

 

# 10년전만해도 중요한 부분이었는데

web을 만드는 방식이 너무많이 바뀌었기 때문에,

지금은 그렇게 중요하지 않다.

 

# 웹은 빠르게변화하는 분야이기때문에 w3c에서 바뀐 표준을 명시하면, 그걸 공부해서

trend에 맞춰 발빠르게 맞춰나가야한다.

 

# table tag는 거의 안쓰지만, 연습해보자.

표를 만들때는 쓸 수도 있으니까(:

 

# table 이라는 태그로 한 번 감싸주고

table 에 한 칸 띄고 border 속성이 있다.

border를 1로 주면 1픽셀을 주겠다는 뜻.

픽셀은 들어가도 되고 생략되도 픽셀임.

 

# 다른 단위를 넣으려면 꼭 표시해줘야 함.

(안 넣으면 기본 픽셀단위임)

 

# tr 태그 : table row

 

# td 태그 : table data : 테이블 안에 데이터가 들어간다는 뜻.

 

# 두 칸을 합치거나 세칸을 합치고 싶을 때

rowspan colspan.

 

# rowspan : 여러 행을 합치겠다.

# colspan : 여러 열을 합치겠다.

 

# row : 행(가로) / column : 열(세로)

 

즉, 세로칸을 합칠 때는 colspan 속성 사용,

가로칸을 합칠 때는 rowspan 속성 사용~

 

# 기본적으로 table 표를 짜고 싶을 때는

table 태그다.

<table>
<tr>
<td>컨텐츠</td>
<td>컨텐츠</td>
</tr>
<tr>
<td>컨텐츠</td>
<tr>
</table>

 

tr: table row / td: tabe data

th: table heading

 

# 코딩하다가 emmet이 안먹으면 > 넣어주기!

 

ex.

table>tr*3>td*4>{data}

 

표에 선 넣어주고 싶으면

table 옆에 border="값" 넣어주기~!

<table border="1">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>

 

#th태그는 자동으로 중간정렬.

다른 것도 중간정렬 하고싶으면

tr 옆에 align="center" 적어주면 된다.

 

ex.

<table border="1">
<tr align="center">
<th>grade</th>
<th>French</th>
<th>Spanish</th>
<th>English</th>
</tr>
<tr align="center">
<td>midterm test</td>
<td>80</td>
<td>70</td>
<td>100</td>
</tr>
<tr align="center">
<td>final test</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>

 

# 드림위버 장점: 포토샵이나 일러를 쓰는것처럼 쉽게 코딩을 짤 수 있지만,

요즘 웹표준 코딩을 짜기에 특히 반응형이나 최신 코딩을 짜는데 제한적이어서 잘 사용하지 않은지 꽤 되었다(:

 

# 붙여놓기 하면,

서브라임 텍스트의 버그가 하나 있다.

들여쓰기가 안되어있고, 내여쓰기가 되어있다.