[2023 신입부원 기초 스터디] 박민규 #2주차 - CSS는 화려하게 (Like 음주 텐겐)

CSS : Cascading Style Sheets

 

CSS 형태

 

 ↓ (선택자)

h1 {

        color: blue;

}         ↑        ↑

  (속성명)(속성값)

 

Inline Style

하나의 태그 안에 style을 사용하는 방법 (절대 변하지 않을 스타일인 경우, 꼭 사용해야 할 경우에 드물게 사용)

ex) <div style="width: 100px; height: 100px; border: 1px solid red"></div>

                                            ↑ 

                          style 속성을 여러개 주고 싶을 땐 이렇게 ' ; '을 사용한다.

 

Internal Style

<style>

 ↓ (선택자)

h1 {

        color: blue;

}         ↑        ↑

  (속성명)(속성값)

</style>

이러한 내부스타일 형식이며, h1대신 다른 태그에 class를 부여하고 .(class명) 후 속성명과 속성값을 부여할 수도 있다.

하지만 현업에서는 내부스타일 형식은 번거로운 작업이므로 잘 쓰이지 않는다.

 

External Style

작업을 하고있는 html 파일이 아닌, 기존에 있는 CSS 스타일시트에 

 ↓ (선택자)

h1 {

        color: blue;

}         ↑        ↑

  (속성명)(속성값)

와 같은 스타일 명령어를 입력하고, 작업하던 html 시트의 head에

<link rel="stylesheet" href="(CSS스타일시트 링크명)을 입력해준다.

위와 같은 방법은 하나의 스타일 시트 안에 모든 스타일 명령어를 입력하고 다른 html파일에는 링크 한줄만 걸어놓으면 

되기 때문에 훨씬 편리하다.

 

CSS에서의 주석 

/*

(text)     or    /*(text)*/

*/

 

CSS출처 적용 우선순위

사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저 

따라서 제작자가 따로 스타일을 입력하지 않으면 브라우저가 지정해준 기본 스타일이 적용된다.

 

 

기본 선택자

 

 전체 선택자 : " * " 이다. 스타일 태그의 선택자 자리에 *을 쓰면 모든 선택자가 포함된다.

 Type 선택자 : h1, p태그 등 태그의 종류로 선택자를 설정하는 경우이다.

 Class 선택자 : 태그 안에 class="클래스 명"라고 입력하고, 스타일 태그의 선택자 자리에 클래스명을 입력하면 해당 클래스 명에 해당하는 문장들이 스타일 속성 값을 받게 된다. (여러 태그 안에 같은 클래스 명을 중복으로 입력 가능하다.)

 ID 선택자 : 태그 안에 id="아이디 명"라고 입력하고, 스타일 태그의 선택자 자리에 아이디 명을 입력하면 해당 아이디에 해당하는 문장들이 스타일 속성 값을 받게 된다. (하나의 태그에 하나의 아이디 명을 가질 수 있으며, 여러 태그에 같은 아이디 명을 중복시킬 수 없다.)

 

 

속성 선택자

 

 어떠한 태그 안에 속성명이 있을 경우 그 태그에서 속성명을 갖는 경우 그 태그의 그 속성명을 갖는 문장만 속성값을 지정해서 줄 수 있다. 

ex)

<<일치>>

h2[class] {

                 스타일 태그      :  이 경우 h2 태그 안에 class라는 속성을 갖는 문장만 속성값을 준다.

}

a[target] {

                스타일 태그       : 이 경우 a 태그 안에 target이라는 속성을 갖는 문장만 속성값을 준다.

}

h2[class="naver-title"] {

                스타일 태그       : 이 경우 h2 태그 안에 클래스 명이 naver-title인 문장만 속성값을 준다.

}

<<포함>>

a[href*="www"] {

                스타일 태그       : 이 경우 a 태그 안에 href에 www라는 입력값이 포함되어 있는 모든 문장에 속성 값을 준다.

}                                          이 것은 = 앞에 *를 붙여 사용 가능하다.

 

<<시작>>

h2[class^='google'] {

                 스타일 태그       : 이 경우 h2 태그 안에 class 명이 google로 시작하는 모든 문장에 속성값을 준다.

}                                          이 것은 = 앞에 ^를 붙여 사용 가능하다.

 

<<끝>>

a[href$="facebook.com"] {

                스타일 태그       : 이 경우  a 태그 안에 href의 주소가 facebook.com으로 끝나는 모든 문장에 속성값을 준다.

}                                         이 것은 = 앞에 $를 붙여 사용 가능하다.

 

