여기서 학습이란 훈련 데이터로부터 가중치 매개변수의 최적값을 자동으로 획득하는 것을 뜻한다.

 

데이터 주도 학습

기계학습의 중심에는 데이터가 존재한다. 

기계학습에서는 사람의 개입을 최소화하고 수집한 데이터로부터 패턴을 찾으려 시도한다.

그런 방법의 하나로, 이미지에서 특징(feature)을 추출하고 그 특징의 패턴을 기계학습 기술로 학습 하는 방법이 있다.

여기서 말하는 특징은 입력 데이터(입력 이미지)에서 본질적인 데이터(중요한 데이터)를 

정확하게 추출할 수 있도록 설계된 변환기를 가리킨다.

이미지의 특징은 보통 벡터로 기술하고, 컴퓨터 비전 분야에서는 SIFT, SURF, HOG 등의 특징을 많이 사용한다.

 

이와 같은 기계학습에서는 모아진 데이터로부터 규칙을 찾아내는 역할을 '기계'가 담당한다.

다만, 이미지를 벡터로 변환할 때 사용하는 특징은 여전히 '사람'이 설계한다.

 

딥러닝을 종단간 기계학습(end-to-end machine learning)이라고도 한다. 

데이터(입력)에서 목표한 결과(출력)를 사람의 개입 없이 얻는다는 뜻을 담는다.

 

 

훈련 데이터와 시험 데이터

기계학습 문제는 데이터를 훈련 데이터시험 데이터로 나눠 학습과 실험을 수행하는 것이 일반적이다.

우선 훈련 데이터만으로 학습하며 최적의 매개변수를 찾는다.

그런 다음 시험 데이터를 사용하여 앞서 훈련한 모델의 실력을 평가한다.

 

범용 능력은 아직 보지 못한 데이터(훈련 데이터에 포함되지 않는 데이터)로도 문제를 올바르게 풀어내는 능력이다.

이 능력을 획득하는 것이 기계학습의 최종 목표다.

 

데이터셋 하나로만 매개변수의 학습과 평가를 수행하면 올바른 평가가 될 수 없다.

(예: 한 사람의 글씨체만 학습하는 경우) 

한 데이터셋에만 지나치게 최적화된 상태를 오버피팅overfitting 이라고 한다.

오버피팅을 피하는 것도 기계학습의 중요한 과제다.

 

 

손실 함수

신경망 학습에서는 현재의 상태를 '하나의 지표'로 표현한다.

그리고 그 지표를 가장 좋게 만들어주는 가중치 매개변수의 값을 탐색한다.

신경망 학습에서 사용하는 지표는 손실 함수 loss function 라고 한다.

이 손실 함수는 임의의 함수를 사용할 수도 있지만 

일반적으로는 오차제곱합교차 엔트로피 오차를 사용한다.

 

 

오차제곱합

가장 많이 쓰이는 손실 함수는 오차제곱합 sum of squares for error, SSE 이다.

(yk는 신경망의 출력(신경망이 추정한 값), tk는 정답 레이블, k는 데이터의 차원 수)

 

>>> y = [0.1, 0.05, 0.6, 0.0, 0.05, 0.1, 0.0, 0.1, 0.0, 0.0]
>>> t = [0, 0, 1, 0, 0, 0, 0, 0, 0, 0]

y는 소프트맥스 함수의 출력이다. 소프트맥수 함수의 출력은 확률로 해석할 수 있다.

이 예에서는 이미지가 2일 확률이 확률이 가장 높다고 해석할 수 있다.

t에서 나타낸 것처럼 한 원소만 1로 하고 그 외에는 0으로 나타내는 표기법을 원-핫 인코딩이라 한다.

 

import numpy as np

t = [0, 0, 1, 0, 0, 0, 0, 0, 0, 0] # 정답은 2
y = [0.1, 0.05, 0.6, 0.0, 0.05, 0.1, 0.0, 0.1, 0.0, 0.0] # '2'의 확률이 가장 높다고 추정함

def sum_squares_error(y,t):
    return 0.5 * np.sum((y-t)**2)

