1. CSS의 구성


예를 들어 '이 문단의 폰트는 맑은 고딕,크기는 18px,색은 파랑색으로 해주세요' 를 CSS로 표현하면 아래와 작성할 수 있습니다.

p{ font-family : '맑은 고딕'; font-size : 18px; color:blue; }

*이 문단폰트맑은 고딕*으로 해주세요.

  • 선택자(Selector) : 스타일을 적용하고자 하는 html 요소를 선택하는 역할을 합니다.
  • 속성(property) : 지정할 스타일의 속성을 의미합니다.
  • (value) : 키워드나 특정 단위를 이용하여 원하는 스타일을 적용합니다.
  • 선언 : 속성과 값 한 쌍을 의미합니다. ( ex. font-size : 18px ) 각 선언이 끝날 때 마다 선언이 끝났다고 알려주는 세미콜론(;)을 꼭 써줘야 합니다.
  • 선언 블록(Declaration block) : 중괄호로 구분되는 선언들의 모음을 말합니다.

2. HTML에 CSS 적용하기


지금까지 우리가 배웠던 HTML은 단독적으로 쓸 수 있습니다. 하지만 CSS는 반드시 HTML에 적용해야만 효용을 발휘합니다. 그러니 본격적으로 CSS에 대해 알아보기 전에 HTMLl에 CSS를 적용하는 방법을 배워봅시다.

2-1. link style

CSS 파일을 따로 만들어 head 태그 안에 링크로 연결하는 방법입니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test.css"> </head> <body> <h1>일어나! 코딩해야지</h1> </body> </html> h1{ color:red; }

  • rel : relation의 약자로 현재의 HTML파일과 무슨 관계에 있는 파일인지를 명시합니다.
  • href : 는 우리가 link로 걸 CSS파일의 주소입니다.

2-2. embedding style

head 태그 안에 style 태그를 삽입 한 뒤 css를 작성하는 방식입니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{ color:red; } </style> </head> <body> <h1>일어나! 코딩해야지</h1> </body> </html>

2-3. inline style

태그 이름 뒤에 style 속성을 직접 추가하여 스타일을 지정하는 방법입니다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1 style="color:red;">일어나! 코딩해야지</h1> </body> </html>

2-4. 위 3가지 코드들의 결과

위 3가지 코드들은 모두 같은 결과를 출력합니다.

  • CSS를 적용하는 3가지 방법 중 어떤 것이 가장 좋은 방법인가요?

 

 

3. 선택자


선택자란 말 그대로 선택을 해주는 요소입니다. CSS는 HTML의 특정 요소들을 선택해 스타일을 적용할 수 있게 해줍니다. 우리가 스타일을 적용하고자 하는 HTML 요소를 의미하죠. 예를 들어 '이 문단의 폰트는 맑은 고딕,크기는 18px, 색은 파랑색으로 해주세요' 라는 주문을 받았을 때 아래와 같이 스타일을 적용합니다.

 

 

h1 { color: red; } p { color: red; }

선택자는 앞선 예시에서 볼 수 있듯이 h1, p, div와 같이 일반적인 태그 이름을 사용할 수 있습니다. 위 예시에서 p태그와 h1태그의 color 속성 값이 red로 같은 걸 볼 수 있습니다. 두 선택자의 스타일이 정확하게 일치하는데 굳이 두 번 쓸 필요가 있을까요? CSS에서는 여러 개의 선택자를 ,(콤마)를 이용해 한꺼번에 스타일을 지정할 수 있으며, 이를 다중선택자라고 부릅니다.

 

 

우리가 스타일을 정의 할 때는 단순히 HTML 태그만 이용할 수도 있습니다. 하지만 CSS는 보다 다양한 방법으로 HTML 요소를 선택할 수 있는 방법을 제공합니다.

3-1. 단순 선택자

1) 타입 선택자(Type Selector)

타입 선택자는 해당 태그를 가지는 모든 요소에 스타일을 적용합니다. 선택자 자리에 태그를 넣으면 태그에 해당하는 모든 요소에 스타일이 적용됩니다. 지금까지 간단하게 썼던 예제들이 모두 타입 선택자에 해당합니다.

<!DOCTYPE html> <html> <head> <style> p { color: red; } h2 { color: blue; } </style> </head> <body> <h1>멋사입니다.</h1> <p>이것은 첫번째 단락입니다.</p> <h2>작은 멋사입니다.</h2> <p>이것은 두번째 단락입니다.</p> <h3>더작은 멋사입니다.</h3> </body> </html>

2) 아이디 선택자(Id Selector)

아이디 선택자는 아이디 이름으로 스타일을 적용합니다. **아이디(id)**는 Identification의 약자입니다. 모든 요소들은 각자의 id를 설정할 수 있고 이는 ****고유한 값이기 때문에 HTML문서 내에는 동일한 아이디가 존재할 수 없습니다. 아이디 선택자를 사용해 style을 적용하는 방법은 아래와 같습니다.

#id명 { background-color: yellow; }

