JavaScript 배열 메소드 ( Array method )

자바스크립트에서 자주 쓰이는 배열 메소드를 정리

Array.isArray() (ES6)

인자에 들어가는 객체가 배열인지 확인할 때 사용
인자 - object

Array.isArray({ a: 1, b: 2}) /// false
Array.isArray([1,2,3]) //true

concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환
인자 - item1, item2, …

const arr = [1,2,3]
arr.concat(4,5) // [1,2,3,4,5]
arr.concat([4,5]) // [1,2,3,4,5]
arr // [1,2,3] 원본이 바뀌지 않음

인자에 배열을 넣으면 배열의 원소 순서대로 들어감

every(), some() (ES6)

배열의 모든 원소가 제공한 함수를 통과하는지 테스트하는 메소드 every
배열의 원소중 하나라도 제공한 함수를 통과하는지 테스트하는 메소드 some
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [2,4,6,8]
arr.every( el => el % 2 === 0 ) // true
arr.some( el => el % 2 ) // true
arr // [2,4,6,8] 원본이 바뀌지 않음

fill() (ES6)

배열의 시작 인덱스부터 끝 인덱스까지 정적 값으로 채우는 메소드
인자 - value, start(optional), end(optional)
start의 기본값은 0, end의 기본값은 배열의 길이

const arr = Array(3)
arr.fill(2) // [2,2,2]
arr // [2,2,2] 원본이 바뀜

filter() (ES6)

배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드
인자 - callback

const arr = [1,2,3,4,5]
arr.filter( el => el < 3 ) // [1,2]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

forEach() (ES6)

배열 원소마다 제공한 함수를 실행하는 메소드
인자 - callback
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [1,2,3]
arr.forEach( el => console.log(el) )
// 1
// 2
// 3
arr // [1,2,3] 원본이 바뀌지 않음

includes() (ES6)

배열에 특정 원소가 포함돼 있는지 여부를 확인해 true, false로 리턴
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.includes(3) // true
arr.includes(1,1) // false
arr // [1,2,3,4] 원본이 바뀌지 않음

indexOf(), lastIndexOf()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 있으면 해당 인덱스 만약 없다면 -1을 리턴
lastIndexOf는 반대 순서로 탐색
인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.indexOf(3) // 2
arr.indexOf(5) // -1
arr // [1,2,3,4] 원본이 바뀌지 않음

join()

모든 원소를 연결해 하나의 문자열로 만드는 메소드
인자 - separator

const arr = [1,2,3,4]
arr.join() // "1,2,3,4"
arr.join("..") // "1..2..3..4"
arr // [1,2,3,4] 원본이 바뀌지 않음

map() (ES6)

배열 내의 모든 원소에 대하여 제공된 함수를 호출하고,
결과를 모아 새로운 배열을 리턴하는 메소드
인자 - callback
callback의 인자로는

  1. currentValue - 현재 순회하는 원소 값
  2. index - 순회하는 원소의 index
  3. array - 순회되는 배열
const arr = [1,2,3]
arr.map( el => el * 2 ) // [2,4,6]
arr // [1,2,3] 원본이 바뀌지 않음

push(), pop() / unshift(), shift()

배열의 맨 뒤에 새로운 원소를 추가하는 메소드 push
인자 - item1, item2, …
배열의 맨 뒤 원소를 지우는 메소드 pop
인자 - X
배열의 맨 앞에 새로운 원소를 추가하는 메소드 unshift
인자 - item1, item2, …
배열의 맨 dkv 원소를 지우는 메소드 shift
인자 - X

const arr = [1,2,3]
arr.push(5) // 4 ( 배열의 길이 리턴 )
arr // [1,2,3,5]
arr.pop() // 5 ( 삭제된 원소 리턴 )
arr // [1,2,3]
arr.unshift(2) // 4 ( 배열의 길이 리턴 )
arr // [2,1,2,3]
arr.shift() // 2 ( 삭제된 원소 리턴 )
arr // [1,2,3]

reduce(), reduceRight() (ES6)

배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 리턴
reduce는 왼쪽부터, reduceRight는 오른쪽부터 수행
인자 - callback, initialValue ( optional )
callback의 인자로는

  1. accumulator - 누적 계산값
  2. currentValue - 현재 처리값
  3. currentIndex - 현재 처리값의 index
  4. array - 호출된 배열