>>> sum_squares_error(np.array(y),np.array(t))
0.097500000000000031

한편, t는 그대로 두고 y가 '5'일 확률이 가장 높다고 추정한다면

>>> y= [0.1, 0.05, 0.05, 0.0, 0.6, 0.1, 0.0, 0.1, 0.0, 0.0] # '5'일 확률이 가장 높다고 추정함
>>> sum_squares_error(np.array(y),np.array(t))
0.6475

첫 번째 예의 손실 함수 쪽 출력이 작으며 정답 레이블과의 오차도 작다는 것을 알 수 있다.

즉, 오차제곱합 기준으로는 첫 번째 추정 결과가(오차가 더 작으니) 정답에 더 가까울 것으로 판단할 수 있다.

 

 

교차 엔트로피 오차

또 다른 손실 함수로서 교차 엔트로피 오차 cross entropy error, CEE 도 자주 이용한다.

 

(log는 밑이 e인 자연로그, yk는 신경망의 출력, tk는 정답 레이블)

실질적으로 정답일 때의 추정(tk가 1일 떄의 yk)의 자연로그를 계산하는 식이다.

자연로그 y=logx 의 그래프

정답에 해당하는 출력이 커질수록 0에 다가가다가, 그 출력이 1일 때 0이 된다.

반대로 정답일 때의 출력이 작아질수록 오차는 커진다.

 

def cross_entropy_error(y,t):
    delta = 1e-7
    return -np.sum(t*np.log(y+delta))

 

여기서 np.log를 계산할 때 아주 작은 값인 delta를 더했다. 이는 np.log()함수에 0을 입력하면 마이너스 무한대를 나타내는 -inf가 되어 더 이상 계산을 진행할 수 없게 되기 때문이다.

즉, 마이너스 무한대가 발생하지 않도록 한 것이다.

 

>>> cross_entropy_error(np.array(y),np.array(t)) # 정답
0.510825457099338
>>> cross_entropy_error(np.array(y),np.array(t)) # 정답 X
2.9957302735559908

위 코드(오차제곱합)의 예시와 똑같이 적용한 결과이다. 

결과(오차 값)가 더 작은 첫 번째 추정이 정답일 가능성이 높다고 판단한 것으로, 앞서 오차제곱합의 판단과 일치하다.

 

미니배치 학습

딥러닝은 훈련 데이터를 이용해 학습하면서, 훈련 데이터에 대한 손실함수의 값을 구하고 그 값을 최소로하는 매개변수(가중치, 편향)를 찾아내는 것이다. 이를 위해서는 모든 훈련 데이터를 대상으로 손실함수 값을 구해야 한다. 보통 딥러닝은 미니배치(Mini-batch) 학습을 하기때문에 미니배치 크기만큼의 데이터에 대한 각각의 손실함수를 구해 평균을 내어 '평균 손실 함수'를 계산한다.

(N은 미니배치 크기,  tnk는 n번째 데이터의 k차원째의 값)

이는 데이터 하나에 대한 손실 함수를 단순히 N개의 데이터로 확장한 것이고, 마지막에 N으로 나누어 정규화하고 있다.

N으로 나눔으로써 '평균 손실 함수'를 구하는 것이다.

 

빅데이터 수준이 되면 훈련 데이터가 수천만개도 넘는 거대한 값이 된다. 

이런 경우 데이터 일부를 추려 전체의 '근사치'로 이용할 수 있다. 

신경망 학습에서도 훈련 데이터로부터 일부만 골라 학습을 수행한다. 이 일부를 미니배치라고 한다. 

 

미니배치 학습을 하는 코드를 구현해보자.

 

import sys, os
sys.path.append(os.pardir)  # 부모 디렉터리의 파일을 가져올 수 있도록 설정
import numpy as np
import matplotlib.pyplot as plt
from dataset.mnist import load_mnist
from two_layer_net import TwoLayerNet

# 데이터 읽기
(x_train, t_train), (x_test, t_test) = load_mnist(normalize=True, one_hot_label=True)

