CSS-1

April 7, 2021

CSS-1

~웹은 언어들로 구성되어 있다. 가장 크게 3가지로 나누면, HTML, CSS, JavaScript가 있다.

HTML: 뼈대, CSS: 근육, JavaScript: 뇌

CSS : Cascading Style Sheet, 순서대로 된 스타일 시트이다.
태그를 중복해서 만들었다면 코드의 가장 마지막 부분이 스타일로 적용된다.

외울 필요없다. 모르는 유형이 나오면 Google, MDN을 찾아보자.
Do not memorize !

Add CSS to HTML

HTML에 CSS 스타일 시트를 적용하는 방법이 있는데, 2가지 방법이 있다.

새로운 스타일 시트를 만드는 것
HTML 문서에 스타일 시트를 만드는 것.

<head>
  <title>Home - My first website.</title>
  <!-- first case -->
  <link rel="stylesheet" href="style.css" />

  <!-- second case -->
  <style></style>
</head>

Writing Our First CSS Lines

CSS는 HTML 문서에 있는 태그를 가리키고 중괄호를 이용해서 그 안에 속성을 써준다.

<style>
  h1 {
    color: blue;
    font-style: italic;
    font-size: 20px;
  }
</style>

Blocks and Inlines

Block은 다른 요소가 옆에 오지 못하는 것을 의미하고, Inlines는 다른 요소가 옆에 올 수 있는 것을 의미한다. Block의 예로는 <div>, <blockquote>, <header> … Inline의 예로는 , , 가 있다.

Margin-1

Block을 inline처럼 만들 수 있는 것? display: inline
inline을 block처럼 만들 수 있는 것? display: block
브라우저는 기본적으로 스타일 속성을 준다.
Block : margin, border, padding
Margin은 box의 경계 바깥쪽에 있다. body는 기본적으로 body라는 box의 boder바깥에 8px의 여백을 가지고 있다. (default)

Margin-2

margin: num –> 사방에 margin을 준다.
margin: num1 num2 –> 위 아래에 num1 좌우에 num2만큼의 margin을 준다.
margin: num1 num2 num3 num4 –> 각각 위, 오른, 아래, 왼쪽에 margin을 준다.
위의 그림에서 하얀색 박스(div박스) 와 살구색 박스(body 박스) 가 top경계에서 겹쳐있을 때,
하얀색 박스의 top에 margin을 주면, body 박스까지 전체가 딸려 내려오게된다.
이 현상을 Collapsing Margin 이라고 하며, 서로 분리하기 위해서 Padding이라는 개념이 필요하다.
- Pading and IDs
  - Padding은 경계의 안쪽 공간이다.
    Padding에 margin을 준다면 border부분이 겹치지 않는다.
    다음과 같이 각 태그에 id를 주고 div안에 div를 배치해둬 각 경계의 시작을 다르게 주었다.
    그리고 padding margin을 주면서 서로 다른 box인 것을 보여준다.

<style>
      html {
        background-color: tomato;
      }
      body {
        /* margin: 0px; */
        padding: 10px;
        background-color: wheat;
        /* margin: 0; */
      }
      div {
        margin-top: 10px;
        margin-left: 10px;
        width: 10px;
        height: 10px;
        padding: 10px;
        background-color: red;
      }
      #first {
        background-color: teal;
        width: 150px;
        height: 150px;
      }
      #second {
        background-color: orange;
        width: 100px;
        height: 100px;
      }
      #third {
        background-color: purple;
        width: 50px;
        height: 50px;
      }
      #fourth {
        background-color: red;
        width: 25px;
        height: 25px;
      }
    </style>
  </head>
  <body>
    <div id="first">
      <div id="second">
        <div id="third">
          <div id="fourth"></div>
        </div>
      </div>
    </div>
  </body>

Border

Border은 경계를 의미하고, CSS를 통해 크기와 색을 지정할 수 있다.
’*’ 은 모든 box에 적용한다는 의미이다.

* { border: 2px solid black; }

