[Publishing]HTML, CSS

0. Introduction

• HTML - structure
• CSS - presentatioin
• JS - interation

1. HTML

• 개요
  
  • HTML(HyperText Markup Language)
  • 웹 페이지 구성하는 마크업 언어
  • 전체적인 구조 담당
• HTML 구조와 문법
  • tag들의 집합 (부등호로 묶인 기본 구성 요소)
  • tree structure
  • self-closing tag - <img src="image.png" />
  • <tag></tag>인 경우 <tag/>와 같이 표현 가능
• 자주 사용하는 HTML 요소
  • <h1> 제목
  • <p> paragraph - 문단을 표현 
  • <div> division - 한 줄을 차지
  • <span> span - 컨텐츠 크기만큼만 공간 차지
  • <section> - 구역 표시
  • <img> image
    • 
  • <a> link
    • http://codestates.com" target="_blank">코드스테이츠
  • <ul> unordered list
    • <li>로 하위 리스트
  • <ol> ordered list
  • <input type="text" placeholder="type here">
  • <input type="password">
  • <input type="checkbox" checked> checked
  • <input type="radio" name="choice" value="a"> a
  • <textarea></textarea> 줄 바꿈 가능
  • <button></button>

2. CSS

• 개요
  • 디자인을 적용하는 데 사용됨(Cascading Style Sheets)
• CSS와 프런트엔드 개발
  • 더 나은 사용자 경험을 만족시키기 위해 CSS로 UI와 레이아웃을 구성
• UI(User Interface)
  • 인터페이스는 컴퓨터와 교류하기 위한 연결고리
• UX(User Experience)
  • 사용자 인터페이스를 포함해 사용자가 서비스 사용하면서 느끼는 만족도
• 직관적이고 쉬운 UI 제작
  • 좋은 UX는 직관적이고 쉬운 UI에서 나옴
• CSS 따라 하기
  • 시맨틱 태그 : 이름에 이름을 붙여 부르는 태그 <div>랑 같은 역할
    • <header> <main> <nav> <aside> <footer>

selector { 
	property : value;
}

• selector : 특정 태그 이름, id, class를 선택
• 선언 블록 안에 속성명과 속성 값
• 세미콜론은 안 붙여도 무방
• CSS 파일 추가

<link rel="stylesheet" href="index.css" />

• rel은 연결하고자 하는 파일 역할, 특징
• href는 파일의 위치와 파일명(같은 위치인 경우에는 파일 이름만)

 

• 관심사 분리는 HTML은 웹 페이지의 구조와 내용만 담당하고, CSS는 디자인만 담당
• CSS 적용 방식은 세 가지
  • 같은 줄에 적용하는 인라인 스타일
  • style 태그를 사용하여 작성하는 내부 스타일 시트
  • css 파일 만들어 연결하는 외부 스타일 시트
• Id VS class 차이
  • id : # 지정자 사용, 하나의 요소에만 적용 가능
  • class : . 지정자 사용, 많은 요소에 적용 가능

• #id.class -> 띄어쓰기가 없는 경우는 동시에 해당하는 경우
• #id .class -> 띄어쓰기가 있는 경우는 하위 선택자 id의 후손 중 class인 것 모두
• #id, .class -> 콤마가 있는 경우 각자 둘 다 선택(or)
• #id>.class -> 자식 선택자
• #id + .class -> 인접 형제 선택자(인접한 형제 선택)
• #id ~ .class -> 일반 형제 선택자(형제 선택)
• E[attr="val"] -> 속성 선택자
• a:hover -> 사용자가 마우스를 올렸을 때

• Text 꾸미기
  • 색상 : color 
  • 배경 : background-color
  • 테두리 색상 : border-color
  • 글꼴 : font-family (fallback을 위해 여러 글꼴 사용하는 경우에 쉼표로 구분)
  • 웹 폰트 서비스 google fonts 서비스 활용(HTML의 link 태그를 이용하여 사용 가능)
  • 글자 크기 : font-size
  • 단위 종류
    • 절대 단위 : px(pixel), pt(point)
    • 상대 단위 : %, em, rem, ch, vw(100vw 전체 화면), vh(100vh 전체화면)
    • 기기나 브라우저 등의 환경에 영향을 받지 않는 경우 - 절대 단위
    • 일반적으로는 rem을 사용, root의 글자 크기가 1 rem - 상대 단위
  • 기타 스타일링
    • 굵기: font-weight
    • 밑줄, 가로줄: text-decoration
    • 자간: letter-spacing
    • 행간: line-height
  • 정렬
    • text-align (left, right, center, justify(양쪽 정렬))
    • vertical-align의 경우 부모 요소의 display가 table-cell이어야 하고 박스 높이가 글자 높이보다 큰 경우만 적용
• 박스 모델
  • 박스 모델 : 웹페이지를 구성하는 모든 콘텐츠는 박스 형태의 영역을 가진다
  • 박스는 직사각형 형태로 너비와 높이가 존재
  • 박스의 종류는 inline 박스, block박스, inline-block박스
    • block : 줄 바꿈이 일어남, 기본 너비 100%, width, height 사용가능 ex) <div>, <p>, <h1>
    • inline-block : 줄바꿈이 없음, 해당 요소의 크기만큼 차지 , width, height 사용가능
      • display : inline-block; ex) <button>, <input>, <select>
    • inline : 줄바꿈 없음, 해당 요소의 크기만큼 차지, width, height 사용 불가능 ex) <a>, <span>, <em>

• 박스의 구성요소

• Border
  • border-width, border-style, border-color 순서로 설정
  • border : 1px solid red;
  • border-radius 둥근 모서리, box-shadow 그림자
  • 점선 style을 dotted 속성
