HTML

태그는 그 의미에 맞춰서 사용해야 한다.

빈태그

  • <br>
  • <img src="">
  • <input type="">

리스트 태그

  • <ul>
    • <li>
  • <ol>
    • li
  • <dl>
    • <dt> : 명청
    • <dd> : 명칭에 대한 정의

테이블 태그

  • <table> : 표를 나타내는 태그

  • <tr> : 행을 나타내는 태그 ( 1개 만들면 1행짜리 표 )

  • <th> : 제목 셀을 나타내는 태그

  • <td> : 셀을 나타내는 태그 ( 2개 만들면 2열짜리 표 )

  • <thead> : 표의 제목을 나타내는 태그

  • <tfoot>: 바닥 행을 그룹화하는 태그

  • <tbody>: 본문 행을 그룹화하는 태그

  • HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경되었습니다.

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table>
  <caption>specification value</caption>
  <thead>
  <tr>
    <th rowspan="2">Grade</th>
    <th rowspan="2">Point</th>
    <th colspan="2">Strength</th>
    <th rowspan="2">Percent</th>
  </tr>
  <tr>
    <th>kg/mm</th>
    <th>lb/in</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Hard</td>
    <td>0.45</td>
    <td>56.2</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Medium</td>
    <td>123</td>
    <td>14</td>
    <td>14</td>
    <td>12</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>Large</td>
    <td>123</td>
    <td>12</td>
    <td>5123</td>
    <td>123124</td>
  </tr>
  </tfoot>
</table>
</body>
</html>

    image-20200103155743947

input

  • radio
    • group 속성으로 radio버튼들을 묶을 수 있음.
    • checked속성은 값이 없음
  • file
    • 파일을 업로드할 수 있도록 해주는 타입
  • submit
  • Reset
  • image
    • 이미지를 삽입할 수 있는 타입
    • src,alt를 사용할 수 있음.

select

  • option

layout

태그 설명
div 블록형태 태그 (본문을 감쌀 때 id를 container로 함.)
header 사이트의 가장 머리 태그
nav 네이게이션을 감싸는 태그
ul 리스트 아이템을 감싸는 태그
li 리스트 아이템 태그
aside 사이트 얖옆에 배치될 컨텐츠를 감싸는 태그
footer 사이트의 하단에 배치될 태그

HTML 시멘틱 태그 layout

image-20200102112725947

HTML 구조 설계 ( HTML structure design)

image-20200102115734495

image-20200102120006493

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <header>
    <h1>Company Name</h1>
    <img src="...." alt="logo">
  </header>
       
  <section>
    <nav>
      <ul>
      <li>Home</li>
      <li>Home</li>
      <li>About</li>
      <li>Map</li>
      </ul>
    </nav>
        
    <section>
      <button></button>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <div><img src="" alt=""></div>
      <button></button>
    </section>
        
    <section>
      <ul>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nostrum deserunt, aliquid laboriosam fugiat, eaque vero necessitatibus, magnam officia obcaecati iste. Ipsum fugiat suscipit, magni optio quae architecto laudantium molestias.</div>
        </li>
        <li>
          <h3>What we do</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto nostrum deserunt, aliquid laboriosam fugiat, eaque vero necessitatibus, magnam officia obcaecati iste. Ipsum fugiat suscipit, magni optio quae architecto laudantium molestias.</div>
        </li>
      </ul>
    </section>
  </section>
      
  <footer><span>Copyright @codesquad</span></footer>
</body>
</html>

Id 와 Class

  • id
  • class
    • 같은 스타일 속성을 부여하고 싶을 때 클래스를 만들고 원하는 태그에 적용시키는 방법

CSS (Cascading Style Sheets)

CSS 문법

  • 선택자(selector)
  • 속성(property)
  • 값(value)
  • 선언(declaration)
  • 선언부(declaration block)
  • 규칙(rule set)

주석

  • /* */

CSS를 작성하는 방식

  • inline
    • 태그 안에 적용하며 우선순위가 가장 높음
    • 유지보수가 어려움
  • internal
    • html파일안에 작성하면 새로운 파일을 만들지 않아도 됨.
  • external
    • 외부 .css파일을 만들어서 <link>를 사용해서 파일을 로드해서 사용하는 방법
    • rel속성을 통해 해당 .html파일과 어떤 관계인지 적어줘야함. rel="stylesheet"