print(x_train.shape) #(60000,784)
print(t_train.shape) #(600000,10)

(load_mnist는 MNIST 데이터셋을 읽어오는 함수. 이 함수는 훈련 데이터와 시험 데이터를 읽음.

호출할 때 원-핫 인코딩으로 호출)

 

MNIST 데이터를 읽은 결과, 훈련 데이터는 60,000개고, 입력 데이터는 784(28x28)열인 이미지 데이터임을 알 수 있다.

또, 정답 레이블은 10줄짜리 데이터이다.

 

train_size = x_train.shape[0]
batch_size = 10
batch_mask = np.random.choice(train_size,batch_size)
x_batch = x_train[batch_mask]
t_batch = t_train[batch_mask]

 

np.random.choice() 로는 지정한 범위의 수 중에서 무작위로 원하는 개수만 꺼낼 수 있다.

이 함수가 출력한 배열을 미니배치로 뽑아낼 데이터의 인덱스로 사용하면 된다.

 

 

(배치용) 교차 엔트로피 오차 구현하기

def cross_entropy_error(y,t):
    if y.ndim == 1:
        t = t.reshape(1, t.size)
        y = y.reshape(1, y.size)
        
    batch_size = y.shape[0]
    return -np.sum(t*np.log(y + 1e-7)) / batch_size

 

(y는 신경망의 출력, t는 정답 레이블)

y가 1차원이라면,  즉 데이터 하나당 교차 엔트로피 오차를 구하는 경우는 reshape 함수로 데이터의 형상을 바꾼다.

그리고 배치의 크기로 나눠 정규화하고 이미지 1장당 평균의 교차 엔트로피 오차를 계산한다.

 

정답 레이블이 원-핫 인코딩이 아니라 '2'나 '6' 등의 숫자 레이블로 주어졌을 때의 교차 엔트로피 오차는 다음과 같이 구현한다.

def cross_entropy_error(y,t):
    if y.ndim == 1:
        t = t.reshape(1, t.size)
        y = y.reshape(1, y.size)
        
    batch_size = y.shape[0]
    return -np.sum(np.log(y[np.arange(batch_size),t] + 1e-7)) / batch_size

 

 

왜 손실 함수를 설정할까?

이 의문은 신경망 학습에서의 '미분'의 역할에 주목하면 해결된다. 

신경망 학습에서는 최적의 매개변수(가중치와 편향)를 탐색할 때 손실 함수의 값을 가능한 한 작게 하는 매개변수 값을 찾는다.

이때 매개변수의 미분(기울기)을 계산하고, 그 미분 값을 단서로 매개변수의 값을 서서히 갱신하는 과정을 반복한다. 

미분 값이 양수나 음수면 매개변수를 변화시켜 손실 함수의 값을 줄일 수 있다.

그러나 미분 값이 0이면, 가중치 매개변수를 어느 쪽으로 움직여도 손실 함수의 값은 줄어들지 않는다.

그래서 가중치 매개변수의 갱신은 거기서 멈춘다.

 

정확도를 지표로 삼아서는 안되는 이유는 미분 값이 대부분의 장소에서 0이 되어 매개변수를 갱신할 수 없기 때문이다.

 

한 신경망이 100장 중 42장을 올바로 인식한다고 하면 정확도는 42%다. 매개변수를 약간만 조정해서는 정확도가 개선되지 않고 일정하게 유지된다. 그러나, 손실 함수를 지표로 삼을 때는 매개변수 값이 조금 변하면 그에 반응하여 손실 함수의 값도 연속적으로 변화한다. 

 

 

위 글은 「밑바닥부터 시작하는 딥러닝」을 참고하여 작성한 글입니다.

'Study > Deep Learning' 카테고리의 다른 글

머신러닝 Data 종류  (0) 2021.10.14
머신러닝 기본 프로세스  (0) 2021.10.14
딥러닝의 응용분야  (0) 2021.10.13
머신러닝/딥러닝 기초  (0) 2021.10.13
수치 미분  (0) 2020.11.06

경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황들이 있는데,

이런 경우에 콘솔(console)을 사용한다.