const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b ) // 10
arr.reduce( (a,b) => a+b, 10) // 20
arr // [1,2,3,4] 원본이 바뀌지 않음

단순히 값을 연산하는 용도 뿐만 아니라 여러가지 역할로 사용이 가능

reverse()

인자: 없음
배열의 원소 순서를 반대로 정렬해 반환

const arr = [1,2,3]
arr.reverse() // [3,2,1]
arr // [3,2,1] 원본이 바뀜

slice()

배열의 start부터 end까지 shallow copy하는 메소드
인자 - start ( optional ), end ( optional )

const arr = [1,2,3,4,5]
arr.slice(2) // [3,4,5]
arr.slice(1, 3) // [2,3]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

splice()

배열의 원소를 삭제하거나 새 원소를 추가하는 메소드
인자 - start, deleteCount, item1, item2, ..
start부터 deleteCount만큼 삭제되고
뒤로오는 인자들은 삭제된 위치에 추가되는 원소들

let arr = [1,2,3]
arr.splice(2) // [2,3] ( 삭제된 배열 리턴)
arr // [1] 원본이 바뀜

arr = [1,2,3]
arr.splice(1,1) // [2]
arr // [1,3]

arr = [1,2,3]
arr.splice(1,1,3,4) // [2]
arr // [1,3,4,3]

sort()

배열을 정렬하는데 사용된다.
인자를 넣지 않으면 기본적으로 유니코드 코드 포인트에 따라 정렬된다.
인자 - compareFuntion ( optional )

const arr = [3,20,12,1,4]
arr.sort() // [1, 12, 20, 3, 4]
arr // [1, 12, 20, 3, 4] 원본이 바뀜

위와같이 숫자를 정렬할 때 유니코드 순서로 정렬되기 때문에
오름차순이나 내림차순으로 정렬하기 위해서는 다음과 같이 한다.

const arr = [3,20,12,1,4]
arr.sort( (a,b) => a-b ) // 오름차순 [1, 3, 4, 12, 20]
arr.sort( (a,b) => b-a ) // 내림차순 [20, 12, 4, 3, 1]

위에서는 ES6의 Arrow function을 사용했다.

toString

배열의 원소를 문자열로 반환
인자 - X

const arr = [1,2,3]
arr.toString() // "1,2,3"
arr // [1,2,3] 원본이 바뀌지 않음
  1. BlogIcon 떱스턴 2018.05.03 18:18 신고

    주소가 바뀌었는지 링크를 클릭해도 접속이 안되네요! 404

  2. BlogIcon 나를지키라능 2019.03.08 16:10

    감사합니다 ^^








CSS 중앙정렬 가이드

수평정렬, 수직정렬에 대해 찾아보다가 잘 설명된 페이지)가 있어 포스팅
예제 코드는 정확히 필요한 부분만 가져왔기 때문에 폰트,배경 색 같은 코드는 빠져있음

수평정렬 ( horizontally )

1. inline 요소를 수평 중앙정렬 시

부모 요소에 text-align: center 적용

<!-- HTML -->
<nav>
  <a href="#">One</a>
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
</nav>

<!-- CSS -->
<style>
nav {
  text-align: center;
}
</style>

부모 요소인 nav 태그에 text-algin: center를 적용하면
인라인 태그이면서 자식 태그인 a 태그들은 중앙정렬이 된다.

2. block 요소를 수평 중앙정렬 시

block 요소가 한개일 때, 두개 이상일 때를 나누어 알아보자.

2-1. 1개의 block 요소를 수평 중앙정렬 할 때

block 요소는 width 속성을 따로 설정하지 않으면
자동으로 width: auto가 적용되므로 width 설정 후 margin: 0 auto 설정

<!-- HTML -->
<div class="center">
  I'm a block level element and am centered
</div>

<!-- CSS -->
<style>
.center {
  width: 200px;
  margin: 0 auto;
}
</style>

여기서 margin: 0 auto는 위아래 마진은 0 좌우는 남는 여백의 반반씩 가져간다는 뜻

2-2. 2개 이상의 block 요소를 수평 중앙정렬 할 때

부모요소에 text-align: center, 자식 요소의 각각에 display: inline-block을 적용해주면 된다.

<!-- HTML -->
<main class="inline-block-center">
  <div> I'm an element that is block-like with my siblings and we're centered in a row. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<!-- CSS -->
