[JS] TIL 8. CSS & Selector

in PROGRAMING STUDY on Javascript


  1. CSS를 HTML에 적용하는 방법에 대해서 충분히 이해하고 있다.

    1.1 inline, HTML 외부, HTML 내부

  2. 함수가 선언되어 변수에 담기는 과정을 설명할 수 있어야 한다.

    2.1 # 및 . 쓰는 법

    2.2 부모 자식 관계

    2.3 클래스 동시에 적용하는 법, 여러 클래스 적용하는 법

    2.4 input type을 설정하여 다양한 종류의 input을 활용할 수 있다.

  3. 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.

    3.1 box model

    3.1.1 margin, padding, border

    3.1.3 width, height, top, left, bottom, right

    3.2 position

    3.2.1 static, relative, fixed, absolute, sticky

    3.3 z-index, float, flexbox, grid (advanced)

  4. w3school 등의 reference 사이트를 이용해 CSS 속성을 검색하고 이용할 수 있다.

  5. 함element에 class를 사용해야 할 때와 id를 사용해야 할 때를 구분할 수 있다.


Codestates의 소프트웨어 엔지니어링 강의를 듣고 정리한 필기입니다. 😀


1. CSS & SELECTOR

CSS는 Cascading Style Sheets의 약자이며, HTML로 잘 짜놓은 구조에 디자인을 부여하기 위한 도구이다. HTML에서 id와 class를 적절하게 부여했다면, CSS를 적재적소에 부여할 수 있다.

HTML은 로고, 검색창, 버튼, 그 외의 기능 등과 같이 웹 페이지의 요소들을 구성하는 역할을 한다면, CSS는 그것들의 위치, 너비, 버튼 크기, 색 등을 구성한다. 또한, HTML tag에 id와 class를 잘 지어뒀다면 tag를 고치기 위해 똑같은 코드를 반복할 필요 없다.


2. CSS를 HTML에 적용하는 세가지 방법

2.1 INLINE

이 방법은 HTML의 특정 태그에 직접 style을 적용하는 것이다.

<h1 style="color: red; font-style: italic">Hello world</h1>

h1태그에 style이라는 속성을 부여 적용한다. 위 코드를 예로 들어보면 색은 빨강, 폰트 스타일은 기울임 꼴임을 명시하고 있다.

2.2 HTML 내부에 STYLESHEET 작성

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
    <style>
      h1 {  /* 스타일은 h1 태그인 Hello world에만 적용된다. */
        color: red;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>Hello world</h1> 
    <div>Contents here
      <span>Here too!<span>
    </div>
  </body>
</html>

<style> 태그를 이용하는 방법으로 보통 <head> 태그 안에 삽입하는 것이다. 보통 태그를 선택하는 규칙(Selector)에 따라 일괄적으로 적용된다.

2.3 HTML 외부에 STYLESHEET 작성

title

이 방법은 HTML 파일과 CSS 파일을 따로 작성하여 <link>태그를 이용해 적용하는 방법이다.

  • index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="indexStyle.css" />
  </head>
  <body>
    <h1>Hello world</h1>
    <div> hi </div>
  </body>
</html>
  • index.html에 적용된 indexStyle.css
h1 { color: red }


3. CSS SELECTOR

css에서 요소(element)를 선택하는 규칙이다.

  • index.html
<div id = 'writing-section'>
    <div> 댓글 9 </div>
    <input id = 'new-comment' type = "text" placeholder = "댓글을 입력해주세요">
    <button id = 'register'> 등록 </button>
</div>

<ul id = 'comments'>
    <li class = 'comment'>
        <div class = 'username'> ouo00**** </div>
        <div class = 'content'> 
            시각장애인들을 위한 지원이 반갑네요 앞으로도 이런 지원이 많았으면 좋겠어요!
        </div>
        <sapn class = 'createAt'> 2018-03-22 23:29:22 </sapn>
        <button>
            <img class = 'voteUp' src = 'thumbup.png'> 0
        </button>
        <button>
            <img class = 'voteDown' src = 'thumbdown.png'> 0
        </button>
    </li>
    <li class = 'comment'>
        <div class = 'username'> cake**** </div>
        <div class = 'content'> 
            앞으로도 시각 장애인들이 일상생활에서 별다른 문제 없이 살아갈 수 있도록 많은 배려를 해주길 바랍니다. 
            </div>
        <sapn  class = 'createAt'> 2017-04-06 18:21:58 </sapn>
        <button>
            <img class = 'voteUp' src = 'thumbup.png'> 0
        </button>
        <button>
            <img class = 'voteDown' src = 'thumbdown.png'> 1
        </button>
    </li>
</ul>
  • index.html에 적용된 indexStyle.css
#new-comment {color:blue;}
.createAt {color : gray;}

위 코드를 살펴보면 new-comment라는 id에는 blue를, creatAt이라는 class에는 gray를 입혀주었다. 즉, 특정 아이디에 스타일을 부여하고 싶으면 #을 이용해 지정해주면 되고, 특정 class에 스타일을 부여하고 싶으면 .(Dot)을 이용해 지정해주면 된다.

#new-comment {color:blue;}
.createAt {color : gray; font-weight: bold; }

스타일을 여러 개를 지정하고 싶으면, 공백을 이용하면 된다.


© 2020. by RIVER

Powered by RIVER