이 콘솔을 계산기로 쓸 수도 있고, 자바스크립트 코드를 즉석에서 실행할 수 있다.

 

콘솔을 통해 자바스크립트 코드를 실행하면 현재 열려있는 웹 페이지를 대상으로 자바스크립트 코드가 실행된다.

 

 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > JavaScript' 카테고리의 다른 글

Open API 활용  (0) 2021.05.02
라이브러리 & 프레임워크  (0) 2021.01.27
웹 브라우저 제어  (0) 2020.11.08
이벤트  (0) 2020.11.05
JavaScript 시작, <script> 태그  (0) 2020.11.05

이벤트자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다.

 

...생략...
  <body>
    <input type="button" value="hi" onclick="alert('hi')">
  </body>
...생략...

 

<input> 태그에 onclick이라는 속성을 썼는데, 이 속성은 아주 특별한 속성이다. 

HTML 설명서에는 "onclick 속성 값으로는 반드시 자바스크립트 코드가 와야 합니다"라고 적혀있다. 

다음으로, "onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을 때 자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹 브라우저가 실행할 것입니다."라고 적혀있다.

 

그래서 'hi' 버튼을 클릭했을 때 alert('hi')라는 코드가 실행되는 것을 알 수 있다. 

이처럼 웹 브라우저 위에서 일어나는 일들을 사건, 영어로는 이벤트(event)라고 한다. 

 

...생략...
  <body>
    <input type="button" value="hi" onclick="alert('hi')">
    <input type="text" onchange="alert('changed')" />
    <input type="text" onkeydown="alert('keydown')" />
  </body>
...생략...

 

여러 이벤트를 사용한 결과다.

내용이 변했을 때를 체크하는 이벤트는 onchange이다.

키보드의 키를 누르는 것을 감지하는 이벤트는 onkeydown이다.

 

사용자가 어떤 키를 눌렀을 때 이벤트가 발생하도록 만들고 싶다면 

예) 'javascript keydown event attribute'로 검색하는 것을 추천한다.

 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > JavaScript' 카테고리의 다른 글

Open API 활용  (0) 2021.05.02
라이브러리 & 프레임워크  (0) 2021.01.27
웹 브라우저 제어  (0) 2020.11.08
콘솔  (0) 2020.11.05
JavaScript 시작, <script> 태그  (0) 2020.11.05

HTML 정적이다. 한번 화면에 출력되면 언제나 그 모습 그대로이다.

반대로 우리가 알고 있는 데스크톱이나 모바일에서 사용되는 여러 프로그램, 예를 들면 게임 같은 경우 사용자의 조작에 반응해서 프로그램이 움직인다.

사람들은 웹 페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했고, 

그래서 태어난 기술이 자바스크립트(JavaSxript)이다. 

 

자바스크립트는 HTML 위에서 동작하는 언어다.

자바스크립트 코드를 넣을 때는 우선 웹 브라우저에게 지금부터 HTML에 자바스크립트 코드가 시작된다는 사실을 알려야 한다. 그때 사용하는 태그가 <script>이다.

 

...생략...
  <body>
    <h1>JavaScript</h1>
    <script>
      document.write('hello world');
    </script>
  </body>
...생략...

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

 

'WEB > JavaScript' 카테고리의 다른 글

Open API 활용  (0) 2021.05.02
라이브러리 & 프레임워크  (0) 2021.01.27
웹 브라우저 제어  (0) 2020.11.08
콘솔  (0) 2020.11.05
이벤트  (0) 2020.11.05

...생략...

자신을 잃어버린 느낌이 들거나

자신이 해야 될 일을 찾고 싶거나

아니면 꼭 이루고 싶은 일이 있다면

 

철저히 혼자가 되어

집중 할 수 있는 시간을 가져보길 추천한다.

 

물론 불안하고 때론 고독하기도 하겠지만

불안하고 고독하면 안 된다고 생각하면서

혼자 있는 시간을 불안한 채로 다 써버리지 않고

잘 보내게 된다면

혼자 있는 시간은 당신에게 

많은 선물을 줄 거라 믿는다.

 