<style>
  .inline-block-center {
    text-align: center;
  }
  .inline-block-center div {
    display: inline-block;
    width: 200px;
    text-align: left;
  }
</style>

display: inline-block을 사용할 때는 width 또는 max-width 값을 설정해줘야 퍼지지 않고 레이아웃이 잡힘.
위의 코드와 같이 작성하면 이미지의 위쪽과 같이 높이가 제각각인 블럭이 만들어지는데
이를 해결하기 위해서는 height, vertical-align: top을 주면
이미지의 아래와 같이 일정한 모양을 잡을 수 있다.

수직정렬 ( vertically )

1. inline 요소를 수직 중앙정렬 할 때

1-1. 한 줄일 경우

disaplay: block 설정 후 heightline-height를 같은 값으로 설정하면 된다.
이 때 white-space: nowrap 속성으로 자동 줄바꿈이 안되도록 해야한다.

<!-- HTML -->
<main>
  <span> I'm a centered line. </span>
</main>

<!-- CSS -->
<style>
main span {
  display: block;
  width: 50%;
  height: 100px;
  line-height: 100px;
  padding: 20px;
  white-space: nowrap;
}
</style>

1-2. 여러 줄일 경우

부모 요소에 display: table, 자식 요소에 display: table-cell, vertical-align: middle 사용

<!-- HTML -->
<div class="center">
  <span>I'm vertically centered multiple lines of text in a CSS-created table layout.</span>
</div>

<!-- CSS -->
<style>
  .center {
    display: table;
  }
  .center span {
    display: table-cell;
    vertical-align: middle;
  }
</style>

2. block 요소를 수직 중앙정렬 할 때

2-1. 정렬할 요소의 높이를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute를 적용해
height 값을 설정하고 top: 50%, marginheight의 절반만큼 마이너스로 중앙 정렬

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    heigth: 100px;
    margin-top: -50px;
  }
</style>

2-2. 정렬할 요소의 높이를 모를 때

2-1 번의 margin-top 대신 transform: translateY(-50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
    height: 300px;
  }
  .center div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>


동시에 수평, 수직 정렬을 하고 싶을 때

1. 정렬할 요소의 width와 height를 알 때

부모 요소에 position: relative, 자식 요소에 position: absolute 적용 후
top: 50%, left: 50%, margin-topwidth의 절반만큼 마이너스 설정,
margin-leftheight의 절반만큼 마이너스로 설정

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -150px;
  }
</style>


2. 정렬할 요소의 width와 height를 모를 때

1번의 margin-top, margin-left 대신 transform: translateY(-50%, -50%)를 사용하면 된다.

<!-- HTML -->
<div class="center">
  <div>I'm vertically centered multiple lines of text in a CSS-created table layout.</div>
</div>

<!-- CSS -->
<style>
  .center {
    position: relative;
  }
  .center div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>



'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (5) 2019.10.31
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
  1. BlogIcon SONYLOVE 2017.04.11 14:38 신고

    가운데 정렬에 애먹었는데 도움이 되겠네요.

  2. ㅇㅇ 2017.10.24 23:03

    수평정렬이 잘 안 됐는데 flex 넣으니까 그냥 되네요.. flex 짱짱
    감사합니다.

  3. 2019.11.02 01:57

    비밀댓글입니다

    • 2019.11.04 15:08

      비밀댓글입니다

React 설치

패키지 매니저 npm 또는 yarn을 통해 설치

yarn이 더 빨라서 yarn을 통한 설치방법을 알아보자.

yarn 설치

우선 npm이 설치되어 있다는 가정하에 순서를 적어보면,

npm install --global yarn, homebrew가 깔려있다면 brew install yarn을 통해 yarn 설치 ( 자세히는 모르지만 후자로 설치하는것이 이슈가 덜 발생하는것으로 알고잇음 )

yarn 업데이트 방법은 yarn self-update이다.

yarn init

터미널에서 프로젝트 파일로 들어간 뒤 yarn init으로 package.json 파일을 생성한다.

npm과 같이 이 파일은 프로젝트에 관한 정보를 담고있다.

그 다음으로 yarn add react 를 통해 프로젝트에 리액트를 추가할 수 있다.

