1. Default HTML Styles
지난번에 배웠던 HTML이 특정 내용을 구조화하고 작성하는 것에 초점을 맞췄다면 CSS는 그것들을 어떻게 표현하는지 결정해주는 언어이다. CSS는 Cascading Style Sheets (스타일 시트)로써 브라우저에게 HTML 요소들이 어떻게 보여질지 결정해주는데 여러 방법들이 있다.
웹 개발자가 알 수 있는 사실은 만약 HTML 도큐멘트를 만들기 위해 코딩을 할때 각각의 HTML 요소들을 이루는 태그들이 각 뚜렷한 특징들을 담고 있다는 사실인데 이때의 HTML태그들을 간략히 설명하자면 다음과 같다.
| <h1> | 크고 진한 텍스트를 만들어주며 텍스트 주위 어느정도의 여백을 생성하여 독립적인 텍스트를 생성하게 해준다. (제목같은 요소) |
| <p> | 폰트 크기가 평범하며 (15px 정도) 각각의 <p>로 생성된 라인들은 크게 단략적으로 구분되어 문단을 생성하게끔 만든다. |
| <ul> | 특정 텍스트를 들여쓰기 해주고 Bullet point를 생성하여 목록같은 글을 만든다. 또한 <li>를 쓸때마다 다른 줄의 Bullet point로 넘어가게 만든다. |
| <li> | |
| <strong> | <strong> 태그 안에 들어가는 텍스트는 볼드체로 표기된다. |
| <em> | <em> 태그 안에 들어가는 텍스트는 이탈릭체로 표기된다. |
| <a> | <a>안에 들어가는 텍스트는 파랗게 변한다음 밑줄이 그어져 유저들에게 하이퍼링크라는 인식을 심어준다. 유저가 클릭한 다음에는 텍스트가 보라색으로 변해 이미 클릭되었다는 사실을 내포한다. |
이때 많은 HTML 태그들은 기본적인 CSS 속성들이 적용될 수 있게끔 한다. 이때 CSS 스타일시트에서 개발자가 값들을 세부적으로 바꾸고 수정하여 기본적인 HTML 태그로 생성된 요소들의 스타일을 변경할 수 있다.
우선 HTML에 CSS를 연결하는 방법으로는 HTML에 있는 <head> 태그 안에 <link> 태그를 사용하여 해당 CSS 파일을 연결해 줄 수 있다.
<head>
<link href="style.css" rel="stylesheet">
</head>
이 때 중요한 사실로는 HTML과 CSS파일이 같은 공간 즉 같은 폴더 내에 위치해야 한다는 점이다!
2. CSS Rules - HTML tags
HTML 요소에 적용 가능한 CSS 속성들은 여러가지가 있는데 이 중에서 몇개는 기본적으로 HTML 태그안에 적용되어 굳이 CSS를 추가해주지 않아도 어떠한 스타일을 적용해줄 수 있는 경우가 있다. eg) <em> <strong> <h1> etc...
이때 CSS를 사용하면 이들의 기본적인 스타일을 완전히 새롭게 만들어 전혀 다른 태그로 나타난 것처럼의 결과를 나타낼 수도 있다. 그말은 CSS는 전체적으로 스타일을 적용하는데 있어 끝판왕인 역할을 하게 되어 개발자들에게 스타일을 직접 고를 수 있는 가능성을 제공한다. 예를들면 다음과 같다.
만약 <em> 태그를 이용할시 이는 별도의 CSS없이 이탤릭체를 텍스트에 적용하는 것이 가능하다. 그렇지만 <em>을 사용하고도 이탤릭체를 적용하고 싶지 않고 오히려 볼드체를 적용하여 전혀 다른 모양의 텍스트를 구성하고 싶다면 이는 CSS로 수정가능하다.
em {
font-style: normal;
color: #FF0000;
font-weight: bold;
border: 1px solid #000000;
}
이렇게 CSS를 작성하여 <em> 태그에 이러한 스타일을 적용해주세요 라고 작성한다음 HTML 파일에 다음과 같이 적으면 어떠한 현상이 일어날까?
<em> Here is some italicised text</em>
본래 이렇게 작성하면 CSS가 적용되지 않았을때는 아래와 같은 결과가 나타나야 한다.
그렇지만 CSS가 <em>태그에 특정 값이 지정되었으므로 전혀 다른 결과가 나타날 것이다.
이와 같은 예시도 있듯이 이는 <em> 태그 뿐만이 아닌 어느 HTML 태그에서 CSS를 지정하면 HTML태그 안에 있는 요소들의 스타일이 CSS에 맞게끔 변한다.
CSS:
section { /* section안에 있는 모든 요소를 */
background-color: #cccccc; /* 백그라운드 컬러 */
border: 8px solid #000000; /* 테두리: 굵기, 선 모양, 색상 */
width: 800px; /* 가로값 */
height: 500px; /* 세로값 */
margin: auto; /* 바깥쪽 여백 */
padding: 10px; /* 안쪽 여백 */
}
em { /* em안에 있는 모든 요소들 */
font-style: normal; /* 폰트 스타일 */
color: #ff0000; /* 텍스트 색상 */
font-weight: bold; /* 폰트 굵기 */
border: 1px solid #000000; /* 테두리: 굵기, 선 모양, 색상 */
}
HTML:
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis
mi a nulla eleifend vitae sagittis liberoimperdiet. Vivamus consequat
risus</strong> sit amet <em>tortor laoreet</em> vitae mattis enim
ornare.</p>
</section>
윗 코드로 웹 페이지를 생성했을때 이러한 효과를 나타내게 된다.
3. Anatomy of CSS Rules
이때 우리가 CSS중에서 가장 중요하게 배워야하는 Class와 ID에 대해 들어가기전 CSS에 어느적인 규칙과 낱말들을 알아야 나중에 배울 jQuery에서도 유용하게 쓸 수 있다.
CSS는 기본적으로 이 세 개의 Component (구성 요소)들로 이루어져 있는데 이는 다음과 같다.
- Selector
- Property
- Value
Selector
Selector는 CSS에서 개발자가 스타일하고 싶은 요소들의 패턴을 의미한다. 이는 방금전 CSS 코드블럭에서 보여졌던 section과 em이 Selector에 해당되며 Selector에 해당되는 요소들은 그 다음 적혀지는 스타일들을 그대로 적용하기 시작한다.
Property and Value
우선 Selector을 골랐다면 그 다음으로 특정 property에 value를 집어넣어 표출해낼 특징들을 잡아낼 수 있다. Property의 종류로는 다음과 같다.
- width (너비)
- height (높이)
- border (테두리)
- background-color (배경 색상)
- font-size (폰트 크기)
- float (부유)
- margin (바깥쪽 여백)
- padding (안쪽 여백)
- color (폰트 컬러)
자세한건 이 링크를 통해 전부 확인할 수 있다.
https://www.w3schools.com/cssref/default.asp
CSS Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Overview
CSS의 기초적인 코드 구조로는 아래와 같이 이루어 지며 하나의 Selector안에 여러개의 Property들을 설정하여 효과들을 여러개 적용할 수 있다. 여기서 중요한 사실은 CSS를 작성할 때 무조건:
- Colon (콜론)을 property 이름 뒤어 무조건 적어 value와 구분 가능하게 해야 한다.
- Semi-colon (세미콜론)을 value끝에 무조건 적어두어 selector안 여러개의 property들을 구분할 수 있게끔 해야 한다.
- CSS를 작성할 때는 미국식 영어를 써넣어야 한다. 영국식/호주식 영어는 CSS에서 감지하지 못한다. eg) colour (x), color (o)
- 만약 Property의 이름이 한 단어 이상이라면 보통 hyphen (하이픈)을 사이에 집어넣어 CSS가 알아차릴 수 있도록 해라. eg) background-color, font-size
selector {
property: value;
property: value;
property: value;
}
4. CSS Rules - Classes
Class는 Selector의 한 종류로써 Selector으로 HTML 태그 이름을 불러오는 것이 아닌 직접 개발자가 HTML 태그 안에서 임의로 이름을 붙여두어 CSS로 불러올 수 있게끔 하는 것이다. Class를 CSS상에서 불러오려면 무조건적으로 . 점을 앞에 찍어야 브라우저가 인식할 수 있으며 이는 다음과 같이 코드로 작성할 수 있다.
.odd {
background-color: #222222;
color: #ffffff;
}
.evens {
background-color: #FFFFFF;
color: #222222;
}
이때 적힌 odd와 evens는 각기 HTML에서 Class로 지정된 Selector로써 각기 odd와 evens라는 class가 적용된 요소는 따라오는 Property들을 적용하여 스타일적으로 변화를 나타내게 한다. 만약 이 Class들을 HTML에 써준다면 다음과 같이 써넣어줄 수 있다.
<p class="odds">Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ut mattis mi a nulla eleifend vitae sagittis libero
imperdiet.</p>
<p class="evens">Vivamus consequat risus sit amet tortor laoreet
vitae mattis enim ornare. Suspendisse rhoncus sagittis urna quis
sodales.</p>
<p class="odds">Quisque pharetra arcu eu ipsum iaculis ac auctor ante
posuere. Integer urna dui, tristique eu consequat id, fermentum ac
arcu.</p>
<p class="evens">Integer cursus metus sit amet erat tempus eu
pulvinar justo congue. Sed vitae mi id purus auctor pulvinar.</p>
Class는 HTML을 작성할때 태그 안에 class라는 attribute를 사용하여 class=" "이런식으로 정의되는 것을 알 수 있으며 CSS에서 selector을 작성할때 작성한 class를 .뒤에 써 넣어 특정 스타일을 적용할 수 있다.
위에 설명한 모든것을 다 하고나면 궁금한게 생길 수 있다. 그렇다면 하나의 태그 안에 여러개의 Class를 지정할 수 있을까? 이는 가능하다. 간단하게 class attribute안에 두 개의 다른 class를 띄어쓰기로 구분하여 두개를 한번에 지정할 수 있다. 다음과 같다. 아랫 코드를 보면class attribute안에 odds와 anotherclass 두 개의 각기 다른 Class가 한번에 들어가져 selector에 둘 중에 하나에 property를 적용해도 해당 텍스트에 스타일이 적용되게끔 만들어 줄 수 있다.
<p class="odds anotherclass">some text</p>
5. CSS Rules - ID
마지막으로 배울 Selector의 종류는 ID로써 Class와 아주 비슷하게 작용한다. 이는 Class와 작성방식이 완전 동일하지만 단 한가지만 유의해야 한다. 이는 CSS에서 ID를 불러올때는 Class와는 달리 .이 아닌 #로써 selector을 작성해야 하는 것이다. 이는 다음과 같다.
#first {
color: #ff33aa;
font-size: 18px;
}
HTML에서 ID를 적용하는 방법은 앞서 말했듯이 Class와 동일하다. 대신 Attribute 이름이 다르다.
<section id="first"> ... </section>
Difference between ID and Class
그렇다면 Selector를 쓰는 방식말고 도대체 Class말고 ID를 써야 하는 이유는 무엇인가? 이는 횟수에 있다. Class는 HTML 파일 내에서 동일한 Class를 여러개 쓸 수 있는것과는 다르게 ID는 오직 하나의 ID만 쓸 수 있다. 이는 HTML의 특정 요소에 유니크한 이름을 붙여줄 수 있기 때문이다. 이는 jQuery와 CSS를 쓸때 아주 유용하게 작용된다. 예를 들면 특정 페이지로 향하는 Navigation bar를 만들 때 그 페이지의 있는 이름이 다른것과 중복될 수 없게 하도록 Class대신 ID를 써 넣을 수 있다.
ID tricks
ID는 앞서 마랬듯이 Class와는 다른 특징을 가짐으로써 특별한 브라우저 기능을 가질 수 있다. 만약 http://www.mysite.com/about.html#comments 라고 적혀 있으면 브라우저는 웹페이지안 comments라는 ID를 가진 요소를 찾아 자동적으로 스크롤 해줄 것이다. 이는 나중에 배울 jQuery로 작동 가능하며 이러한 기능들을 추구하기 위해 ID라는 유니크한 요소의 이름을 붙이는것이 아주 중요하게 여겨진다.
ID는 기본적으로 HTML 파일 내에 하나의 ID만 들어갈 수 있지만 하나의 태그안에 ID와 Class를 둘 다 집어넣는 것은 가능하다.
<section id="first" class="comment"> ... </section>
즉, 특정 CSS 스타일을 여러개의 HTML 요소에 지정하고 싶을때는 Class를 써야 하고 특정 HTML요소에 하나의 스타일만 지정하고 싶을때는 ID를 써야 한다. 물론 스타일링을 할때 Class로 할 수 있는 것들은 ID로도 다 가능하다 (반대로 ID로 할 수 있는 것들은 Class로 불가능하다) 그렇지만 jQuery에 접근할때 특정 요소를 독립적으로 수행하게끔 만들어주거나 CSS상에서 특정 요소에만 유니크하게 스타일을 적용하고 싶을때 활용가능하므로 Class와 ID 두 가지를 잘 구분하여 웹 개발을 하는 것이 아주 중요하다.
6. Nesting CSS
이번 단원에서 마지막으로 배우는 CSS의 중첩은 HTML의 중첩과 비슷하게 타겟이 되는 Selector을 더욱 세부화시키는 것이 가능하다. 만약 HTML이 아래와 같은 형식으로 작성되었을때 특정 부분 (예를 들면 첫 번째<ul>)에만 스타일을 적용하고 싶다면 CSS의 중첩은 필연적이다.
<section id="first">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</section>
<section id="second">
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</section>
이때 만약 두 번째 말고 첫 번째 <ul> 태그 안에 있는 요소에만 스타일을 적용하고 싶다면 CSS의 중첩을 필요로 한다. 만약 세부적인 CSS Selector의 설정 없이 그냥 ul이라고 작성하면 처음에 작성된 <ul>태그 안에 있는 요소도 스타일을 적용할 것이므로 원하는 결과를 나오지 못하게 만든다. CSS의 중첩은 아래와 같이 작성이 가능하다.
이때 아래에 쓰여진 Selector의 의미는 first라는 ID를 가진 <section> 태그 안의 <ul> 태그를 찾아 스타일을 먹여라라는 의미가 된다. 이때 CSS Selector가 얼마나 구체적으로 HTML의 특정 요소를 찾아주는 지 알 수 있다. 이때 특정 Tag의 Class나 ID를 쓸때에는 띄어쓰기를 하지 않고 작성하는데 Tag안의 Tag는 띄어쓰기를 하여 구분을 할 수 있게끔 해야 한다. 예시로 다음과 같다.
section#first ul {
...;
}
CSS의 중첩은 특히 하이퍼링크를 스타일링을 하는데 있어 특히 효과적인데 이는 Navigation bar의 링크가 페이지 텍스트의 링크와 다르게 표시되기를 원할 수 있으므로 특히 유용하다.
그리고 또한 HTML이 항상 semantically (의미적으로) 알맞게 (즉 HTML의 중첩을 제대로 하게끔) 구성하게끔 웹 디자인을 하는것이 중요한데 예를 들어 만약 <h1> 태그가 <header>또한 <section> 두 개의 다른 태그들 안에 각기 둘 다 들어가 있을시에 HTML의 제대로된 중첩은 CSS에서 중첩을 하기 더욱 쉬워지게 만들기 때문이다. 아래에서 h1은 heading (제목)을 의미하게 되는데 CSS에서의 중첩에 따라 스타일이 같은 태그라도 달라지게 되므로 HTML 코드 내부에서 어떻게 semantic placement (중첩의 구조)가 이루어 졌냐에 따라 결과가 달라지는 것을 볼 수 있다.
header h1 {
...;
}
section h1 {
...;
}
지금까지 HTML과 CSS에 대해 간략하게 살펴 보았다. 웹 개발의 아주 기초적이고 필수적인 단계로써 이 들을 완전하게 이해를 해야 다음 단계로 넘어갈 수 있다고 생각한다. 다음부턴 CSS의 Property중 하나인 position에 대해 더욱 파고들어 CSS로 어떠한 스타일을 구체적으로 줄 수 있는지 탐구해 보겠다.
p.s.
이는 내가 공부함에 있어 충격을 먹었던 사실인데 내 블로그도 마찬가지고 다른 웹페이지에서의 코드 블럭을 무턱대고 복사하여 코드를 작성하려고 할 때 자주 생기는 문제로써 attribute 뒤에 오는 Quatation Marks (따옴표)의 구분을 잘 해야 한다. 컴퓨터 상에서 따옴표는 두 개가 있는데 이는 각 "과 ”로써 유저가 한눈에 구분하기 힘들다. 이로써 문제도 없는 다른 코드의 구성요소들을 막 수정함으로써 시간만 보내는 경우가 허다하게 된다. 그러므로 무언가 attribute관련된것이 포함된 코드를 작성하였을때 원하는 결과가 나오지 않는다면 따옴표부터 확인하는 것을 권장한다.
<!-- 이러한 attribute가 들어간 코드를 작성할때 특히 조심해야 한다. -->
<section id="first"> ... </section>
- 이때 올바른 따옴표는 "
- 올바르지 않는 따옴표는 ” 이다.
'Web Design & Development > Front End_Web Development' 카테고리의 다른 글
| Module 6 - Google Fonts & scrollTop (1) | 2022.09.23 |
|---|---|
| Module 5 - jQuery and the DOM (1) | 2022.09.23 |
| Module 4 - Introducing jQuery (1) | 2022.09.22 |
| Module 3 - New Positions (1) | 2022.09.21 |
| Module 1 – HTML Refresher (1) | 2022.09.21 |