HTML/CSS/JS 기초 잡기 03 CSS

HTML-CSS-JS 2021. 8. 4. 21:52

유투버 유노코딩님 강의 참조!

- CSS 기본 문법 및 태그 설명

Cascading Style Sheets 의 줄임말로 계단식으로 스타일을 동적으로 정의하는 것
선택자 { 속성명 : 속성값; } 으로 선언

CSS를 적용하는 방법은 3가지
인라인 - 태그에 직접 기술
스타일 - 스타일 태그를 추가하여 기술
문서간 - CSS 파일을 따로 작성하여 연결

  <head>
    <style>
      h1 {
        color: orchid;
      }
    </style>
    <link href="/a.css" rel="stylesheet" />
  </head>
  <body>
    <h1>스타일 태그!</h1>
    <p style="color: orange">인라인 적용!</p>
    <h2>문서간 연결!</h2>
  </body>

- CSS 선택자

6가지의 선택자가 있지만 주로 기본/그룹 선택자를 많이 쓴다
선택자가 겹치면 아이디 > 클래스 > 태그 선택자 우선순위로 선택 된다

기본선택자
1-1 전체 선택자 - *(애스터리크)를 써서 선택, 문서내의 모든 요소를 의미
1-2 태그 선택자 - 주어진 이름을 가진 요소를 선택, '유형선택자' 라고도 불림
1-3 클래스 선택자 - 특정 클래스를 선택
1-4 아이디 선택자 - 주어진 id값을 가진 요소를 선택
그룹 선택자 - 다양한 유형의 요소를 한꺼번에 선택하고자할때 사용

    <style>
      * {
        color: palegreen;
      }
      h1 {
        color: red;
      }
      .p1 {
        color: royalblue;
      }
      #p2 {
        color: salmon;
      }
    </style>
  </head>
  <body>
    <h1>Title</h1>
    <p class="p1">Paragraph1</p>
    <p id="p2">Paragraph2</p>
    <p>Paragraph3</p>
    <p>Paragraph4</p>
    <p>Paragraph5</p>
    <p>Paragraph6</p>
  </body>

- CSS 텍스트 꾸미기 속성

폰트사이즈 또는 모든 사이즈를 사용할때 단위선정이 중요하다

텍스트 정렬 또는 모든 정렬시에 왼/중/오가 있고 justify를 통해 양끝정렬 가능

    <style>
      h1 {
        font-family: 'Times New Roman', Times, serif;
      }
      p {
        font-size: 26px;
      }
      h2 {
        text-align: center;
      }
    </style>

- Display / Border 속성

display 속성을 통해 태그를 블록 또는 인라인 요소로 바꿀 수 있다.

border 속성을 통해 border가 들어간 영역에 테두리를 그을수 있고 테두리 두께,모양,크기등을 설정 가능('단축속성' 이라고 부름)

<style>
      div {
        border: 3px solid red;
      }
      span {
        border-width: 5px;
        border-style: dashed;
        border-color: greenyellow;
      }
    </style>
      <body>
    <div>나는 블록</div>
    <br />
    <span>나는 인라인</span>
  </body>

<style>
      div {
        border: 3px solid red;
        display: inline;
      }
      span {
        border-width: 5px;
        border-style: dashed;
        border-color: greenyellow;
        display: block;
      }
    </style>

display의 none 속성은 화면에는 안보이지만 계속해서 존재하는 것
inline-block 은 인라인이지만 블록 속성을 가질 수 있다는 말 즉 사이즈 조절이 가능한 블록
기본적으로 div 는 블록 요소, span 은 인라인요소지만 inline-block으로 조절 가능

- 박스모델

브라우저가 요소를 렌더링 할 때에는 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하고 이 영역을 '박스'라고 표현한다. CSS는 이 박스의 속성을 다루는 것이다.
이 박스는 네개의 영역으로 구성되고 정의할 수 있는 속성이 각각 다음과 같다
콘텐츠 영역 - width, height
안쪽 여백 - padding
경계선(테두리) - margin
바깥쪽 여백 - border-width

    <style>
      div {
        border: 3px solid skyblue;
        padding: 10px;
        margin: 20px;
      }
    </style>

주황색 - margin 초록색 - border 초록과 파랑 사이 - paading

여백은 상화좌우 네개의 면이 존재하며 각 면에 개별적으로 두께 정의가 가능
-> 하위 속성 정의 / 여러값을 한번에 정의

여러값 정의 -> padding/margin: 10px 20px 30px 40px;

- 박스 크기