이 때 yarn.lock 파일은 현재 프로젝트에 설치된 패키지의 일관성을 보장하기 위해 버전과, 종속성을 적어두는 역할을 한다.

패키지를 삭제할 땐 yarn remove (패키지명)

패키지를 업데이트할 땐 yarn upgrade (패키지명)를 사용


react 설치 라는 말이 어색한데 붙일말이 딱히없음.,


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/05/05/html/HTML-Standard/


새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/04/17/HTML-basic/


HTML이란

HyperText Markup Language

HTML은 웹 페이지를 작성하기 위한 표준 마크업 언어


기본적인 HTML 구성

<!DOCTYPE html> HTML5 정의

<html> 루트 엘리먼트

<head> 문서에 대한 메타정보 포함

<title> 문서의 타이틀 지정

<body> 페이지의 컨텐츠


기본적인 태그의 종류

제목태그 <h1> ~ <h6>

단락태그 <p>

             <pre> 쓴 그대로 반영

링크태그 <a href="주소">

이미지태그<img src="주소" alt="대체 텍스트" width="너비" height="높이">

줄바꿈태그 <br> (닫는태그 없음)

수평선태그 <hr>

스타일태그 <style> 색상,글꼴,배경색 등.. 변경


HTML 속성

언어 선언 속성 <html lang="ko"> 필요한 응용프로그램, 검색엔진에 중요

제목 속성 <p title=""> title 속성 값이 툴팁으로 표시(단락 위에 마우스)

링크 속성 <a href=""> 링크 주소

크기 속성 <img src="주소" alt="대체 텍스트" width="너비" height="높이">

alt 속성 이미지를 표시할 수 없을때 대체 텍스트 지정


HTML 서식

<b> 굵게

<strong> 중요 텍스트

<i> 기울임

<em> 강조

<mark> 하이라이트

<small> 작은 텍스트

<del> 삭제된 텍스트

<ins> 삽입된 텍스트

<sub> 아랫첨자

<sup> 윗첨자


HTML 인용

<q> 따옴표 삽입

<blockquote cite=""> 인용구 삽입

<abbr title=""> 약어 정의

<address> 문서의 연락처 정보 정의 (이탤릭체 표시)

<cite> 작품의 제목 (이탤릭체 표시)

<bdo dir="rtl"> 텍스트 방향 재정의 


HTML 컴퓨터 코드

<kba> 키보드 입력 정의

<samp> 샘플 출력 정의

<code> 코드의 일부 정의 <pre>코드와 같이 사용

<var> 변수 정의


HTML 주석

<!-- -->

조건부 댓글

<!-- [if IE 9]> <![endif]-->


HTML 색상

rgb(255,255,255) or 16진법 #FFFFFF


HTML 링크

링크 전체 작성 or 로컬 링크 작성

로컬링크란 동일한 웹 사이트에서 상대url 지정 ex)html_images.asp


타겟 속성

<a href="" target="_blank">

_blank 새창이나 탭에서 문서 열기

_self 같은 창/탭에 문서 열기 (기본값)

_parent 부모 프레임에서 문서 열기

_top 윈도우 전체에 열기

 framename 명명된 프레임에 문서 열기

링크로 이미지를 사용하는게 일반적임

하이퍼링크 밑줄 없애기 text-decoration:none 설정


책갈피 만들기

id값을 준 뒤 <a href="#id">로 추가


HTML 이미지

<img src="주소" alt="대체텍스트" style="스타일">

닫는태그 x

항상 이미지 폭,높이 지정/미지정시 이미지 로드시 페이지 깜빡임

스타일 속성을 직접 사용하는것이 좋음

<a>태그를 사용해 이미지에 링크 사용

border:0; 속성은 IE9 이전을 위해 추가

이미지맵 <map>태그 사용

ex)

<img src="abc.gif" alt="abc" usemap="#abcmap" style="width:145px;height:126px;">

<map name="abcmap">
  <area shape="rect" coords="0,0,52,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="60,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>


HTML 테이블

<tr> 테이블 정의

<th> 테이블 헤더 정의

<td> 테이블 데이터 정의 (text,img,list 등등 HTML모든 요소 포함 가능)

<caption> 캡션 추가시 사용

<colgroup>,<col>열 그룹 지정/ <caption> 뒤 <tr> 전에 지정해야함

<thead>,<tbody>,<tfoot> 테이블을 부분화함

