웹 페이지에 중복돼 있는 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

CSS의 사용 방법

1. 어디서부터 어디까지가 CSS인지는 <style>태그가 알려준다.

 

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

 

여기서 a는 선택자(Selector),

color:red; 등의 코드는 선언,효과(Declaration)

color 는 속성(Property),

red 는 값(Value)를 의미한다.

 

 

2. 또 다른 방법은 태그를 통하는 것이 아니라 속성을 이용하는 방법이다.

 

...생략...
<li><a href="2.html" style="color:red; text-decoration:underline;">CSS</a></li>
...생략...

 

+) text-decoration 속성은 현재 선택된 웹 페이지 링크에 밑줄을 그을 것인지 아닌지 결정하는 기능이다.

 

요약 : 웹페이지에 CSS를 삽입하는 방법으로는 <style>태그 이용, style 속성 이용 이렇게 두 가지가 있고,

하나의 선택자에 대해 여러 개의 효과를 지정할 수 있는데 그 경우에는 세미콜론으로 구분한다.

'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

HTML을 이용하면 전자문서를 만들 수 있다.

즉, 컴퓨터를 통해 정보를 표현할 수 있게 된 것이다.

 

우리의 욕망은 커져

웹 페이지를 좀 더 아름다우면서 보기 좋은 형태로 만들기 위해

CSS를 사용하게 된다.

 

CSS를 사용할 시, 유지보수를 편리하게 할 수 있으며 웹 페이지의 가독성도 높아진다.

디자인과 관련된 코드는 모두 <style>태그 안에 갇혀 있어 디자인과 관련된 것이 필요없다면 

이 부분을 무시하고 봐도 된다.

 

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

티스토리툴바