마크업(Markup) 언어

태그등을 이용해서 문서나 데이터의 틀과 구조, 기능을 만드는 언어
대표적인 예) HTML
지금 벨로그에 블로깅하는 것은 마크다운(MarkDown) = 기록하다.가 어원적 의미

화면을 설계하는 과정 : 작동x, 껍데기 목업(mock-up)설계

실제로 웹과 앱을 개발하기 위해서는 꼭 프로토타이핑 과정을 거쳐야한다.

프로토타이핑 : 개발 초기에 모형을 만들어 기능의 요구사항 파악 후 반영하는 개선방식
공예 작업에 들어가기 전에 모델링 해보는 것과 비슷한 것 같다.

mock-up 예제

큰 틀 영역 나누기

• 쓰기영역 & 읽기영역

  쓰기영역

  • 각 영역(웹,앱의 구성요소 component)을 태그로 표현하기
    쓰기영역에 있을법한 tag 생각해보기
    <div></div> input type = 'text' <button></button>

  • 나누고 싶은 영역끼리 여러태그를 하나의 <div>로 감싸줘야 한다!
    div는 division 영역이라는 뜻

  • <div>대체 태그
    <section>:보통 제목,컨텐츠가 포함된 구획을 나눌 때 사용
    <form>:사용자 입력을 제출하는 용도, 보통 컨트롤(input, button 등)을 포함, 화면을 전환하는 action이 있다.

  • 쓰기영역 mock-up

<div>
  <div>댓글 9</div>
  <input type = 'text' placeholder ="댓글을 입력해주세요">
  <button>등록</button>
</div>

• • 읽기영역
    읽기영역에 있을법한 tag 생각해보기
    <div></div> <span> <button></button> <img>

• • 댓글 하나하나가 일련의 list
    읽기영역 전체는 ul (unordered list)

Emmet

html tag를 <>가 사라진 selector를 이용한 표기법으로
<div id='writing-section'>를 작성하고 싶으면
➜ div#writing-section

<li class='comment'> 를 작성하고 싶으면
➜ li.comment

반복되는 항목이 많다 댓글 container(li)가 반복적으로 랜더링된다
따라서 사용자이름, 시간, 공감버튼= id로 지정해줄 수 없다. class 선택자로!

ul#comments
li.comment 댓글덩어리 1개
  div.username 사용자이름
  div.content 댓글내용
  span.createdAt 작성날짜시간
  button.voteUp
  button.voteDown

id는 고유한 element에만 있는 component에 id지정
이외 반복되는 element들에는 class지정해줌으로서, 동일한 유형임을 알 수 있다.

반복 *

이 기능이 제일 편하다.
ctrl+c, ctrl+v하지말고 이걸 쓰자.
div>ul>li*7

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

하위 요소 >

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

형제 요소 +

div>p+span

<div>
    <p></p>
    <span></span>
</div>

상위로 가서 추가하기 ^

div>ul>li^p+a
^의 수만큼 상위로 간다.

<div>
    <ul>
        <li></li>
    </ul>
    <p></p>
    <a href=""></a>
</div>

value {}

.dessert{Ciabatta}

<div class="dessert">Ciabatta</div>

속성 [attr]

tr>td[title="classRoom" colspan=3]{병아리반}+td{1}

<tr>
	<td title="classRoom" colspan="3">병아리반</td>
	<td>1</td>
</tr>

그룹화 ()

div>(nav>ul>li*3)+footer

<div>
    <nav>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </nav>
    <footer></footer>
</div>

그룹화() 하지 않으면?
nav 속에 footer가 들어간다.

<div>
    <nav>
        <ul>
            <li></li>
            <li></li>
            <footer></footer>
        </ul>
    </nav>
</div>

순차적 넘버링

.container>ul.list>li.list-item*3>a{item $}

<div class="container">
    <ul class="list">
        <li class="list-item"><a href="">item 1</a></li>
        <li class="list-item"><a href="">item 2</a></li>
        <li class="list-item"><a href="">item 3</a></li>
    </ul>
</div>