테두리 설정시 table, th, td 모두에 정의해야함

축소 테두리 사용시 border-collapse: collapse; 사용

간격 사용시 padding 사용

정렬시 text-align 사용

테이블 간격 사용시 border-spacing 사용

열 병합시 <th colspan="2"> 사용

행 병합시 <th rowspan="2"> 사용


HTML 리스트

<ul> 정렬되지 않은 리스트 style="list-style-type:~"

style - disc(기본값),circle,square,none

<ol> 정렬된 리스트 type="~"

type - 1(기본값),A,a,I,i

Description List

<dl> 목록, <dt> 용어(이름), <dd> 설명


HTML 블록,인라인

블록-<div>,<hi>,<p>,<form>

인라인-<span>,<a>,<img>

<div> 다른 element의 container로 사용, style,class가 일반적

<span> text의 container로 사용, style,class가 일반적

div class는 .class명으로 스타일 설정


HTML iframe

웹 페이지 내에 웹 페이지를 표시하기 위해 사용

<iframe src="url" height="~' width="~"></iframe>

style="border:none;" 테두리 제거

링크사용시 iframe에 name값을주고 a태그로 target지정

ex)<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="~" target="iframe_a">babo</a></p>


HTML JavaScript

JS로 HTML요소 선택시 document.getElementById(ID) 사용

.innerHTML로 내용변경

.style.fontSize="10px";로 스타일변경

<nonscript> 스크립트를 지원하지 않는 브라우저를 위한 대체 컨텐츠


HTML <head>

<title> <style> <link> <script> 포함

<meta charset="UTF-8">사용 문자 집합 정의

<meta name="정의" content="설명">

<meta http-equiv="refresh" content="30"> 30초마다 새로고침

<base> 모든 상대 url의 기본 url과 베이스 대상 지정


HTML 레이아웃

HTML5 시맨틱 요소


HTML <form>

<input type="~"> text/한줄의 텍스트 radio/선택버튼 submit/제출버튼 name속성 생략시 데이터 전송 x

<form action="양식 데이터를 처리하는서버,미지정시 현재페이지">

method 속성 get,post

get-크기제한, 짧은양 적합, 중요한정보 x

post-크기제한x 대용량 데이터, 중요한 정보

<fieldset> 그룹 관련 데이터에 사용

<legend> <fieldset> 캡션 정의


HTML 폼 양식

*<input> 여러 방법으로 표현 가능

*<select name="~"> 선택 옵션

 <option value="~" selected></option> selected속성-미리 선택

 </select>

*<textarea name="~" rows="~" cols="~"> 텍스트 영역 cols폭 rows 높이

*<button type="button"  onclick="alert('Hello world!')">button</button> 클릭버튼

*<datalist> <input>안에 들어가며 datalist의 id값과 input의 list 값이 같아야함

*<keygen name="security"> 사용자를 인증하는 보안방법 제공/ 클라이언트 인증서 생성시 사용가능

*<output> 계산결과를 보여줌


HTML 입력 유형

<input type="text"> 한줄의 텍스트필드

password 별표or원으로 표시

submit 입력처리,제출/ value를 생략하면 버튼생김

reset 초기화

radio 선택버튼

checkbox 체크박스

button 버튼 <input type="button" value="Click ME" onClick='alert('Hello World!')>

color 색상 선택기 표시,선택

date min,max로 날짜 설정

datetime

datetime-local 날짜,시간 선택

email 이메일 형식 입력 일부 스마트폰은 키보드에 .com추가

month 달 선택

week 주 선택

number min,max설정후 숫자 입력필드표시, step은 배수설정

range min,max로 조절

search 검색기능

tel 전화번호포함 (사파리8지원)

time 시간 선택

url url입력, 일부 스마트폰은 키보드에 .com추가


HTML 입력 특성

value로 초기값 지정

readonly 읽기전용,수정불가

disabled 비활성화 필드

size="10" 크기

maxlength="10"  최대길이

autocomplete="on" 자동완성 사용자가 이전에 입력한 값에 기초해 완료<form>의<input>에서 작동

novalidate  ??

autofocus 자동커서

form id값을주고 form 밖에서 같은값을 form속성으로 달면 form안의 내용으로 인식


*제출(submit, image)에 사용

formaction  form의 action을 무시하고 formaction으로 