당신의 삶에서 

당신이 더 원하는 게 무엇인지 알게 해주고 

당신에게 더 필요한 것이 무엇인지 알게 해주며

그 길로 당신을 데려다 줄 수 있을 것이다.

 

부자는 돈 보다 시간을 더 소중히 여긴다고 한다.

당신이 젊다면 당신은 앞으로 시간이 아주 많다.

 

그 많은 시간을 어떻게 보내는지는

당신이 과거에 어떤 후회되는 일이 있었는지를 

생각하는 것보다

어떤 일에 대해 잘 할 수 없을 까봐를 계속 걱정하는 것 보다

혼자 있어 공허하고 외롭다는 생각만 반복하는 것보다

훨씬 중요하다.

 

또 무언가에 지쳤다면 맞서지 말고

혼자가 되어 보길 추천한다.

오래 혼자 될 수 없다면 잠시라도.

 

그럼 보이지 않았던 것들과

앞으로 어떻게 나아가면 좋을지가 더 명확히 보이게 된다.

 

「지쳤거나 좋아하는게 없거나」 中

'Think' 카테고리의 다른 글

마음과 말  (0) 2021.07.10
여행의 필요성  (0) 2021.01.31
신호등  (0) 2021.01.22

웹 페이지에 중복돼 있는 CSS코드에서 <style>태그를 제외한 순수한 CSS코드만 복사해서 style.css에 넣는다.

그리고 <style> 태그의 내용을 다 지우고 웹 브라우저에게 이렇게 얘기한다. 

↓style.css

  body{
    margin:0;
  }
  a{
    color:black;
    text-decoration: none;
  }
  h1{
    font-size: 45px;
    text-align: center;
    border-bottom: 1px solid gray;
    margin: 0px;
    padding: 20px;
  }
  #grid{
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol{
    border-right: 1px solid gray;
    width: 100px;
    margin: 0;
    padding: 20px;
  }
  #article{
    padding-left: 25px;
  }
  @media ( max-width: 800px;) {
    #grid{
      display: block;
    }
    #grid ol{
      border-right: none;
    }
    h1{
      border-bottom: none;
    }
  }

 

"웹 브라우저야, 마우스 커서에 있는 위치에는 style.css라는 별도의 파일에 저장된 CSS코드를 내려받아서 원래 그 코드가 있었던 것처럼 동작해"

 

이런 역할을 하는게 <link>태그 이다.

 

...생략...
  <head>
    <title>WEB1-CSS</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css"/>
  </head>
...생략...

 

이 웹페이지는 style.css라는 파일과 연결돼 있고, 웹 브라우저는 style.css 파일을 내려받아 이 웹 페이지에 적용한다.

이렇게 link 링크로 걸어주면 내부적으로 훨씬 더 효율적인 상태가 된다. 

재사용성도 높아지고 사용성도 높아진다.

 

캐싱(cache)이라는 것은 저장한다는 뜻인데, 

우리가 한번 style.css 파일을 다운로드했다면 이 style.css의 내용이 바뀌기 전까지는 

style.css 파일을 웹 브라우저가 우리의 컴퓨터에 저장해뒀다가

다음에 style.css 파일을 요청하면 저장된 결과를 가져와

속도를 높일 수 있고, 사업자들은 돈을 덜 쓸 수 있는 굉장히 중요한 효과를 얻게 된다.

 

따라서 가급적 CSS 파일을 별도로 만들어 중복을 제거하는 것을 추천한다.

 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > CSS' 카테고리의 다른 글

미디어 쿼리  (0) 2020.11.04
그리드(grid)  (0) 2020.11.04
박스 모델  (0) 2020.11.04
CSS 속성, 선택자  (0) 2020.11.04
CSS의 기본 문법  (0) 2020.11.04

현대적인 웹 어플리케이션을 만들 때 굉장히 중요한 요소라 할 수 있는 반응형 디자인의 흐름을 알아보자.

 

화면이 작아짐에 따라 선이 없어지고 위치가 달라진다.