CSS 상속

border , padding, background, border과 같은 배치에 관련된 속성(box Model)은 하위 태그에 상속이 되지 않는다.

color, font-size와 같은 색상이나 폰트에 관련된 속성들은 상속이 된다.

Cascading

스타일정보를 기반으로 최종적으로 어떤 스타일을 적용할지 경쟁하는 방식

  • Cascading 규칙
    • 중요도(!important)와 출처
    • 구체성
    • 선언 순서
  1. 사용자 !important 스타일
  2. 제작자 !important 스타일
  3. 제작자 스타일
  4. 사용자 스타일
  5. 사용자 에이전트 스타일

  • CSS를 작성하는 위치에 따른 방식

  • inline > internal > external

  • CSS의 선택자를 적는 방식

    아래와 같이 상세하게 적은 red가 우선순위에 우위를 가짐. 엘리먼트를 구체적으로 적은 것 부터

    body > span {
	color : red;
}
  
span {
  color : blue;
}

  • id , class

    id > class 이기 때문에 red로 색상이 적용

    #testId {
	color : red;
}
  
.testClass{
  color : blue;
}

  • 구체성에 따른 스타일 적용 방식

    구체성을 수치로 명시한 것

    • !important는 가장 우선순위

    • 1, 0, 0, 0 : 인라인 스타일

    • 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
    • 0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
    • 0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소

    상속받은 스타일은 어떤 구체성도 띄지 않음.

    조합자(+ > 는 어떤 구체성도 가지지 않음 )

     h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

CSS Selector

참고 사이트

  • 모든 태그

    span {
	color : red;
}

  • id

    #id-name {
	color : red;
}

  • 태그의 class 지정

    div.class-name{
	color : red;
}

  • 태그의 id 지정

    div#id-name{
	color : red;
}

  • 모든 하위 요소 선택

    div children-name {
	color : red;
}

  • 자식 요소 선택

    div > children-name{
	color : red;
}

  • n번째 자식요소를 선택

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
  <p>asdf</p>
  <p>sd</p>
  <p>asdfasd</fp>
  <p>asdfsdf</p>
</div>
      
</body>
</html>

    div > p:nth-child(2){
	color : red;
}

  • 형제요소

    div + p { 
	color : red;
}

  • 가상선택자

    링크 관련 선택자

    • :link 방문하지 않은 링크
    • :visited 방문한 링크

    사용자 동작 관련 가상 클래스

    • :focus현재 입력 포커스를 갖고있는 요소 (tab키를 통해 보면 알 수 있음)
    • :hover마우스 포인터가 가르키고 있는 요소
    • :active 활성화가 되어있는 요소 ( 클릭이 된 순간 )

    가상요소 선택자

    • 미리 정의해놓은 위치에 삽입이 되도록 약속해놓은 요소

    • ::before 가장 앞에 요소 삽입
    • ::after 가장 뒤에 요소 삽입
    • ::first-line 첫 줄
    • ::first-letter 블럭 단위의 첫 글자

  • 해당 속성 선택자

    아래처럼 클래스라는 속성 혹은 클래스 와 id가 있는 p에 적용되는 스타일입니다.

    p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

  • 부분 속성 선택자

    • [class~=”bar”] : class 속성의 값이 공백으로 구분한 “bar” 단어가 포함되는 요소 선택
    • [class^=”bar”] : class 속성의 값이 “bar”로 시작하는 요소 선택
    • [class$=”bar”] : class 속성의 값이 “bar”로 끝나는 요소 선택
    • [class*=”bar”] : class 속성의 값이 “bar” 문자가 포함되는 요소 선택

image-20200102125003998

​

속성-정의와 구문

  • w3c,mdn으로 알아보기
  • initial로 설정하는 경우 ie에서 지원하지 않음.
  • inherited가 yes인 경우만 상속을 받을 수 있음.

길이 단위

  • 절대 길이
    • px ( 1px = 1/96th of 1 inch )
    • pt - points ( 1pt = 1/72 of 1in)
  • 상대 길이
    • % - Percentage
    • em - font size of the element ( 소수점 셋째 자리까지 작성 가능 )
    • rem - font size of root element
    • vw - 1% of viewport’s width