border은 inline 과 block 모두에 적용된다. ( (인라인) , <div> (블락) 와 같은 태그들 ) 그렇다면 inline에서 margin, padding은 적용이 될까??
Inline에서는 margin이 적용되는 부분이 한정적이다. inline은 높이와 너비가 없기 때문에 margin이 적용되면 좌, 우에만 적용된다. –> 따라서 상하에 마진을 적용시키고 싶은 경우 block으로 바꿔서 margin을 넣어주어야한다.
padding의 경우 사방에 적용이 된다.

Classes

class
- id의 경우 하나의 태그당 하나의 id만 적용된다. 하지만 class의 경우 다양한 태그들에 적용시킬 수 있다. 또한, class의 경우, 태그에 여러가지 클래스를 동시에 가질 수 있다.
  id를 이용할 경우 #을 써서 style을 지정해준다.
  class를 이용할 경우 .을 써서 style을 지정해준다.
#tomato = id=”tomato” .tomato = class=”tomato”

    <style>
      span {
        margin: 5px;
        border-style: dotted;
        font-size: 15%;
      }
      .btn {
        padding: 5px 5px;
        border-radius: 5px;
      }
      .teal {
        background-color: teal;
      }
      .tomato {
        background-color: tomato;
        color: white;
      }
    </style>
  </head>
  <body>
    <span class="btn tomato"> hello </span>
    <span class="btn teal"> hello </span>
    <span class="btn tomato"> hello </span>
    <span class="btn teal"> hello </span>
    <span class="btn tomato"> hello </span>
    <span class="btn teal"> hello </span>

inline-block

Display의 종류에는 inline, block, inline-block이 있다.
inline의 경우 높이와 너비가 무시되어 display되지 않고,
block의 경우 옆으로 나란히 나오게 하지 못한다.
inline-block의 경우 block의 모양을 가지면서 옆으로 나란히 오게할 수 있다.
inline-block의 단점은.. 그 사이 margin의 정확한 규칙이 없다.
반응형 웹사이트에서 달라진다.

display: inline-block;

Flexbox-1

inline-Block의 단점을 해결하기 위해서 display: flex라는 것을 쓴다.
단, 부모 element(div의 경우 body)에서만 명시한다!
justify-content / align-center 를 통해 block의 속성을 결정해준다.
justify-content 는 main-axis(수평 디폴트) 적용, align-items는 cross-axis(수직 디폴트)에 적용한다.
주의해야할 것은 justify-content는 main-axis에 적용될 뿐, ‘수평’에 적용되는 것이 아니라는 점이다.
왜냐하면 main-axis로 수평 수직을 바꿀 수 있기 때문이다.
vh ( viewport height )로 화면 비율을 나타낸다.
( 아래 예시는 화면 비율의 100%를 나타낸 것 )

<style>
  body {
        height: 100vh;
        margin: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      div {
        width: 300px;
        height: 300px;
        background-color: teal;
      }
</style>

Flexbox-2

flex-direction을 통해 main-axis의 축의 수평 수직 위치를 변경시킬 수 있다.
(column, row, column-reverse, row-reverse)
main-axis의 default는 ? flex-direction: row 라고 생각하자.
div내의 컨텐츠를 flex컨테이너로 만들기 위해서 div 박스 내에서 flex를 명시해야한다.
flex-wrap 기능의 wrap은 반응형 웹페이지에서 크기가 변형되고 위치가 바뀌게 해준다.

   <style>
      body {
        height: 100vh;
        margin: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
      }
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 300px;
        color: black;
        font-size: 100px;
        background-color: teal;
      }
      #mid {
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div id="mid">2</div>
    <div>3</div>
  </body>

Position

position: fixed는 block이 현재 위치에 고정되어있는 상태
1000vh를 줘서 화면의 길이를 길게하고 green만 position을
fix시키면 스크롤을 내려도 레이아웃에 상관없이 계속 따라온다. ex) netflix platform