그리고 화면이 일정한 크기가 되면 선이 생기고 화면이 바뀐다.

 

즉, 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것반응형 웹, 반응형 웹 디자인, 영어로는 'responsive web'이라고 한다. 

 

반응형 디자인을 순수한 웹 기술인 CSS를 통해 구현하는 핵심적인 개념이 미디어 쿼리이다.

 

 

...생략...
    <style>
      ...생략...
      @media(min-width:800px){
        div{
          display: none;
        }
      }
      ...생략...
    </style>
...생략...

 

화면의 너비가 800px보다 크다면 <div>태그에 display:none;을 설정하는 코드이다.

화면의 크기가 800px가 넘는 순간 <div>의 내용이 사라진다. 

min대신 max를 넣으면 화면의 크기가 800px보다 작으면 <div>가 사라지는 결과를 보여준다.

 

즉, 미디어 쿼리를 활용하면 화면 크기에 따라, 스마트폰의 가로 모드/세로 모드에 따라,

또 여러가지 화면의 특성에 따라 특정 조건을 만족할 때만 미디어 쿼리의 코드를 동작시키는 것이 가능하다.

이를 미디어 쿼리라 부르며 이 미디어 쿼리는 여러 가지 형태의 화면이 존재하는 이 세상에서 굉장히 중요한 존재이다.

 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > CSS' 카테고리의 다른 글

CSS 코드의 재사용  (0) 2020.11.04
그리드(grid)  (0) 2020.11.04
박스 모델  (0) 2020.11.04
CSS 속성, 선택자  (0) 2020.11.04
CSS의 기본 문법  (0) 2020.11.04
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  NAVIGATION ARTICLE
  </body>
</html>

 

NAVIGATION 과 ARTICLE이라는 두 개의 단어에 테두리를 주고 나란히 배치해 보겠다.

그러기 위해선 각 단어를 태그로 묶어야 한다. 

이때 디자인이란 목적을 위해 어떤 의미도 없는 <div>태그를 사용한다. (division)

...생략...
  <body>
    <div>NAVIGATION</div> 
    <div>ARTICLE</div>
  </body>
  ...생략...

 

<div>태그는 기본적으로 블록 레벨 엘리먼트이기 때문에 화면 전체를 쓰므로 줄바꿈이 된다. 

<div>와 똑같은 목적으로 고안된 태그가 있는데, 바로 <span>태그다. 

<span>태그는 인라인 엘리먼트이다. 따라서 목적에 따라 <div>와 <span>태그를 사용하면 되겠다.

 

...생략...
    <style>
      #grid{
        border: 5px solid pink;
        display: grid;
        grid-template-columns: 150px 1fr;
      }
      div{
        border: 5px solid gray;
      }
    </style>
  </head>
  <body>
    <div id="grid">
      <div>NAVIGATION</div>
      <div>ARTICLE</div>
    </div>
  </body>
...생략...

 

그리드를 적용한 예시이다. 

1. 부피감을 확인하기 위해 <div>태그에 테두리를 지정했다.

2. 두 개의 <div>태그를 감싸는 부모 <div>태그를 추가했다.

3. 부모 태그의 id값을 설정하고, 테두리를 분홍색으로 변경했다.

   (두 개의 태그를 나란히 배치하고 싶으면 그것을 감싸는 부모 태그가 필요하다. 

   즉, 디자인 목적 만으로 <div id="grid">가 필요한 것이다.)

4. display는 속성값으로 block, inline, none을 지정해 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성이다.

   display 속성에 'grid'라는 속성을 쓰면 아무 변화가 없다. 

   하지만, grid-template-columns 속성을 추가한 다음 첫 번째 칼럼은 150px 정도의 부피를 갖고, 

   두 번째 칼럼은 나머지 공간을 다 쓴다는 의미로 1fr을 지정했다. 

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > CSS' 카테고리의 다른 글

CSS 코드의 재사용  (0) 2020.11.04
미디어 쿼리  (0) 2020.11.04
박스 모델  (0) 2020.11.04
CSS 속성, 선택자  (0) 2020.11.04
CSS의 기본 문법  (0) 2020.11.04
...생략...
    <style>
      h1, a {
        border: 5px solid red;
      }
    </style>