color

h1 {
	color : red; /* color 키워드*/
  color : #ff0000; /* 16진법*/
  color : #f00; /* 16진법 축약형*/
  color : rgb(255,0,0); /* rgb */
  color : rgb(255,0,0,1); /* rgba (a = 투명도 alpha) */
}

font-size

  • em
    • 기준 값의 몇배로 할지 정하는 방법

box-model

  • content

  • padding

  • border

  • margin

    • margin 병합이 발생하는 경우

      1. 두 요소가 상하로 인접해 있는 경우
      2. 부모 요소와 첫번째 자식 요소 또는 마지막 자식 요소의 경우
      3. 내용이 없는 빈 요소의 경우

      위의 경우에서 무조건 발생하는 것이 아니라 아래 조건이 만족해야 병합이 발생합ㄴ디ㅏ

      1. 두 요소가 모두 block요소일 경우
      2. 부모요소에 padding혹은 border가 없는 경우

border

  • border-width : 각 위치에 따른 굵기를 지정할 수 있음.
  • border-style : 선 모양을 지정하는 속성. 상하좌우 별로 지정할 수 있음
  • Border-color : 선 색상을 지정할 수 있음. 상하좌우 가능
  • Border : 축약형으로 많이 작성

position

  • static
    • position속성의 기본 값
  • relative
    • position을 static에서 relative로 바꿔야 top,bottom과 같은 위치를 지정할 수 있음.
  • absolute
    • 기준이 되는 위치를 찾는다.
    • 기준이 되는 위치는 내 상위태그중에 static이 아닌 것의 위치
  • Fixed
    • 스크롤을 해도 이동하지 않는 속성

float

  • float를 자식속성에 넣었으면 부모 태그에 overflow : auto속성을 넣어줘야한다.
  • 형제 엘리먼트 중에 float속성을 사용했다면 clear : both속성을 사용해서 float가 있다는 것을 인지하게 해줘야한다.

flex

반응형 웹을 사용할

z-index

  • 나중에 작성한 엘리먼트가 위에 보인다.

  • position : static이 아닌 경우에만 동작

  • z-index 는 절대적인 것이 아니라 우선 형제 태그끼리 비교를 한다.

    .parentA{
	z-index : 2;
}
.childA{
	z-index : 4;
}
.parentB{
	z-index : 2;
}

아래 처럼 무조건 z-index가 크다고 앞에 오는 것이 아니라 하위 엘리먼트의 z-index는 부모의 z-index 를 기준으로 한다. 노란색 태그가 10이라고 하더라도 빨간색 태그가 회색태그와 z-index가 동일하므로 늦게 작성된 회색 태그가 더 위에 오는 것이다.

image-20200102142356574

그렇기 때문에 아래와 같이 더 작더라도 상위 엘리먼트가 2이므로 회색 div보다 앞에 올 수 있다.

image-20200102142423815

Less

  • variables
  • mixins
  • 중첩된 룰처리
  • operation

위 네가지가 불가능했던 기존 CSS를 해결하기 위한 방법

  • 변수 만들기

    @base_width. : 300px;
@gray_border : 1px solid gray;
@text-base-color : #5d1;

  • mixin

    .content {
	width : 200px;
	height : 200px;
}
footer ul {
	.content;
	margin-top : 12px;
}

  • nested

    .content {
	width : 200px;
	height : @base-width/2; 
	li { 
		list-style : none;
    a {
      color : @text-base-color;
    }
  }
}

less compile

less를 설치해서 명령어를 작성하면 작성한 .less파일을 .css 파일로 변경할 수 있음.

매번 변경하는 커맨드를 작성하는 것은 귀찮기 때문에 gulp-watch-less를 사용해서 변경을 감지할 수 있다.

transition

scale이 변경될 때 자연스럽게 변할 수 있게 도와주는 CSS속성

브라우저에서 대부분 지원하기 때문에 문제없이 사용할 수 있다.

transform

GPU를 사용하기 때문에 애니메이션, 배치를 할 때 주로 씀. translate3d를 사용하는 게 일반적임