# 키워드와 id를 붙여서 써주면 됩니다. 이 방법을 사용해 snow라는 아이디를 가진 요소의 배경을 노랗게 만들고 싶다면, 아래와 같이 작성해주시면 됩니다.

<!DOCTYPE html> <html> <head> <style> #snow { background-color: yellow; } </style> </head> <body> <h1>멋사입니다.</h1> <p>이것은 첫번째 단락입니다.</p> <h2 id="snow">작은 멋사입니다.</h2> <p>이것은 두번째 단락입니다.</p> <h2>더작은 멋사입니다.</h2> </body> </html>

3) 클래스 선택자(Class Selector)

id선택자와 유사하게 클래스 선택자라는 것이 있습니다. **클래스(Class)**는 Id와 마찬가지로 HTML태그의 속성입니다. 클래스는 비슷한 특징을 갖는 요소를 지정하여 묶어 그룹으로 만들 수 있습니다. 예를 들어 우리가 학교에서 한 반을 클래스라 부르고, 이 반의 학생들은 모두 수학 수업을 듣고 있다는 특징을 가지고 있다면 class의 이름을 math로 지정할 수 있습니다.

 

 

클래스 선택자를 사용하여 style을 적용하는 방법은 아래와 같습니다.

#class명 { background-color: yellow; }

클래스 선택자는 .과 지정할 class를 함께 써서 해당 class를 선택합니다. 이 방법을 사용해 특정 클래스를 가지는 요소의 글씨 크기를 키워보겠습니다.

<!DOCTYPE html> <html> <head> <style> .contents { font-size: 24px; } </style> </head> <body> <h1>멋사입니다.</h1> <p>이것은 첫번째 단락입니다.</p> <h2 id="snow">작은 멋사입니다.</h2> <p class="contents">이것은 두번째 단락입니다.</p> <h2>더작은 멋사입니다.</h2> <p class="contents">이것은 세번째 단락입니다.</p> </body> </html>

contents 클래스를 가진 <p> 태그만 글씨 크기가 달라지게 됩니다. class는 이렇게 비슷한 스타일을 묶어 스타일을 적용시키고 싶을 때 많이 사용합니다.

4) 전체 선택자(Universal Selector)

전체 선택자는 모든 요소에 스타일을 적용합니다. 하지만 스타일을 모든 요소에 적용시키기 때문에 속도가 저하될 수 있어 쓰지 않는 것을 권장합니다.

* { color: red; }

전체 선택자 사용시에는 *을 써 모든 요소들을 선택합니다.

<!DOCTYPE html> <html> <head> <style> * { color: red; } </style> </head> <body> <h1>멋사입니다.</h1> <p>이것은 첫번째 단락입니다.</p> <h2 id="snow">작은 멋사입니다.</h2> <p class="contents">이것은 두번째 단락입니다.</p> <h2>더작은 멋사입니다.</h2> <p class="contents">이것은 세번째 단락입니다.</p> </body> </html>

모든 요소들의 글씨가 빨갛게 변하는 것을 확인할 수 있습니다.

5) 속성 선택자(Universal Selector)

속성 선택자는 특정 HTML속성을 가지고 있는 모든 요소에 스타일을 적용합니다.

a[target="_blank"] { color: red; }

속성 선택자는 위와 같은 형태를 띕니다. 선택자와 [](대괄호) 사이에 속성과 속성값을 작성합니다.

구글 현재창 구글 새 창 구글 현재창 구글 현재창

id가 link인 요소 중 target속성이 _blank인 요소들만 color을 red로 바꿔줍니다. [](대괄호) 앞에 들어가는 것은 태그가 아닌 선택자입니다.

4. 값과 단위 - 숫자


글자 사이즈,높이,너비 등을 정할 때는 숫자값을 이용하는데, 이 숫자값은 단위가 굉장히 중요합니다. 우리가 익히 아는 단위에는 cm,mm,inch 등이 있으나, 웹에서는 이런 단위들보다 더욱 중요하게 사용되는 단위들이 존재합니다.

4-1. px

픽셀은 CSS에서 절대 크기를 나타내기 위한 단위입니다. 이는 디스플레이를 구성하는 최소 단위이며, 1920*1080 해상도의 모니터가 있다고 가정 했을 때 이 모니터는 가로로 1920개,세로로 1080개 픽셀을 갖고 있다는 뜻입니다. 그래서 px는 어느 정도의 크기를 가지는 걸까요? 답은 기기마다 다르다! 입니다.

 

4-2. em과 rem

em과 rem은 CSS에서 상대크기를 나타내기 위한 단위입니다. 이들은 같은 방식으로 동작하지만 차이가 있습니다. em은 현재 스타일이 지정된 요소의 font-size를 기준으로 크기를 설정합니다. 그리고 rem은 최상위 요소의 font-size를 기준으로 크기를 설정합니다. 예시를 통해 em과 rem을 비교해보겠습니다.