...생략...

 

<h1>태그와 <a>태그의 테두리를 그리면 이것들의 부피감을 알 수 있게 된다.

 

HTML에 있는 여러 태그들은 태그의 성격과 일반적인 쓰임에 따라 화면 전체를 쓰는 것이 편한 것과 자신의 크기만큼의 부피를 갖는 게 편한 것이 있기 때문에 화면 전체를 쓰는 태그가 있고, 자기 크기만큼 쓰는 태그들이 있다.

그래서 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트(block level element)라고 하고, 자기 자신의 콘텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트(inline element)라고 한다. 

용어는 중요하지 않으나 어떤 태그들이 얼마나 부피를 사용하는지만 알고 있으면 된다.

 

display: inine;
display: block;

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
      }
    </style>
...생략...

 

콘텐츠와 테두리 사이에 padding 을 통해 여백을 추가해보자 

 

 

    <h1>CSS</h1>
    <h1>CSS</h1>

이때, 새로운 <h1>태그를 추가할 시,

테두리와 테두리 사이의 간격이 생기는데, 이 간격은 margin 때문이다.

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
        margin: 0;
      }
    </style>
...생략...

 

이렇게 margin을 0으로 설정할 시, 두 테두리 사이의 간격이 없어진다.

지금 사용하고 있는 <h1>태그는 박스 모델상 display:block; 이 생략돼 있는 상태이며 화면 전체를 쓰고 있다.

 

...생략...
    <style>
      h1, a {
        border: 5px solid red;
        padding: 20px;
        margin: 0;
        width: 100px;
      }
    </style>
...생략...

 

이를 바꾸기 위해 width 값으로 100px를 지정하면 100px만큼 태그의 크기가 변경된다.

 

박스 모델이 헷갈린다면 

예) 'css box model'이라고 검색하는 것을 추천한다.

 

css box model


HTML의 태그들은 그 태그의 기본적인 성격에 따라 화면 전체를 쓰기도 하고 자기 크기만큼을 쓰기도 한다. 

화면 전체를 쓰는 것을 블록 레벨 엘리먼트, 자기 자신의 크기만 갖는 것을 인라인 엘리먼트라 한다.

그리고 콘텐츠의 크기를 지정할 때 폭은 width, 높이는 height로 지정하는 것과

콘텐츠와 테두리 사이의 간격 padding, 테두리와 테두리 사이의 간격을 지정할 때는 margin 속성을 이용한다.

 

즉, 박스 모델은 HTML 태그 하나하나를 일종의 박스로 취급해서 부피감을 결정하는 것이고, 

부피감을 결정한다는 것은 디자인에서 핵심적인 요소인 것이다. 

 

박스 모델을 활용한 예시를 보자.

...생략...
  h1{
        font-size: 45px;
        text-align: center;
        border-bottom: 1px solid gray;
        margin: 0px;
        padding: 20px;
      }
      ol{
        border-right: 1px solid gray;
        width: 100px;
        margin: 0;
        padding: 20px;
      }
      body{
        margin:0;
      }
...생략...

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > CSS' 카테고리의 다른 글

미디어 쿼리  (0) 2020.11.04
그리드(grid)  (0) 2020.11.04
CSS 속성, 선택자  (0) 2020.11.04
CSS의 기본 문법  (0) 2020.11.04
CSS의 등장 배경  (0) 2020.11.04

CSS에서 어떠한 효과를 의미하는 용어가 속성, 프로퍼티(Property)라는 것을 알았기 때문에 

우리는 이제 스스로 검색할 수 있는 능력을 지니게 되었다.

 

예) 'css text size property'

예) 'css text center property'

 

 

...생략...
h1{
        font-size: 45px;
        text-align: center;
      }
...생략...

 

검색한 것을 활용한 코드


CSS를 지배하는 두 가지 중요한 토대 중 두번째, 선택자에 대해서도 생각해보자.

 

