08.10 TIL - HTML & CSS

이형우·2020년 8월 10일

TIL 이라고 부르던데?

목록 보기
11/12

HTML & CSS
학습 목표

  • HTML 구조를 programmable하게 기획할 수 있다
    -> means 구조적으로 짜라!
  • CSS를 HTML에 적용할 수 있다
  • w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다
  • 기초적인 selector 규칙을 이해할 수 있다
  • CSS를 이용해 간단한 레이아웃을 만들 수 있다
  • element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분할 수 있다
    HTML과 CSS를 Javascript로 개발할 수 있게(programmable) 작성할 수 있다.

HTML

  • HTML이 markup language라는 것을 이해할 수 있다.
    ->"구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. 딱 코드를 보면 그 코드가 형상화 하려는 구조가 이해되는 언어.
  • HTML의 기본 Tag와 속성에 대해서 이해하고 적용할 수 있다.
    -> opening tag, closing tag, self-closing tag에 대해서 이해하고 있다.
    -> div, span 이 무엇이고, 차이는 무엇인지 알고 있다.
    -> ul, ol, li 가 무엇이고, 언제 사용해야 하는지 알고 있다.
    -> input type을 설정하여 다양한 종류의 input을 활용할 수 있다.
  • HTML을 class, id로 semantic 하게 분류하고, semantic tag를 적재적소에 사용하여 의미를 부여한다.
    -> semantic tag의 남용 또한 semantic 하지 않음을 이해해야 한다.
    -> HTML의 element 들이 의미를 가지고 있어야 한다.

HTML 이란..?

  • Hyper Text Markup Language
  • Web page 의 틀을 만드는 마크업언어
  • HTML은 Tag 들의 집합으로 구성 됨
    -> Tag : 부등호(<>)로 묶인 HTML의 기본 구선 요소
  • html 확장자 사용
  • HTML 은 Tree 구조로 되어 있다.
  • Self-Closing Tag : 태그 내부에 내용이 없다면, (<tag></tag>와 같이 표현되는 경우) 와 같이 표현 가능
<img src="codestates-logo.png"></img>
<img src="codestates-logo.png" />


div : 한줄을 다 먹음
span : 컨텐츠 크기만큼만 공간을 차지

<div>div 태그는 한 줄을 차지한다</div>
<div>division 2</div>
<span>span은 컨텐츠 크기만큼 공간을 차치</span>
<span>span2</span>
<span>span3</span>
  • img : 이미지 삽입
    <img src="codestates-logo.png">
  • a: 링크 삽입
    <a href="https://newkidsean.github.io/" target="_blank">내블로그</a>
  • ul(unordered list), li : 리스트
    ordered list : 1, 2, 3 이런식으로 순번이 매겨짐
  • input, textarea : 다양한 입력 폼
  • button
    <button>로그인</button>
  • How to embed javascript in HTML
    -> javascript 를 HTML 에서 사용하는 방법
  1. HTML 내부에 작성
  • <script>태그 이용
  1. HTML 외부에 작성

  • <script>태그의 src 속성 이용

  • MDN 등 검색하며 셀프로 HTML 공부해 보기

  • HTML 구조 관련 태그
    -> html, head, body, style, script, meta

  • HTML 컨텐츠 관련 태그
    -> <div>, <span>, <a herf="url">, <ul>, <li>, <iframe>, <br>, <table>, <thead>, <tbody>, <tr>, <th>, <td>, <code>, <pre>

  • HTML 폼 관련 태그
    -> <form>, <input>(type: text, checkbox, color, date, password...), <button>, <textarea>, <select>, <option>
    -> 왜 <b>, <font>, <center>등의 태그를 권장하지 않는지

CSS & Selector
학습 목표

  • CSS를 HTML에 적용하는 방법에 대해서 충분히 이해하고 있다.
    -> inline, HTML 외부, HTML 내부
  • 기초적인 selector 규칙을 이해할 수 있다
    -> # 및 . 쓰는 법
    -> 부모 자식 관계
    -> 클래스 동시에 적용하는 법, 여러 클래스 적용하는 법
  • CSS를 이용해 간단한 레이아웃을 만들 수 있다
    -> box model
    --> margin, padding, border
    --> width, height, top, left, bottom, right
    -> position
    --> static, relative, fixed, absolute, sticky
    -> z-index, float (advanced)
    -> flexbox (advanced)
    -> grid (advanced)
  • w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다
  • element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분할 수 있다