<!DOCTYPE html> <html> <head> <title>수노입니다.</title> <style> html { background-color: skyblue; font-size: 32px; } #main { background-color:bisque; } #px { background-color: red; width: 16px; height: 16px; } #em { background-color: blue; width: 1em; height: 1em; font-size: 24px; } #rem { background-color: yellow; width: 1rem; height: 1rem; } </style> </head> <body> <div id="main"> 단위 <div id="em">em</div> <div id="rem">rem</div> <div id="px">px</div> </div> </body> </html>

  • id 가 em인 요소의 스타일을 보면 너비와 높이가 1em 입니다. em 은 현재 요소의 font-size를 따르기 때문에 이 요소의 1em = 24px가 됩니다.
  • id 가 rem 인 요소의 스타일을 보면 너비와 높이가 1rem 입니다. rem 은 최상위 요소의 font-size를 따릅니다. 최상위요소인 <html> 의 font-size가 32px이기 때문에 이 요소의 1rem = 32px가 됩니다.
  • id 가 px 인 요소의 스타일을 보면 너비와 높이가 16px입니다. 하지만 상위요소인 <html> 의 font-size가 32px로 되어있어 <div>보다 글자크기가 커진 것을 볼 수 있습니다.

웹기본 폰트사이즈는 16px으로 지정되어 있습니다. 따로 font-size를 지정해주지 않는다면 1rem과 1em 모두 16px라는 공식을 따릅니다.

  • rem과 em은 왜 쓰나요?

 

4-3. % (퍼센트)

**%**는 상대 길이를 지정하는 하나의 방법이며 보통 이미지나 레이아웃의 너비나 높이를 지정할 때 쓰입니다. 예시를 통해 직접 동작하며 익혀보겠습니다.

<!DOCTYPE html> <html> <head> <title>수노입니다.</title> <style> html { background-color: skyblue; font-size: 32px; } #main { background-color:bisque; width: 75%; } #per { background-color: blue; width: 50%; } </style> </head> <body> <div id="main"> 단위 <div id="per">per</div> </div> </body> </html>

id가 main인 <div>의 상대 길이를 75%로 설정하니 전체 화면에서 75%를 차지하게 됩니다. 그리고 id가 per인 <div>의 상대 길이를 50%로 설정하니 상위요소 #main 의 50%를 차지하게 됨을 볼 수 있습니다.

 

5. 색상


이번에는 색상값에 대해 알아봅시다. 지금까지 우리는 색깔을 blue, orange 등 정해진 키워드를 사용하여 표현했습니다. 하지만 이렇게 키워드를 사용하여 색을 지정하는 것은 한계가 있습니다. 가령 '채도가 낮은 붉은 색'을 설정하고 싶거나 '연한 노란색'을 나타내고 싶을 때를 말합니다. 이러한 키워드를 제외하고 우리가 색상을 표현할 수 있는 방법은 hex code, rgb , hsl 등이 있습니다. 이 중 가장 대중적으로 쓰이는 hex code 와 rgb 표현법에 대해 알아보겠습니다.

 

  • hex code : #ff0000과 같이 # 키워드 뒤에 16진수가 붙은 형태로 색깔을 제공하는 형태입니다.
  • rgb code : 빨강,파랑,초록 색을 조합하여 색상을 표현하는 방법을 말합니다.

추가로 색상을 나타낼 때 alpha라는 값이 존재하는데 이는 투명도를 나타내는 값입니다. rgb는 rgba를 통해 alpha값을 추가할 수 있고, hex code는 6자리에 추가로 2자리를 추가하여 alpha값을 추가할 수 있습니다. 아래 코드를 복사하여 실행해보고, 색상값을 바꿔가며 실습해보세요.

<!DOCTYPE html> <html> <head> <title>수노입니다.</title> <style> #main{display:flex;} #keyword, #hex, #rgb{ width:25%;margin-left:20px; } #key-black{background-color: black;} #key-white{background-color: white;} #key-red{background-color: red;} #key-green{background-color: green;} #hex-black{background-color: #000000;} #hex-white{background-color: #ffffff;} #hex-red{background-color: #ff0000;} #hex-green{background-color: #00ff0020;} #rgb-black{background-color: rgb(0,0,0);} #rgb-white{background-color: rgb(255,255,255);} #rgb-red{background-color: rgb(255,0,0);} #rgb-green{background-color: rgb(0,255,0,0.2);} </style> </head> <body> <div id="main"> <div id="keyword"> <h3>keyword</h3> <div id="key-black">black</div> <div id="key-white">white</div> <div id="key-red">red</div> <div id="key-green">green</div> </div> <div id="hex"> <h3>hex code</h3> <div id="hex-black">black</div> <div id="hex-white">white</div> <div id="hex-red">red</div> <div id="hex-green">green</div> </div> <div id="rgb"> <h3>rgb</h3> <div id="rgb-black">black</div> <div id="rgb-white">white</div> <div id="rgb-red">red</div> <div id="rgb-green">green</div> </div> </div> </body> </html>

'웹(html,css,javascript)' 카테고리의 다른 글

javascript(ES6) & webpack  (0) 2021.06.02
html 태그 2  (0) 2020.03.01
Semantic Tag  (0) 2020.03.01
html  (0) 2020.03.01
웹 이란?  (0) 2020.03.01

+ Recent posts