background

  • background-color

    기본 값 : transparent

  • background-repeat

    기본 값 : repeat

    • repeat-x : x축으로만 반복 y축으로 반복 안됨
    • repeat-y : y축으로만 반복 x축으로 반복 안됨
    • no -repeat : 한개만 나옴

  • background-position

    기본 값 : 0% 0% (x% y% )

    px로 할 경우 left top이 기준이 됨.

  • Background-attachment

    기본 값 : scroll

    fixed브라우저를 기준으로 고정되는 값 (background-position의 위치에 따라 달라짐)

padding

padding: [-top] [-right] [-bottom] [-left];
            0      10px     20px      30px   /* 상, 우, 하, 좌 다름 */
						0      10px     20px             /* 좌, 우 같음 */
            0      10px                      /* 상, 하 같음 & 좌, 우 같음 */
            0                                /* 상, 우, 하, 좌 모두 같음 */

margin

  • auto를 설정하기 위해서는 해당 요소의 width값이 지정이 되어있어야한다.

  • block-level을 정렬할 때 사용하는 속성

  • margin collapse(마진 병합)

    인접한 두개이상의 박스의 마진이 하나로 합쳐지는 것을 의미합니다.

    더 큰값이 적용된다.

    인접해있다고 무조건 발생한다기 보다 margin영역이 조금이라도 겹쳐있다면 발생하는 것.

margin & padding

  + - auto 단위
Margin O O O px, %
Padding O X X px, %

%로 작업할 때 무조건 가로 길이를 기준으로

width

  • width를 정할 때 box-sizing : border-box 로 하지 않았을 경우 width는 그냥 width가 된다.

height

  • % 속성을 쓸 때는 부모 요소의 높이를 100%로 한다.
  • 부모요소의 명시적인 높이를 필요로 한다.

타이포그래피

image

font-family

폰트를 작성할 때는 하나만 사용하는 것이 아니라 generic font까지 작성해줘야한다.

기본적으로 body에 폰트를 지정해놓는다.

font-fmaily :  serif /* 삐침이 있는 `serif` */
font-fmaily : sans-serif : /* 삐침이 없는 `serif` */
  • body에 generic font를 작성했다고 해서 하위 요소에 작성할 때 generic을 작성하지 않으면 안된다.
font-family: Helvetica, Dotum, '돋움', Apple SD Gothic Neo, sans-serif;

가장 먼저 Helvetica를 사용하고, 이를 사용할 수 없을 때 Dotum을 사용하는 방식으로 우선순위에 따라 차례대로 적용 됩니다. 만약 “abc 가나다 123” 이라는 글자가 있다면, “abc”와 “123”은 Helvetica로 표현이 되고, “가나다”는 Dotum으로 표현이 됩니다. “가나다”가 Dotum으로 표현된 이유는 Helvetica는 한글을 지원하는 폰트가 아니기 때문입니다.

  • 디바이스마다 지원하는 폰트가 다르고 폰트명이 다를 수 있기 때문에 디바이스별 대표 폰트와 지원 범위도 확인해봐야 합니다.

ilne-height

image

line-height를 number와 %로 작성할 때 주의점

아래 처럼 숫자는 상속하게 될 경우 자식요소의 font-size로 다시 계산하지만 %로 상속할 경우 부모가 계산한 값을 그대로 넘겨받는다.

body { font-size: 20px; line-height: 2; }       /* line-height = 40px; */
body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */

body { font-size: 20px; line-height: 2; }    /* line-height = 40px; */
p { font-size: 10px; }                                  /* line-height = 20px; */


body { font-size: 20px; line-height: 200%; }    /* line-height = 40px; */
p { font-size: 10px; }                                          /* line-height = 40px; */

font-weight

font-weight : normal /* 400 과 같음 */
font-weight : bold  /* 700 과 같음 */
font-weight : lighter  /* 부모 요소 보다 얇은 폰트 가중치 */
font-weight : bolder  /* 부모 요소 보다 굵은 폰트 가중치 */

font-style

font-style : normal /* 기본 */
font-style : italic /* 이탤릭체 */
font-style : obilque /* 기울임  */

font-variant

font-variant: small-caps; /* 소문자를 작은 대문자로 변환 */

font

font : font-size font-family /* 이 두개는 필수  */