What is CSS?

  • Cascading Style Sheet 의 약자
  • 웹 페이지 구성요소의 스타일을 정의하는 언어

HTML Example

  • 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
  • 웹 페이지의 요소(element)들을 구성하는 역할

CSS Example

  • 로고, 검색창, 버튼이 중앙에 위치하고, 그 외의 기능이 우측 상단에 위치
    -> 검색창의 너비
    -> 버튼의 크기
    -> 구성요소를 어디에 위치할 것인가

How to use CSS??
CSS 를 HTML에 적용하는 세가지 방법
1/ inline : HTML 의 특정 태그에 직접 style을 적용
<h1 style="color: red; font-style: italic">hello world<h1>

  • h1태그에 style이라는 속성을 부여해서 적용
  • 색상은 빨간색, 스타일은 기울임꼴임을 명시
    2/ HTML 내부에 stylesheet 작성
  • <style>태그 이용
  • 보통 <head>태그 안에 삽입
  • 태그를 선택하는 규칙(selector)에 따라 일괄 적용

    3/ HTML 외부에 stylesheet 작성
  • <link>태그 이용
  • css 확장자로 저장된 stylesheet 파일을 href속성을 이용해 삽입

CSS Selector
CSS에서 요소(element)를 선택하는 규칙

  • Note : 태그라는 용어는 시작 및 종료 태그와 같이 마크업(Markup)을 의미하며, 요소는 의미를 갖는 하나의 구조를 의미.

Case study

  • 만일 다음 문서에서 Hello world에는 빨간색, Code states에는 파란색을 적용하고 싶을 경우는?

Solution.1 : 각각의 Element 에 고유한 id 를 부여

  • id 속성 이용
  • #identifier와 같이 #을 이용해 고유한 id를 선택

Solution.2 : 종류(class)를 만들고 Element 에 Class 부여

  • 각기 다른 색의 특성을 가진 종류를 만들고, 해당 Element에 적용
  • 여러 태그에 class 를 부여할 수 있으며, 한 태그에 여러 class 적용도 가능
  • .className 과 같이 .(dot)을 이용해 class 선택

Class 선택자와 ID 선택자

여러개의 Class 값을 갖는 Element

  • 공백(whitespace)을 이용해, 한 element에 여러 class를 지정할 수 있음
    <h1 class="impact red">Hello world</h1>
    .impact { font-size: 2em; font-weight: bold; } .red { color: red; }

CSS 혼자 공부해 보기

  • 레이아웃 & Box Model
    -> margin, padding, border
    -> width, height, top, left, bottom, right
    -> position, box-sizing
  • 레이아웃 고급
    -> z-index
    -> float, flex
  • 기본 스타일링
    -> font-*, background-*
  • Responsive Web
  • Pseudo class

CSS 로 Layout 만들기

브라우저에서 사용하는 좌표계

좌표계를 바탕으로 절대/상대적인 위치에 positioning 할 수 있다.

다양한 display 요소

  • 각 요소는 고유한 크기를 가질 수 있다. 단, inline 요소는 컨텐츠가 차지하는 크기로 고정된다.

Box Model

  • box 크기에 관련한 몇가지 속성들이 있다.
  • 사이즈 계산(sizing) 방법을 달리 설정할 수 있다. 보통 box-sizing: border-box; 로 설정해 놓는 편이 계산이 쉽다.

HTML 로 웹 앱의 구조 잡기
마크업(Markup)언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어
프로토타이핑 : 개발 초기에 모형을 만들어 기능의 요규사항을 파악 수 반영하는 개선방식

  1. 큰 틀에서 영역 나누기
    ex) 쓰기 영역, 읽기 영역
  2. 각 영역을 태그로 표현하기
<div>
    <div>댓글 9M</div>
    <input type="text" placeholder="댓글을 입력해주세요">
    <button>등록</button>
</div>

<ul>
    <li>
        <div>ouo****</div>
        <div>가나다라마바사 아자차카타파하..</div>
        <span>2018-03-04 23:23:34</span>
        <button>
            <img src="thumbup.png"> 0
        </button>
        <button>
            <img src="thumbdown.png"> 0
        </button>
    </li>
    <li>
        <!-- 두 번째 게시물은 생략-->
    </li>
</ul>

id 및 class 목적에 맞게 사용하기
id : 고유한(unique)한 이름을 붙일 때
class : 반복되는 영역을 유형별로 분류할 때


profile
이형우
완전 완전 초짜
이전 포스트

08.07 TIL

다음 포스트

08.11 TIL - DOM

0개의 댓글