formenctype 인코딩 방법 지정

formmethod <form>의 method무시

formnovalidate <novalidate> 무시

formtarget 


pattern 이메일,비밀번호 등 패턴을 설명

require 필수입력사항

step 단계속성, 숫자,범위,날짜 등 에 사용

새로운 블로그에 다시 정리해 놓은 글이 있습니다.

참고하시면 좋을 것 같습니다!

https://youtaekjung.github.io/2018/04/18/css/CSS-basic/


CSS란?

Cascading Style Sheets

HTML elements를 표시하는 방법


CSS구문

h1 { color:blue; font-size:10px; }

Selector/Property+Value=Declaration

CSS Selector - HTML Element의 name,id,class,attribute 등으로 찾음

element - 그대로 작성 ex) <p> => p { }

id - #을 작성 ex) <p id="hi"> => #p { }  (이때 id값은 고유한 값을 가지며 #다음에 숫자는 작성 불가)

class - .을 작성 ex) <p clalss="hi"> => .p { } 

grouping 가능 ex) h1, h2, p { }

CSS 내에서 주석 /* */

속성값과 단위사이에 공백x ex)20px


CSS 삽입 방법

외부 스타일 시트 - <head>태그  안에 <link>로 불러옴 ex)<link rel="stylesheet" type="text/css" href="style.css">

내부 스타일 시트 - <style> 태그 안에 작성 <style> h1 { ~} </style>

인라인 스타일 시트 - 단일 요소에 고유한 태그 적용시 사용 ex)  <h1 style="~"></h1>

외부,내부가 같이 적용되면 나중에 작성한 것으로 적용

cascading order 스타일 적용 순서

1.인라인 스타일

2.외부,내부 스타일(나중에 작성된 것이 우선)

3.기본 스타일


CSS의 배경(background)

배경색:background-color:~

배경이미지:background-image: url("~");

배경반복:background-repeat:

repeat-x 가로반복

repeat-y 세로반복

no-repeat 반복x

배경배치: position: right top 오른쪽위에 배치

고정 attachment:fixed

약식 속성 background: 속성값/ 순서(color, image, repeat, attachment, position)


CSS 테두리(border)

테두리 스타일 - border-style:속성;

dotted,dashed 점선 테두리

solid 실선 테두리

double 이중 테두리

none 테두리 없음

hidden 숨겨진 테두리 정의


테두리 폭 - border-width:속성;

10px/medium/10px 10px 10px 10px(위 오른쪽 아래 왼쪽)

테두리 색상 -  border-color:속성;

테두리 다르게 지정

border-top-style: 속성1 2 3 4

>위1 오른쪽2 아래3 왼쪽4

border-top-style: 속성1 2 3

>위3 좌우1 아래2

border-top-style: 속성1 2

>위아래2 좌우1


약식 속성

border: width style(필수) color;

둥근 테두리 border-radius:10px;

CSS Outline

outline-stsyle:속성값 border와 동일

border와 outline의 차이

border는 옵션만큼 크기증가, outline은 테두리만 생기는 것 outline은 레이아웃에 영향x


CSS 여백(margin)

margin-top(bottom right lefrt): 속성(자동, 길이, %, 상속) 음수 사용 가능

약식 속성 margin:top속성 right속성 bottom속성 left속성

자동값 margin: auto;  중앙에배치됨

상속값 margin: inherit; 부모요소에서 상속

축소 상하단에만적용


CSS 패딩(padding)

컨텐츠에 공간 생성


CSS 높이,너비

height, width

max-width: 최대너비


CSS 박스모델

margin>border>padding>content


CSS 텍스트(text)

text-align 수평정렬 속성(center, left, right)

justify 속성 - 각 라인이 동일한 폭을 가짐

text-decoration:none 텍스트의 장식 제거 주로 하이퍼링크 밑줄제거로 사용

text-transform 대문자,소문자 지정 uppercase, lowercase, capitalize

text-indent: 10px 들여쓰기

letter-spacing:3px; 문자 사이의 간격 음수가능

word-spacing: 단어 사이의 간격

line-height: 줄 사이의 공간

direction: rtl; 텍스트 방향 변경


CSS 글꼴(font)

font-family: 글꼴 조합

font-style: normal일반, italic이탤릭체, oblique기울임

font-size 절대크기10px, 상대크기100% 1em=16px