실무에서는 지양하는 속성임

  • 시스템 폰트

  • 이미지 폰트

  • 웹 폰트

    • 웹에 있는 글꼴을 사용자의 로컬 환경 (컴퓨터)으로 다운로드하여 적용하는 속성입니다.

    • @font-face{
	font-properties
}

    • 속성 값

      • font-family(필수) : 글꼴의 이름을 지정
      • src(필수) : 다운로드 받을 글꼴의 경로(URL)
      • Font-style(옵션) : 글꼴의 스타일 지정, 기본 값은 normal
      • Font-weight : 글꼴의 굵기 지정, 기본 값은 normal

    • 사용 예시

      @font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}
    
body {
    font-family: webNanumGothic;
}

vertical-align

W3C vertical-align

  • Block 은 불가능
  • sub : 부모 아래 첨자 기준으로 정렬
  • super : 부모 위 첨자 기준으로 정렬
  • text-top : 부모 텍스트의 맨 위(Ascender 제외)
  • text-bottom : 부모의 텍스트의 맨 아래(Descender 제외)
  • middle : 부모의 중앙에 위치
  • top : 부모의 맨 위 위치
  • bottom : 부모의 맨 아래 위치

text-align

  • linine-level에 적용하는 것.
  • block-level에는 text-align 으로 정렬할 수 없음.
  • block-level에 작성하면 안의 inline-level이 정렬됨.
  • block-level을 정렬할 때는 길이를 준 상태로 margin

text-indent

  • text-indent : length | initial | inherit

text-indent

  • 문장의 첫 들여쓰기를 적용하는 속성
  • 부모 요소의 width를 기준으로 퍼센트 지정

text-decoration

text-decoration : overline; /* 윗 줄 */ 
text-decoration : line-through; /* 가운데 줄 */
text-decoration : underline; /* 밑 줄 */
text-decoration : underline overline; /* 위 밑 줄 */
text-decoration-color: currentColor; /* 현재 폰트 색으로 데코레이션 */
text-decoration-style: wavy; /* 지렁이 밑줄 */
text-decoration-style: double;

단어 관련 속성

white-space : no-wrap  /*  줄바꿈을 무시한다.  */
letter-spacing : 10px /* 자간을 조정하는 속성*/ 
word-spacing : 10px /* 단어 간격을 조정 */
word-break : normal 
word-break : keep-all  /* 단어 기준 줄바꿈  */ 
word-break : break-all /* 글자 기준 줄바꿈 */
word-wrap : normal 
word-wrap : break-word /* 요소가 엘리먼트 넘어가면 줄바꿈 */ 

/* 줄바꿈을 할 건데, 글자 단위로 모두 자를 생각이라면 */ 
  word-wrap: break-word;
  word-break: break-all;

/* 줄바꿈을 할 건데, 단어 단위로 자를 생각이라면 */ 
  word-wrap: break-word;
  word-break: keep-all;

display

display : inline; 
display : block;
display : inline-block;
display width Height Margin Padding Boder
inline X X 좌/우 좌/우 좌/우
block O O O O O
Inline-block O O O O O

  • inline이 margin, padding, border이 적용되는 것 같지만 부모 요소의 크기는 변함이 없음. margin도 옆만 적용

  • inline-block은 배치는 inline box는 block처럼 동작한다.
  • inline-block은 띄어쓰기나 개행을 할경우 띄어쓰기가 되기 때문에 주의해야함.

visibility

visibility : visible;
visibility : hidden /* 공간을 차지함. screen리더기에 읽힘. */ 
visibility : collapse;

float

  • block형태로 만들어버림
  • 기사와 같이 사진을 배치하고 글씨들을 배치할 때 유용할 것으로 생각됨.

clear

float속성을 주게 되면 다음 엘리먼트가 영향을 받기 때문에 그것을 막기 위해서 사용

clear : left  /* float left 에서 clear시킴 */ 
clear : right /* float right 에서 clear시킴 */
clear : both /* left right 둘다 clear시킴 */

float를 하면 따라오는 속성임

position

  • static
  • relative
  • absolute
    • span과 같은 경우에 block-level로 만들어준다.
    • 이 또한 width, height 는 커지지만 부모의 크기에 영향을 주지 않는다.
    • 기준을 잡는 좌표는 마진과 보더를 제외한 패딩부터 시작한다.