화면에 나오는 또는 컨텐츠간의 거리는 박스크기에 의해 정의되고 그 박스 크기는 테두리를 포함하여 나타난다
컨텐츠영역 + 패딩 + 테두리를 넣으면 자신이 생각했던 사이즈보다 박스가 무조건 커진다 여기에 쓰이는 것이
'box-sizing' 속성

box-sizing: border-box; 라고 정의하면 박스 사이즈가 커지지 않고
정의한 사이즈 그대로 유지하되 컨텐츠 영역이 줄어든다
마진, 패딩을 추가하면 할수록 컨텐츠 영역이 줄어든다

box-sizing: content-box; 라고 정의하면 박스 사이즈가 정의한 사이즈 대로 커진다

width/height 등의 사이즈를 계산 하기 싫으면 border-box,
컨텐츠 영역은 무조건 확보하고싶다면 content-box

박스 배경 또한 속성을 부여할 수 있다.

- float / clear

float - 요소가 문서의 일반적인 흐름에서 제외되어 자신 포함 컨테이너의 왼쪽이나 오른쪽에 배치시키는 속성이며 흐름에서는 제외되지만 필요한 만큼의 공간은 차지한다. (none/left/right 으로 배치 가능)

    <style>
      #a {
        width: 100px;
        height: 50px;
        background: coral;
      }
      #b {
        width: 100px;
        height: 100px;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <p>3번째 태그</p>
  </body>

프로그램상 코딩한 순서대로 화면에 표시되지만 float을 추가하게되면 흐름을 무시하고 원하는 곳에 놓을 수 있다.
clear는 float속성 이후에 붕괴되는 요소들을 float 속성을 해제시킨후 배치하는 특징이 있다.
(none/left/right/both)

- position

문서상에 요소를 배치하는 방법을 정의
position을 쓸때 어디 요소에 배치가 되는지에따라 컨텐츠의 위치가 달라진다

아래 속성들이 주로 쓰이고 relative/absolute/fixed가 가장 많이 쓰인다

    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: grey;
        position: relative;
        top: 100px;
        left: 100px;
      }
    </style>

      <style>
      div {
        width: 200px;
        height: 200px;
        background-color: grey;
        position: relative;
        border: 1px solid black;
      }
      .abs {
        width: 100px;
        height: 100px;
        background-color: hotpink;
        position: absolute;
        top: 100px;
      }
    </style>
  
  
  <body>
    <div></div>
    <div>
      <div class="abs"></div>
    </div>
  </body>

    <style>
      .pos {
        width: 100px;
        height: 100px;
        background: hotpink;
        position: fixed;
        top: 50px;
        left: 50px;
      }
    </style>

- flexbox

레이아웃을 유연하게 해주며 박스 내 요소간의 공간 배분과 정렬기능을 제공하는 1차원 모델
컨테이너에 display:flex; 로 지정

    <style>
      .container {
        display: flex;
      }
      .item {
        width: 80px;
        height: 80px;
        background-color: hotpink;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>

주축과 교차축에따라 flex가 컨텐츠를 놓는게 달라진다 -> flex-direction으로 주축 및 방향 설정 가능

- 의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로 요소가 어떤 특정한 상태가 되었을때 작동시키는 클래스

5개가 가장 많이 쓰이는 의사 속성이며 더 많은 속성은 여기로(https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes)

- 의사 요소

선택자에 추가하는 키워드로, 선택한 요소의 특정 부분만 스타일 하고싶을때 사용

5개가 가장 많이 쓰이며 더 많은 속성은 링크로
(https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

- 알아두면 좋은 개념들

상속 - 하위요소가 상위 요소의 스타일 속성값을 물려받음

상속이 되는 속성과 안되는 속성이 있다. 링크를 참조하자(https://www.w3.org/TR/CSS21/propidx.html)

initial/unset 또한 상속과 같이 알아 두면 좋은 개념!

'HTML-CSS-JS' 카테고리의 다른 글

HTML/CSS 클론코딩으로 복습하기 3 - 유투브 (0)	2021.08.06
HTML/CSS 클론코딩으로 복습하기 2 - 반응형 헤더 (0)	2021.08.05
HTML/CSS 클론코딩으로 복습하기 1 - 구글 (0)	2021.08.05
HTML/CSS/JS 기초 잡기 02 HTML (0)	2021.08.03
HTML/CSS/JS 기초 잡기 01 기본개념 (0)	2021.08.02

ABOUT ME

Treasure Treasure

유투버 유노코딩님 강의 참조!

'HTML-CSS-JS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

유투버 유노코딩님 강의 참조!

'HTML-CSS-JS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바