<<단어의 포함>>

h2[class~='title'] {

                스타일 태그        : 이 경우 h2 태그 안에 class 명에 title이라는 단어가 존재하는 모든 문장에 속성값을 준다.

}                                          이 것은 = 앞에 ~를 붙여 사용 가능하다.

 

 

그룹 선택자

 

선택자를 쉼표(,)로 구분하 여러 선택자를 나열함으로써 같은 스타일을 여러 선택자에 한꺼번에 정의할 수 있다.

ex)

h1, h2 {

            스타일 태그           :  이 경우 h1과 h2 모두 동일한 스타일 속성 값을 갖는다.

}

 

자손 결합자

A B 형식 : A 선택자 하위에 있는 B 선택자를 모두 선택함. ( 2, 3, ...단계 하위에 있어도 가능)

ex)

div span {

                스타일 태그        : 이 경우 div 하위에 있는 span 태그에 있는 모든 문장이 속성 값을 갖는다.

}

 

자식 결합자

A > B 형식 : A 선택자의 바로 하위에 있는 B 선택자를 모두 선택함.

ex) 

div > span {

                   스타일 태그         : 이 경우 div의 바로 하위에 있는 span 태그에 있는 모든 문장이 속성 값을 갖는다.

}

 

일반 항체 결합자

A ~ B 형식 : 같은 라인에서 A태그가 나온 후에 있는 B태그에 스타일 값을 준다.

ex)

div ~ span {

                  스타일 태그          : 이 경우 div 태그가 나온 후 있는 span 태그에 있는 모든 문장이 속성값을 갖는다.

}

 

인접 형제 결합자

A + B 형식 : A가 나온 후 가장 최근에 쓰이는 B 태그에 스타일 값을 준다.

ex) 

p + span {

                스타일 태그        : 이 경우 p가 쓰인 이후 가장 최근에 쓰인 span 태그에 있는 문장이 속성 값을 갖는다.

}

 

글꼴 관련 속성 

> font-family : 글꼴 종류를 지정한다.

> font-size : 글자 크기를 지정한다.

> font-style : 글자를 이텔릭체로 표시할지 지정한다.

> font-weight : 글자 굵기를 지정한다.

> font-variant : 소문자를 작은 대문자로 바꾸는 속성.

 

웹 폰트

: 사용자의 컴퓨터에 설치된 폰트가 아닌 온라인의 특정 서버에  있는 폰트파일을 다운로드하여 사용하는 웹 전용 폰트.

구글 웹 폰트 사이트에 방문하여 <link> 또는 @import 문을 사용하여 웹 폰트를 적용할 수 있다. 

ex) 

<style>

@import url('구글 웹 폰트 사이트 주소')

   선택자 {

               font-family: '다운로드한 폰트 이름';

}

 

단위 em, rem

 px : 픽셀 단위

 rem : 루트 요소의 글꼴 크기 (최상위 요소의 몇배 사이즈로 할 것이냐)

 em : 요소의 글꼴 크기 (현제 자기 자신의 폰트사이즈 몇 배로 할 것이냐)

 vw : viewport 너비의 1%

 vh : viewport 높이의 1%

(viewport 는 웹 페이지의 보이는 부분이다)

 

글자 색상

색상 키워드 표기법 : red, blue, yellow 등 색상 키워드를 입력하는 방식. 

RGB / RGBA 표기법 :( rgb(0,0,0) , rgba(0,0,0,0) )

16진수 표기법 : #ff0000, #ff00ff, #808000 등 16진수

hsl / hsla 표기법 : 

 

그 외 글자 관련 속성 

text-align : 글자를 가로 정렬 하는 데 사용. (text-align: center; / text-align: left; / text-align: right 등)

line-height : 줄 간격 설정.

letter-spacing : 글자 하나하나의 간격 설정.

word-spacing : 단어 하나하나의 간격 설정.

text-indent : 문단의 첫 들여쓰기 간격 설정.

text-transform : uppercase;의 경우 모두 대문자로, lowercase;의 경우 모두 소문자로 바꿈.

text-dacoration : 글자의 꾸미기에 대해 설정 가능 (none;의 경우 글자의 꾸미기 정도를 아예 없앨 수 있음) 

text-shadow : ?px ?px ?px 색상; 로 그림자 정도와 그림자 색상을 입력 후 글에 그림자를 부여할 수 있음.