font-weight: normal, lighter, bold, 900등으로 설정

font-variant: normal, small-caps(작은 대문자)

약식: font: style variant weight size/height family


CSS 링크(link)

색상 설정

a:link 방문하지않은 링크 

a:visited 방문한 링크

a:hover 마우스오버

a:active 클릭


CSS 목록(list)

list-style-type: circle, square, upper-roman, lower-alpha

list-style-position: inside, outside 마커가 내부,외부에 표시

list-style-image: url('~~') 목록 마커 이미지

약식 list-style: type position image


CSS 테이블(table)

table을 border-collapse:collapse을 사용해 테두리를 한줄로 축소, seperate 분리

width height 특성으로 너비,높이 설정

text-align:left 수평정렬

vertical-align:bottom 수직정렬

caption-side:bottom 캡션을 테이블에 추가

empty-cells: hide 빈 캡션 숨기기

-webkit-filter: ~,filter: ~ 화상 조절


CSS 레이아웃(layout)

'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (5) 2019.10.31
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12

CSS 변수(variables)

SASS로는 변수를 사용해 본 적이 있는데,

CSS에서는 직접적으로 사용해 본 기억이 없어서 찾아보고 포스팅 해보려 함

사용법

자바스크립트에서는 변수를 선언할 때 ES5는 var, ES6는 let, const를 사용하는데

CSS 변수를 자바스크립트와 비교해보면 const와 비슷한 역할을 한다고 보면 된다.

굳이 한번 정한 변수의 값을 바꿀 일이 없기 때문.

예시를 통해 이해해보면,

페이지 전역에서 가져다 쓸 수 있는 #FFC600이란 색상값을 base 라는 이름으로 변수화 하고 싶다면 아래와 같이 작성하면 된다.

:root {
    --base: #FFC600;
}

:root는 HTML 요소 중 가장 상위 요소에 적용한다는 뜻이고,

--base는 base라는 CSS 변수를 생성한다는 뜻이다.

위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻이다.

선언한 CSS 변수를 호출하기 위해서는 다음과 같이 쓴다

.h1 {
    color: var(--base);
}

위와같이 선언한 변수를 가져올때는 var(--변수명)로 호출하면 된다.

끝으로

요즘은 CSS를 그냥 쓰는 경우보다는,

SASS와 같은 CSS 전처리기를 사용해 보다 효율적으로 코드를 작성 할 수 있다.

조만간 포스팅 하지 않을까.. 싶다

오늘은 공부도 많이 못해서 너무 급하게 포스팅한 티가 팍팍난다.

내일은 열심히 해야게땅

5/159


'개발 > CSS' 카테고리의 다른 글

CSS 중앙정렬 가이드  (5) 2019.10.31
CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12

CSS position

각 요소의 배치 방법

CSS에서 까다로운 부분중 하나이며 매우 중요!

position: static(기본값)

기본적인 요소의 배치순서에 따라 배치

top, bottom, left, right 를 사용 할 경우 무시

position: relative(상대위치)

기본 위치(static 기준)으로

top, bottom, left, right 를 사용해 이동

position: fixed(고정위치)

부모 요소에 관계없이 브라우저 표시영역을 기준으로

top, bottom, left, right 를 사용해 이동

스크롤을 이동해도 항상 같은 위치에 고정

보통 상단에 고정된 네비바나,

쇼핑몰같은 세로로 긴 페이지시 우측하단에 고정된 최상단 이동 버튼을 만들 때 사용한다.

position: absolute(절대위치)

가장 가까이 있는 부모 요소(static 제외)를 기준으로 top, bottom, left, right 만큼 이동한다.

즉 relative, absolute, fixed 속성이 선언되어 있는 부모 요소를 기준으로 위치가 결정된다.

만일 부모 요소가 static인 경우, body를 기준으로 하여 좌표 속성대로 위치하게 된다.

끝으로

활용할 수 있는 곳은 일반적으로 박스 위에 다른 박스를 위치시키고 싶을 때,

부모 요소에 relative, 자식 요소에 absolute를 주고 left, top으로 이동시키면 된다.

마찬가지로 직접 해보면서 익히는것이 가장 좋다.

4/159

'개발 > CSS' 카테고리의 다른 글

CSS 정리  (0) 2018.04.20
CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09

+ Recent posts