본 내용은 아래의 강의를 토대로 하여 작성하였습니다.
링크:https://opentutorials.org/course/3086
WEB2 - CSS - 생활코딩
수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인
opentutorials.org
1. 강의 내용
CSS가 등장한 배경
web이 처음에 등장했을 때, HTML만 있었다. HTML은 당시에는 매우 획기적이었다. 컴퓨터를 통해 문서처럼 정보를 표현할 수 있게 되었고 인터넷을 통해서 전 세계의 누구나 볼 수 있게 되었다. 하지만, 사람들은 HTML에 서서히 불편함을 느끼기 시작했다. 심미성이라는 측면에서 HTML은 너무나도 투박하고 비효율적이었기 때문이다. 이에 반응해서 디자인 기능을 가진 몇몇 태그들이 등장했으나 사람들을 만족시키기에는 턱없이 부족했다. 그리고 이러한 HTML의 단점을 극복하기 위해서 CSS(Cascading Style Sheets)라는 새로운 언어가 등장하게 되었다.
CSS의 문법
CSS는 HTML과 다른 언어이므로 이 언어를 사용한다고 컴퓨터에게 알려주어야 한다. 이럴 때는 html의 <head> 태그 사이에 <style> 태그를 쓴다.
<style>
a{color:red;}
</style>
a: 선택자 여기서는 하이퍼링크 태그인 a가 선택자이다.
{color:red;}: 효과(선언)
세미콜론: 구분자. 효과 하나가 끝나면 ;로 구분해야만 한다.
CSS도 수많은 속성들이 있다. 하나하나 외우기란 불가능한 일이다. 필요할 때마다 구글에서
Css text size property
라고 검색해서 필요한 속성을 찾는다. 생활코딩이 말씀하시길, 개발자의 중요한 소양 중 하나는 검색 능력이라고 하셨다.
CSS의 장점
CSS는 웹 페이지의 <head>에서 사용되어, 선택자들에 한에서 해당 효과(선언)들을 적용할 수 있다. HTML와의 비교 예시를 들어보자. 만약 내가 HTML밖에 모르는 상태이다. 그리고 나는 1억 줄이 있는 웹페이지를 관리하고 있다. 내 직장상사가 나에게로 와서 <a> 태그가 사용된 부분들을 빨간색상으로 적용하라고 시켰다. 나는 당연히 하겠다고 대답하고 착수할 것이다. 그리고 1억 줄이 되는 웹페이지의 수많은 <a> 태그를 하나하나 눈이 빠져라 찾고 각각에 <font> 태그로 색상을 적용할 것이다. 아마 내 생에 마지막 작업이 될 것이고 비극적인 일이다.
HTML강의에서 말했듯이, 사람과 기계가 하는 일을 구분해야 한다고 했다. 이런 반복적인 작업은 기계가 하는 것이 지당한 일이다. 그렇다. 바로 이러한 경우 CSS를 사용한다면, 아주 짧은 시간 안에 수많은 <a> 태그의 폰트 색상을 바꿀 수 있다. 생산성이 비약적으로 증가하는 것이다.
정리하자면 CSS의 장점은 아래 두 가지와 같다.
-
디자인 기능
-
반복적인 작업에서의 효율성
선택자의 응용
id, class, tag
예를 들어, 어느 페이지에 들어와 있다. 그리고 해당 페이지의 하이퍼링크를 들어왔다는 표시로 빨간색 속성을 부여하고 싶다. 하이퍼링크 태그인 <a>를 선택자로 빨간 폰트 속성을 부여하면 모든 하이퍼링크 태그가 있는 부분들은 빨간색으로 변해버려서 원하는 결과를 낼 수 없다. 이럴 때는 어떻게 할까?
CSS는 선택자를 개별적으로 지정할 수 있다. 이 선택자들은 id, class, tag가 있다. 선택자를 지정하는 방법은 아래와 같다.
<a href="링크" id="active"> 내용 </a>
이제 저 하이퍼링크가 적용된 내용은 id가 작동되었다는 의미인 active라는 선택자를 가지게 된 것이다. 여기서, 선택자 명은 원하는 대로 지정할 수 있다. 상황에 따라 지정하면 된다.
그리고 이 지정된 선택자에 속성을 부여하는 방법은 아래와 같다.
<style>
#active {color:red;}
</style>
이렇게 하면 처음에 원했던 결과대로 해당 페이지의 하이퍼링크만 빨간색으로 될 것이다.
선택자의 우선순위
그렇다면 id, class, tag의 선택자들은 무슨 차이가 있을까? 바로 우선순위다. 어떤 태그가 id와 class가 지정되어있으면 그 태그는 id를 우선으로 속성이 적용된다. class와 tag가 지정되어있으면 class를 우선으로 속성이 적용된다. 즉 id> class> tag순으로 우선순위를 가진다. 복잡한 조건으로 속성을 주고 싶은 경우에 이를 응용하면 된다.
참고로, Css selector를 검색하면 여러 가지 선택자들의 예시가 나온다.
인라인과 블록
태그마다 숨겨진 속성이 있다. 바로, 인라인과 블록이다. 인라인은 화면 전체를 사용하는 것이다. 반면에, 블록은 해당 태그 주변만 사용하는 것이다.
위의 그림을 보자. 내가 line에는 <h1> 태그를 block에는 <strong> 태그를 적용시킨 후 css로 각각
{
border:red solid 5px;
}
를 적용시켰다. 그 결과 line의 테두리는 화면 전체를 차지하고 block의 테두리는 해당 텍스트 근처에만 차지하는 것을 알 수 있다.
여기에서 display속성을 이용해서 inline, block을 각각 적용할 수도 있다.
박스 모델
무언가를 꾸밀 때 각 부분이 정해져 있지 않다면 대단히 어려울 것이다. 우리도 꾸며 입을 때, 상의, 하의, 신발 등등 을 구분하며 입는 것처럼 CSS에서도 부분의 개념이 있다. 바로 박스 모델이다.
위의 그림이 바로 박스 모델이다. Content를 중심으로 Padding, Border, Margin이 있다. CSS를 만지면서 수도 없이 보게 될 녀석들이니 잘 기억하자.
소스보기 기능
고맙게도, 우리가 사용하는 브라우저들에는 개발자들을 위해서 소스보기 기능이 있다. CSS를 다루며 웹페이지를 꾸밀 때 아주 유용하게 쓸 수 있다.
소스보기 기능을 사용하면, 위처럼 해당 웹페이지에 사용된 CSS와 HTML을 볼 수 있다. 박스 모델도 볼 수 있으니 수시로 체크하면서 웹페이지의 디테일을 조절할 수 있다.
효율적으로 코딩하기
코딩에서 반복의 최소 하는 필수이다.
h1, a {border-width:5px;border-color:red;border-style: solid}
위처럼 선택자를 컴마를 사용해서 두 개 이상을 지정할 수 있다. 또 속성에서 ;(세미콜론)을 사용해서 중복을 줄일 수 있다.
border:5px solid red로 줄이면 좀 더 효율적이고 깔끔한 처리라고 할 수 있다.
그리드
그리드는 CSS로 구현할 수 있는 레이아웃이다. 말 그대로 격자 형태로 웹페이지를 만들 수 있다. 예시를 아래 보여주겠다.
<head>
<style>
#grid{ display: grid; grid-template-columns: 150px 1fr; }
</style>
</head>
<body>
<div id="grid">
<ol>
<li><a href="1.html">Siru</a></li>
<li><a href="2.html" id="active">Food</a></li>
<li><a href="3.html">Toy</a></li>
</ol>
<div id="article">
<h2>시루는 건식,습식 둘 다 먹는다 </h2>
습식은 오전 6시와 오후 6시 하루 두 번 적당량을 먹고
건식은 전용그릇에 평평하게 채울 정도로 매번 채워서 자율급식을 한다.
간식은 하루에 1번 챠오츄르를 2~3번정도 템테이션을 총 15개 정도 준다.
</div>
</div>
</body>
우선 격자를 만들 전체 컨텐츠에 <div> 태그로 감싸준다. 이 태그는 그리드의 격자를 나누는 역할이라고 보면 된다. 그리드를 1행 2열로 만들 것이므로 위 처럼 태그를 적용해놓는다. 그리고 전체를 감싼 <div> 에 id를 부여하고 <style>태그 안에서 display속성을 gird로 준다.
{ display: grid; grid-template-columns: 150px 1fr; }
그리고 위처럼 columns의 간격을 각각 정해준다. 여기서. 1fr은 150px를 제외한 나머지를 해당 칸에 할당한다는 의미이다. 이것을 적용한 페이지는 아래와 같다. 기존 페이지는 왼쪽의 목차와 오른쪽의 본문이 상하로 나타난다. 비교해보자.
미디어 쿼리
좋은 웹 페이지들은 사용자와 상호작용하는 것을 필수로 한다. 그중 대표적인 것으로 미디어 쿼리를 들 수 있다. 미디어쿼리는 화면에 크기에 따라 웹페이지의 각 요소들이 최적화 되어서 바뀌는 것이다. 지금은 미디어 쿼리를 사용해서, 웹페이지의 창이 작으면 그리드를 없애는 상호작용을 추가할 것이다.
|
@media(min-width:800px) { div{ display:none; } } |
@media(max-width:800px) { div{ display:none; } } |
위와 같은 명령어를 <style> 태그안에 넣으면 된다. 왼쪽은 창의 크기가 800픽셀 위일때 그리드를 없앤다는 의미고 오른쪽은 창의 크기가 800픽셀 아래일때 그리드를 없앤다는 의미다. 우리가 원하는 것은 창이 작을 때 그리드를 없애는 것이므로 오른쪽을 선택하면 된다.
효율적으로 코딩하기2
웹페이지가 많을 경우 그 페이지마다 CSS를 입력하는 것은 비효율적이다. 아래를 사용하면 효율적으로 웹페이지를 설정할 수 있을 것이다.
<link rel="stylesheet" href="style.css">
우선, 전체 페이지에 적용할 CSS명령어를 별도의 페이지로 만들어 놓는다. 확장자는 위를 참고해보면, CSS이다. 그리고 위 명령어를 <style>태그 안에 링크를 걸어주면 각 페이지는 style.css 라는 명령어들이 적용이 된다.
중복의 제거는 사용성을 높게 한다. 1억 개의 웹페이지가 있어도 CSS파일만 변경하면 되기 때문이다. 전체적인 코드의 양이 줄었으므로 효율이 늘어나는 경제적 효과가 생긴다.
2. 느낀 점
기술의 발전은 인간의 욕망으로 인해 일어난다. CSS 역시 HTML의 불편함을 해결하고 싶다는 인간의 욕망에서부터 등장하게 된 언어이다. 그러므로 CSS는 웹페이지를 꾸미고 코딩을 좀 더 효율적으로 할 수 있게 하였다.
하지만, 나는 CSS를 직접 실습해보면서 약간은 불만족을 느꼈다. HTML만 배웠을 때와 달리 좀 더 웹 페이지를 생동감 있게 표현할 수 있게 되었지만, 내가 좋아하는 웹페이지들의 발끝도 못 따라가기 때문이다. 좀 더 동적이고 다양한 기능을 가진 웹페이지를 만들고 싶다는 생각이 들었다. 그러므로 아마 내가 다음에 배울 언어는 JavaScript일 것이다. 아, 그전에 Git부터 배우고... TIL페이지를 만드는 게 일단은 우선이기에...
3. 명령어
HTML
<font color ="red"> </font>
폰트의 색상을 해당 색상으로 한다.
<!-- -->
기호 사이의 내용은 없는 취급.
<style> </style>
css코드를 쓴다는 태그.
CSS
{color:red}
선택자의 색상 적용
{Text-decoration: none;} 글자 효과 지우기
underline 및줄
<a href="링크" id="active"> 내용 </a>
id 지정
#active{color:red;} id지정 선택자 속성 적용하기.
.class class의경우는 .이 붙는다.
{Border-width:5px} 경계선 추가 5px의 두께
-color:red 빨간색
-style:solid 단색으로 표현
/* */ css의 주석
#grid{ display: grid; grid-template-columns: 150px 1fr; }
그리드 설정(상세 위 참고)
@media(min-width:800px) {
div{
display:none;
}
}
미디어쿼리(상세 위 참고)
<link rel="stylesheet" href="style.css">
페이지 css링크(상세 위 참고)
'programming study > HTML, CSS' 카테고리의 다른 글
| [코드잇] HTML/CSS 핵심개념 (2)(2021.2.17) (0) | 2021.02.17 |
|---|---|
| [코드잇] HTML/CSS 핵심개념 (1)(2021.2.17) (0) | 2021.02.17 |
| [코드잇] HTML/CSS 시작하기 (2)(2021.2.11) (0) | 2021.02.11 |
| [코드잇] HTML/CSS 시작하기 (1)(2021.2.11) (0) | 2021.02.11 |
| [생활코딩]WEB1-HTML & Internet (2020.11.28~29) (0) | 2020.12.04 |