글쓴이는 모든 링크는 기본적으로 검은색이며, 사용자가 방문했던 각 글들의 링크 색은 회색, 현재 페이지의 링크는 빨간색으로 보이도록 하고 싶다.

 

일단 모든 a 태그에 대해서 기본 작업을 해준다.

 

...생략...
<style>
      a{
      	color:black;
        text-decoration: none;
      }
    </style>
...생략...

 

이제 해당하는 태그에 대해 class 라는 HTML 속성을 지정해보자.

속성의 값으로 보았다는 뜻인 'saw'로 지정하겠다.

 

...생략...
	<ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html" class="saw">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
...생략...

 

여기에 있는 class="" HTML이다. 

즉, "saw"라는 class 값을 가지고 있는 태그 2개를 만들었는데, 우리가 하고자 하는 것은 이 웹 페이지 내의 모든 태그 중 "saw"라는 class 값을 갖고 있는 모든 태그에 대해 폰트 색상을 'gray'로 지정하는 것이다.

 

  <style>
...생략...
    .saw{
      color:gray;
    }
...생략...
  </style>

 

saw 앞에 .을 붙이는 순간 이 선택자는 웹 페이지에서 class가 "saw"인 모든 태그를 가리키는 선택자가 된다.

 

다음으로,

현재 머물고 있는 페이지의 링크를 빨간색으로 표시하고 싶다면 다음과 같이 active 클래스를 추가하고 색을 정의해주면 된다.

 

  <style>
...생략...
    .active{
      color:red;
    }
    .saw{
      color:gray;
    }
...생략...
  </style>
</head>
  <body>
    <h1><a href="index.html">WEB</a></h1>
    <ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html" class="saw active">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
...생략...

 

 

이를 통해, class라고 하는 속성의 값은 여러 개의 값이 올 수 있고, 띄어쓰기로 구분한다는 것과 하나의 태그에는 여러 가지 속성이 들어갈 수 있고, 여러 개의 선택자를 통해 하나의 태그를 공동으로 제어할 수 있다는 사실을 알게 되었다.

 

하지만, 이는 좋은 방법이 아니다. 

예시의 <a>태그두 개의 클래스에 영향을 받고 있기 때문이다.

그것은 순서 때문이다.

CSS코드 안에서 .active가 .saw보다 앞에 온다면 CSS글자가 빨간색이 아닌 회색으로 보일 것이다.

 

즉, 태그에 좀 더 가까이 있는 명령더 큰 영향력을 갖는다는 것이다.

그러므로 좀 더 우선순위가 높은 것을 사용할 필요가 있다. 

그것은 ID 선택자이다.

 

...생략...    
    <ol>
      <li><a href="1.html" class="saw">HTML</a></li>
      <li><a href="2.html" class="saw" id="active">CSS</a></li>
      <li><a href="3.html">JavaScript</a></li>
    </ol>
...생략...

 

...생략...
      #active{
        color:red;
      }
      .saw{
        color:gray;
      }
      h1{
        font-size: 45px;
        text-align: center;
      }
...생략...

 

앞에 #을 붙이면 .saw가 #active보다 뒤에 등장했음에도 페이지를 새로고침할 경우 "CSS"의 글자 색이 빨간색이 되는 것을 볼 수 있다. 

 

즉, ID 선택자 > class 선택자 > 태그 선택자 순으로 우선순위를 가진다는 것을 알 수 있다.

그리고 모두 똑같은 형태의 선택자라면 맨 마지막에 등장하는 선택자가 우선순위가 높다.

 

id값은 대한민국의 주민등록번호와 같다. 즉, id 값은 단 한 번만 등장해야 한다. 따라서 우선순위가 가장 높다고 생각해도 좋다.

 

선택자 검색은 

예) 'css selector' 로 해보는 것을 추천한다.

 

위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.

'WEB > CSS' 카테고리의 다른 글

미디어 쿼리  (0) 2020.11.04
그리드(grid)  (0) 2020.11.04
박스 모델  (0) 2020.11.04
CSS의 기본 문법  (0) 2020.11.04
CSS의 등장 배경  (0) 2020.11.04

+ Recent posts