• margin(바깥 여백)
  • top right bottom left 시계방향
  • 두 개인 경우 top bottom / right left
  • 한 개인 경우 전방향
  • margin-top 같이 특정하게 지정할 수 있다
  • 음수로 지정 가능(겹치기)
• Padding(안쪽 여백)
• 박스를 벗어난 콘텐츠 처리
  • 박스보다 콘텐츠의 높이가 큰 경우에 콘텐츠가 박스 밖으로 나온다
  • overflow : auto를 통해 스크롤 만들기
  • overflow-x, overflow-y 속성을 이용해 다양한 방향으로 스크롤 만들기
  • 넘치는 내용 숨기고 싶을 경우 oveflow 값을 hidden으로
• 박스 크기 측정 기준
  
  • 박스를 측정할 때 content 중심으로 측정하기 때문에 여백 계산으로 복잡
  • box-sizing을 border-box로 변경하는 것이 쉽다

* {
  box-sizing: border-box;
}

• content-box : width가 content를 의미하고 실제 너비는 padding과 border 두께를 다 합친다
• border-box : 실제 차지하는 너비가 width

3. Page layout

개요

• 학습 목표
  • 레이아웃을 위한 HTML 구조 설계
  • flexbox에 대한 개념과 내용 이해

레이아웃 : 화면을 나누는 방법

• HTML 구성하기
  • 수직분할 : 화면 수직 구분, 콘텐츠 가로 배치
  • 수평분할 : 화면 수평 구분, 콘텐츠 세로 배치
  • Atomic CSS 방법론: 클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성하는 기법
• 레이아웃 리셋
  • 여백 계산 때문에 기본 스타일링을 제거한다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

• Flexbox
  • 박스를 유연하게 하여 레이아웃을 잡는 것
• display: flex 분석하기
  • display: flex는부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
  • Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정
• 부모 요소에 적용해야 하는 Flexbox 속성들
  • flex-direction : 정렬 축(부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함)
    • 기본이 row ( row, column, row-reverse, column-reverse)
  • flex-wrap : 줄 바꿈 설정(하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함)
    • 기본이 nowrap(nowrap, wrap, wrap-reverse)
  • justify-content : 축 수평 방향 정렬(자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함)
    • flex-start , flex-end, center, space-between, space-around
  • align-items : 축 수직 방향 정렬(자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함)
    • stretch , flex-start , flex-end , center , baseline

Flex 속성의 하위 속성

• 자식 요소에 적용해야 하는 Flexbox 속성들
• flex 속성의 값
  • grow 팽창 지수 - 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
  • shrink 수축 지수 - 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
  • basis 기본 크기 - 요소의 기본 크기는 얼마인지
  • flex: grow shrink basis 형태로 설정 [기본값 flex: 0 1 auto ]
  • 따로 지정도 가능(flex-grow, flex-shrink, flex-basis)
• grow: 팽창 지수
  • 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져감

• shrink 수축 지수
  • grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐
  • flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방
  • 보통 grow로 비율 변경
• basis 기본 크기
  • flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지
  • width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선
  • 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않음
  • (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width 사용
  • flex-basis가 0일 때와 auto일 때의 차이는 0일 때는 width가 최대한 작아지려고 하기 때문에 auto일 때와 크기 차이가 존재
• Flexbox froggy 실습

4. 웹 앱 화면 설계

개요

• Wireframe과 mock-up에 대학 기본 지식 학습
• 웹 앱 화면 설계 실습

학습목표

• Wireframe을 그린다
• Wirefame을 보고 HTML로 코딩할 수 있다
• div, section, header 등의 시맨틱 태그로 영역 구분 이유 이해
• HTML 문서에서 class와 Id를 언제 사용하는지 이해

와이어프레임 설계 및 목업 구현

와이어프레임(Wireframe)

• 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계
• 와이어로 설계된 모양을 의미, 선이나 도형으로 인터페이스 시각화
• 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도
• 화면 영역을 구분하는 것이 목적으로 태그 메모로도 가능

목업(Mock-up)

• 목업 : 실물 크기의 모형
• HTML과 CSS로 실제 기능은 하지 않는 웹 또는 앱을 제작

HTML로 웹 앱 구조 잡기

• 댓글 창 구조 잡기

<!-- 댓글 입력 영역 -->

        <div>

            <div>댓글</div>

            <input type="text" placeholder="댓글을 입력해주세요">

            <button>등록</button>

        </div>

<!--댓글 게시물-->

        <ul>

            <li>

                <div>User ID</div>

                <p>댓글내용</p>

                <span>작성 날짜</span>

                <button>추천</button>

                <button>비추천</button>

            </li>

        </ul>

 

Id 및 class를 목적에 맞게 사용하기

• id : 고유한 이름 붙이기
• Class : 반복되는 영역 유형별로 구분
• selector로 표현하기 
  • <div id="writing-section"> div#writing-section

<!-- 댓글 입력 영역 -->

        <div id="writing-section">

            <div>댓글</div>

            <input id="input-text" type="text" placeholder="댓글을 입력해주세요">

            <button id="register b">등록</button>

        </div>

 

        <!--댓글 게시물-->

        <ul id="comments">

            <li class="comment">

                <div class="user">User ID</div>

                <p class="comment">댓글내용</p>

                <span class="date">작성 날짜</span>

                <button class="recomend">추천</button>

                <button class="not recomend">비추천</button>

            </li>

        </ul>

 

5. Pair - HTML / CSS

Bare minimum requirement

• 트위터 인터페이스를 프로토타입 툴을 이용해 디자인
• 코드 샌드박스에 접속해 실습 진행