<style>
      body {
        height: 1000vh;
        margin: 20px;
      }
      div {
        width: 300px;
        height: 300px;
        color: white;
        background-color: teal;
        opacity: 0.5;
      }
      #green {
        position: fixed;
      }
      #different {
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    <div id="green"></div>
    <div id="different"></div>
  </body>

Relative, Absolute

position: relative : 첫 위치를 기준으로 상하좌우 움직임을 만들어줌.
position: absolute : 가장 가까운 relative한 부모를 기준으로 위치를 움직인다.
부모에게 relative가 없다면 body가 기준이 된다. (body도 relative가 없다면 vh를 넓혀도 끝까지 가지 않는다.)
position: static : default

Pseudo Selector-1

first-child, Last-child, nth-child()
반복되는 태그들에서 특정 규칙을 가진 태그를 고르거나,
태그를 직접 선택하고 싶을 때, pseudo selector를 사용하자.

  <style>
  span:nth-child(3n + 1) {
        background-color: tomato;
      }
      span:last-child {
        background-color: teal;
      }
  </style>

Pseudo Selectors-2

class 를 쓰지 않고 input에 있는 attribute를 이용하여 style을 지정하는 방법이다.
- ~= “name” –> “name”을 포함한 문자들을 가지고 있는 input
- attribute의 특성을 활용할 때, 다음과 같이 이용한다. ex) [placeholder], :required

 input[placeholder~="name"] {
        background-color: thistle;
      }
input:required {
        border-color: tomato;
      }

Combinators

부모 밑에 자식을 선택할 경우 : p span
부모 바로 밑에 자식을 선택할 경우 : p > span
자식 바로 옆에 형제를 선택할 경우 : p + span
자식 옆에 형제를 선택할 경우 : p ~ span

<style>
p > span {
        background-color: teal;
        text-decoration: line-through;
      }

p + span {
        background-color: teal;
        text-decoration: line-through;
      }

p span {
        background-color: teal;
        text-decoration: line-through;
      }

p ~ span {
        background-color: teal;
        text-decoration: line-through;
      }
</style>
<body>
<p>hi baby <span>inside</span></p>
      <span>hello</span>
</body>

States

active ( 눌렀을 때 (버튼) )
hover ( 키보드가 가리킨 상태 )
focus ( 키보드 동작 )
visit ( 방문했을 때)
form:focus-within ( element가 focus되면 반응이 된다. )
form:hover input:focus ( form에 올라 있으면서 input에 키보드 동작이 시작될 때 )
attribute
- ::placeholder (placeholder의 특성만 바꾸고 싶을 때 사용합니다.)
  ::selection (클릭해서 긁을 때 발생합니다.)
  ::first-letter (첫 글자에만 적용됩니다.)
  ::first-lines (첫 줄에만 작용합니다.)

<style>
form:hover input:focus {
        background-color: sienna;
      }
      form:focus-within {
        border-color: silver;
      }
      button:active {
        color: red;
      }
</style>

Color and Variabels

Color의 표현 방식은 3가지가 있다.
1. hexadeciamal color(color code)
2. rgb(252, 206, 0)
3. rgba (252, 206, 0, 1) (a는 투명도를 나타낸다.)
custom properties : color를 변수화해서 이용하는 방법이다.

<style>
:root {
        --main-color: #fcce00;
        --default-border: 1px solid var(--main-color);
      }
      a {
        color: var (--default-border);
      }
</style>

Twitter Facebook LinkedIn

Hyuns Kim

CSS-1

CSS-1

Add CSS to HTML

Writing Our First CSS Lines

Blocks and Inlines

Margin-1

Margin-2

Border

Classes

inline-block

Flexbox-1

Flexbox-2

Position

Relative, Absolute

Pseudo Selector-1

Pseudo Selectors-2

Combinators

States

Color and Variabels

공유하기

참고

JavaScript-Basic Grammer

Deep Mind - Alphacode

노타 코딩테스트 & LG전자 사전점검

[백준] 단어정렬