list-style : 리스트에 스타일을 줄 수 있음. (none; 의 경우 아무 것도 안 줄 수도 있음)

 

표

<table>

    <caption>

        표 이름

    </caption>

    <tr>

        <th>??</th>

        <th>??</th>

        <th>??</th>

    </tr>

    <tr>

        <th>??</th>

        <th>??</th>

        <th>??</th>

    </tr>

</table>

위와 같은 형식으로 만들어 짐. 

여기서 table에 스타일 값을 주는데, border:로 항목을 구분 짓고, border-collapse: collapse;로 칸 사이 여백을 없앤다.

 

또, tr:nth-child(odd / even) {} 라는 스타일 태그를 사용하여 tr의 형제태그들을의 짝수번째, 홀수번째만 골라서 스타일 속성 값을 줄 수 있음.

 

 

BOX Model

 

Content

 width : Content 영역은 width 값을 이용하여 가로 너비를 지정할 수 있다.

 height : Content 영역은 height 값을 이용하여 세로 너비를 지정할 수 있다.

 

안쪽 여백 - Padding

 padding-padding 값을 조절하여 안쪽 여백을 지정할 수 있다.

 padding-top, padding-bottom, padding-left, padding-right 속성을 사용하여 각각 지정할 수도 있다.

 padding: 10px 20px; 의 경우 세로너비가 10px, 가로너비가 20px을 적용받는다.

 padding: 10px 20px 30px 40px; 의 경우 top 10px, right 20px, bottom 30px, left 40px이 적용된다.

 

바깥쪽 여백 - Margin

 margin 속성은 HTML요소의 바깥 여백을 지정한다.

 margin-top. margin-bottom, margin-left, margin-right 속성을 사용하여 각각 지정할 수 있다.

 margin : 10px 20px; 의 경우 세로너비가 10px, 가로너비가 20px을 적용받는다.

 margin : 10px 20px 30px 40px; 의 경우 top 10px, right 20px, bottom 30px, left 40px이 적용된다.

<마진 중첩>

HTML요소를 세로로 배치할 때, margin과 margin이 만나게 되면 margin값이 큰 쪽으로 겹쳐지게 된다. 

따라서 margin이 큰 부분만 적용된다.

 

테두리 Border

border, border-width, border-style, border-color 속성으로 요소의 테두리를 설정할 수 있다.

  <border-style> : 어떤 형태의 테두리 스타일을 지정할지를 나타냄. (실선으로 할지 점선으로 할지 등)

                        border-left-style: solid; 처럼 한 쪽 방향만 지정할 수도 있음.

  <border-width> : 테두리 두께를 지정한다.

 border-width: 10px 20px 30px 40px; 의 경우 top 10px, right 20px, bottom 30px, left 40px이 적용된다.

  <border> : 단축 속성으로서 border-width, border-style, border-color 세가지 모두를 한꺼번에 표기 가능하다.

border: 2px solid red; 의 경우 border-width: 2px;, border-style: solid;, border-color: red;와 같다.

  <border-radius> : 테두리 꼭짓점을 둥글게 만든다.

border-radius : 20px; 의 경우 20px의 범위 만큼 꼭짓점 부분이 둥글게 휜다.

border-radius : 10%; 의 경우 border 크기의 10%만큼 꼭짓점 부분이 둥글게 휜다.

 

Box Sizing

Box Sizing 속성은 HTML요소의 너비와 높이를 계산하는 방법을 지정한다.

box-sizing: content-box; 의 경우 width와 height의 사이즈만큼 콘텐츠의 사이즈가 정해진다.

box-sizing: border-box; 의 경우 width와 height의 사이즈 = 콘텐츠+패딩+보더가 된다.

 

Display 속성

 [none] : 디스플레이 요소를 보이지 않게 함. 영역도 차지하지 않음.

 [visibility:hidden] : 디스플레이 요소가 보이지 않지만 그 영역은 유지함.

 [block] : 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.

             또, width, height 속성을 지정할 수 있다. div, p, h1~h6 태그 등이 이에 해당함.

 [inline] : 컨텐츠만큼 영역을 차지한다. block과 달리 줄 바꿈이 되지 않고, width와 height 를 지정할 수 없다.

 [inline-block] : inline처럼 컨텐츠만큼 영역을 차지 하지만 block처럼 width와 height를 지정할 수 있게 해준다.