1강.
HTML은 정보를 표현하기 위해서 고안된 언어이다.하지만 사람들은 정보만으로 못산다고 불평을 쏟아낸다.
2강.CSS 등장 이전의 상황
불평(문서의글꼴,색상,정렬 등등등) 을 해결하기위해 2가지 방법이 있다.
1.HTML에 디자인에 대한 새로운 태그를 추가하는것이 쉬운길.
웹브라우저를 만든사람들은 쉬운 길을 선택. 하지만 한계를 깨닫고 어렵지만
근본 적인 해결책을 찾는다 그게 바로 CSS라는 언어
2. 디자인에 최적화된 완전히 새로운 언어 - CSS 어렵지만 근본적인 해결책.
CSS를 살펴보기전에 쉽지만 한계가 있었던 방법을 먼저 살펴보자.
지금은 사용되지않는 디자인 태그.
<font> 지금은 사용x 이번 한번만 쓰고 기억에서 지우자.
<h1><a href="index.html"><font color="red">WEB</font></a></h1>
<ol>
<li><a href="1.html"><font color="red">HTML</font></a></li>
<li><a href="2.html"><font color="red">CSS</font></a></li>
<li><a href="3.html"><font color="red">JavaScript</font></a></li>
</ol>WEB
font 태그 로 다른색깔을 표현할 수 있다.
처음에는 색깔을 바꿀수 있는 걸로 너무 행복하고 좋았다. 하지만
웹페이지가 많아지고 웹이라는 기술이 중요해짐에 따라 이런 방식의 한계를 느낀다.
a태그는 WEB이라고 하는 정보가 링크라고 설명하는 정보이다.
h1태그는 WEB이라고 하는 정보가 제목이다라고 설명하는 정보이다.
정보를 해석해서 검색엔진과 같은 시스템들이 우리가 필요한 정보를 찾아준다.
font 태그는 WEB이라는 정보에 대해서 어떠한 정보도 가지고 있지 않다. 다만,빨간색으로 표현 해야 한다라는 디자인을 나타낼뿐. 디자인은 중요하지만. 디자인 자체가 정보라고는 할수없다. 예를들어 시각 장애인분들이 봤을때 의미가 없을때 정보가 아닌것처럼..
그래서 WEB이라는 정보안에 정보가 아니라고 할수있는 디자인에 대한 코드가 섞이면서 웹페이지가 정보로서의 가치가 현격하게 떨어지는 문제를 갖게된다.
우리가 짠 코드에는 또다른 문제가있다.<a>태그가 4개있다.만약 1억개가 있다면? 1억개의 a태그를 누군가가 와서 하루는 빨간색,그다음날엔 검은색,그다음날엔 들어본적도없는 파우더블루라는 색을 바꾸라고 누군가가 매일같이 요청한다면 우리는 굉장히 불안해질 것이다. 그 불안감은 우리가 공부를 지속하는데 있어서 굉장한 에너지원이라고 생각한다. 우리가 이러한 상황에서 충분히 절망했다면 이 상황을 극복하게 해주는 놀라는 기술인 CSS를 배웠을때 해방된 느낌을 받게 될 것이다. 그 만큼 CSS 라는 것이 귀하게 느껴질것이다.
3강.CSS의 등장
이번시간엔 태그를 추가하는것보다 훨씬 더 어렵지만 근본적인 해결책인 CSS가 등장한다.
웹브라우저가 처음나왔을때 웹브라우저는 어떤 컴퓨터 언어만을 해석해서 처리하는 프로그램이였을까? HTML이다.
CSS는 HTML과 완전히 다른 컴퓨터 언어이다.그러면 우리가 웹브라우저한테 웹브라우저야! 지금부터 우리가 CSS를 코드를 쓸거니까 너는 이코드를 HTML이 아니라 CSS의 문법에 따라 해석해야돼. 라고 우리는 HTML의 문법으로 얘기해줘야 한다.<style> </style>이라고 하는 태그를 쓰면 <style>이라는 태그는 HTML의 문법이면서 동시에 웹브라우저의 <style>태그의 안쪽의 내용은 CSS니까 너는 이것을 CSS 라는 언어의 문법에 맞게 해석해서 처리해야돼. 라는 의미 인 것이다.
웹브라우저야! 이 웹브라우저의 모든 a태그에 대해서 : a { }
a {
color: red;
}
: 폰트 컬러 는 css 에서 color 이다
위에있는 폰트 태그와 똑같은 결과를 만들어 냄.
즉, 결과는 같지만 이 결과에 도달하기 위해서 우리가 작성한 코드는 예전에는 html의태그였고 , 이번에는 css라는 새로운 언어의 문법이였다. 그러면 css와 html을 놓고 봤을때 뭐가 더 공부하기 어려울까? 당연히 css다. 학습자 입장에서는 부담이다.웹브라우저 입장에서는 폰트 태그는 그냥 태그만 추가하면되지만 하지만 css는 새로운 언어를 해석하는 기능을 탑재해야되기 떄문에 굉장히 어려운일 이다.그럼에도 불구하고 css 를 사용하는 이유는 css를 사용할때 이러한 과정들을 뛰어넘는 폭발적인 효과가 있기때문이다. 만약 이전의 font태그의 경우에는 레드라는 값을 블랙으로 바꾸고 폰트 태그가 1억개가 있다면 1억개를 다바꿔야한다. 하지만 css가 있으면
a {
color: black;
}
으로 바꾸기만 한다면 a태그가 1억개가있건 10억개가 있건 순식간에 바뀌는 폭발적인 효과를 갖게 되는거다.
굉장히 놀라운일이다.
코딩을 잘하는법:1.중복의 제거 : <font color="red"> ~ </font>태그가 중복해서 등장하고있다. css를 통해서 이 중복된 코드를 단 하나의 코드를 통해서 이 중복들을 제거할수 있다. 이 중복들이 1억개라고한다면 효과는 훨씬 더 커질 것이다.
중복의 제거의 장점:
보는 폰트 태그가 1억개가 존재한다면 웹페이지의 사이즈는 훨씬 더 클 것 이다. 그리고 그 사이즈를 하루에 한번 정도 접속하는 사이트라면 상관이 없지만, 구글이나 네이버 등과같은 거대한 기업이라고 한다면 저런 중복된 코드가 있냐 없냐에따라서 하루에 1억씩 차이가 날수 가 있다. 굉장히 중요한 문제이다.
그리고
a {
color: red;
}
이런식으로 누군가가 코드를 써놨다면 아마도 a태그는 같은 성격의 것으로 생각할 수 있다. 다시말해서 이 웹페이지를 유지보수를 훨씬 더 편리하게 할수 있고,가독성도 훨씬 더 높아진다.
즉,CSS라는 기술 등장하면서 우리가 얻을 수 있는 폭발적 효과는 웹페이지를 디자인하는것이 기존의 HTML을 이용해서 디자인하는것보다 훨씬 더 효과적이 될 수 있다. 이것이 css를 사용하는 매우 중요한 이유이다.
그리고 또한가지
4강. 혁명적 변화
속성의 기본
웹페이지에다가 우리가 css를 포함시키 위해서는 html과 css가 완전히 다른언어이기 때문에 웹브라우저로 하여금 어디서부터 어디까지가 css 인지를 알 수 있게 해줘야한다.
그방법은 우리가 앞에서 배운거에따르면
이 스타일 이라는 태그가 그런 역할을 한다.
이 방법 외에 한가지 방법이 더있다. 태그를 통해서하는것이 아니라 속성을 이용하는 방법이 있다.
우리의 예제에서 CSS라는 링크를 클릭하고 이 페이지에 있다라는 뜻에서 CSS 텍스트를 레드로 표현하고싶다.
CSS라는 링크를 감싸고 있는 a태그 에다가 직접 css코드를 넣을것이다. <li><a href="2.html" color:red>CSS</a></li>
이렇게만 하면 웹브라우저의 입장에서 html인지 css인지 알 수가 없다.
그래서 html과 css를 만든 사람들은 저기 있는 태그에 대해서 어떤 css에 효과를 주고 싶으면 스타일 이라는 속성을 사용하도록 약속했다.
<li><a href="2.html" style="color:red">CSS</a></li>
style 이라는 속성은 html과 css의 사용설명서에 적혀있다. style 이라는 속성을 쓰면 그 속성의 값을 웹 브라우저는 css의 문법에 따라 해석해서 css의 문법에 따라 해석된 결과를 스타일 속성이 위치하고 있는 이 태그에게 적용할 것이다.
그래서 style="color:red"
노란색 부분은
html 일까? css 일까?
답은 html 의 속성 이다. 그리고 저 style이라는 속성은 어떤 약속이 되있냐면 속성의 값으로 css의 효과가 들어온다.
<style>
a {
color:black;
}
</style>
반대로 이 스타일이라는 태그는 노란색부분(효과)만 있어서는 저 효과를 누구에게 지정 해줄지를 설명할수가없기때문에
연두색부분이 필요한것이다. 연두색부분은 이 웹페이지에서 우리가 지금 주고 싶은 효과를 누구에게 줄것인가를 선택한다라는점에서 선택자라고 부른다.영어로는 selector라고부름. 노란색부분은 효과라고도하고 영어로는 Declaration이라고 부른다.Declaration은 한국어로 선언이라는 의미가있다.
<li><a href="2.html" style="color:red">CSS</a></li>
빨간 부분처럼 스타일 속성을 사용한 경우에는 스타일 속성이 위치하고있는 태그에게 효과를 줄것이기 때문에 선택자라는 것을 사용할 필요가없다.
우리는 웹페이지에다가 css를 삽입하는 2가지 방법
1. 스타일태그사용
<style>
a {
color:black;
}
</style>
2. 스타일속성을사용
<li><a href="2.html" style="color:red">CSS</a></li>
최종코드:
a 부분 : 선택자,selector라고 한다. 이 웹페이지의 모든a 태그들을 선택한다.
color:red; 부분 : 선언, declaration , 효과라고한다. 선택자가 지정하는 태그들에 대해서 어떤 효과를 줄것인가?
color 부분: 한국어로는 속성 영어로는 property라고 한다.
red 부분 : 한국어로는 프로퍼티의 값, 영어로는 property Value 라고 한다.
이것을 이해했다 라는 것은 굉장히 중요한 의미를 가진다.
이것을 이해하기전까지 우리는 무엇을 모르는지 모르는상태였다. 하지만 이것을 이해하게 된다면
이제 우리는 우리가 배우지 않은 선택자,아직 모르는 효과를 만나더래도 우리가 무엇을 모르는지를 아는 상태가 되었기
때문이다. 그러면 검색할 수 있고, 질문 할 수있고, 궁금해 하기 시작한다. 이것은 굉장히 중요한 혁명적 사건이다.
앞으로 우리가 배우게 될 어떤 어려운 css의 효과나 선택자도 지금까지 우리가 배운것만큼 우리에게 큰 변화를 줄 수 없다.
지금 까지 우리가 배운걸 바탕으로해서 살펴보면 우리는 2가지의 여정을 걷게된다.
1. css를 통해서 웹페이지를 디자인 하는 어떠한 프로퍼티가 존재하는가.
2. 그 효과를 더 정확하게 선택해서 지정하게 하기 위해서 우리는 다양한 선택자를 알아가는 여정을 갖게 될 것이다.
5강.CSS 속성을 스스로 알아내는 방법
효과를 나타내는 용어가 property라는 것을 알았으니 우리는 검색 할 수 있다.
자 우리는 저 WEB 이라는 제목을 크기를 키우고, 가운데 정렬하고 싶다.
우리는 자연스럽게 저 WEB이라는 텍스트가 어떤 태그인지 찾아야한다.
보이는가? WEB 이라는 텍스트는 h1태그이다.
저 h1 태그의 텍스트 사이즈를 키울려면 어떡해야하는가? 우리는 배우지 않았지만 property의 개념을 배웠다.
우리는 검색할 수있다. CSS text size property 라고 구글에 검색하자.
검색해 찾은 자료이다.텍스트의 크기는 키운 것 같으니
이제 가운데 정렬을 할 차례이다. 우리는 배우지 않았다. 하지만 property의 개념을 안다.
css text align center 이라고 구글에 검색하자.
그래서 나는
이렇게 코딩하였다. 그랬더니
WEB 이라는 텍스트의 크기가 커지고 가운데 정렬이 되었다.
우리가 정보 기술의 시대에 살지 않았다면 우리 머릿속에 모든 지식을 갖고 있어야 했었다. 왜냐하면 뭐가 필요할지
모르니까..하지만 지금 우리는 스마트폰,인터넷,컴퓨터,웹,검색엔진 이런 고도로 발전된 정보기술을 가지고있기 때문에
우리 머릿속에 font-size , text-align 이라는 구체적인 property를 가지고 있지 않는다 하더래도 이것들을 알아내는데 1분밖에 걸리지 않는다면 우리는 저것을 알고 있는것이나 다름없다. 이런 시대에도 우리가 이런 property들을 암기할 필요가 있을까? 나는 그렇게 생각하지 않는다. 특히나 요즘 에디터들은 추천을 해준다. 코딩은 인간 혼자 하는것이 아니라 끊임없이 기계의 도움을 받아가면서 코딩을 할 수 있다. 이 시대에도 이 모든 property들을 외우려 한다면 우리의 뇌는 혹사 당할 것이다. 우리는 property의 개념을 알았으므로 모든 property를 쓸 수 있는 것이나 다름이 없다.
6강.CSS 선택자를 스스로 알아내는 방법
CSS를 지배하는 중요한 2가지 토대가 있다.
1. 효과
2. 선택자
5강에선 효과를 배웠고 이번시간에는 선택자를 배울것이다.
(1)나는 모든 a태그들을 검은색으로 바꿀것이다. 그다음에 (2)사용자가 방문한 적이 있던 텍스트인 HTML과 CSS는 회색으로 바꾸고 싶다. 그다음에 (3)현재 사용자가 머물고 있는 CSS라는 링크는 현재 방문하고있다는 뜻에서 빨간색으로 바꾸고 싶다.
(1)그걸 하기 위한 첫번째 단계는 아래와 같다.
(2)그다음에 HTML 과 CSS 태그를 회색으로 바꿔야 한다.
우리가 이전시간에 배웠던 내용을 토대로는 아래와 같이 해주면 된다.
그런데 이렇게 되면 우리가 굉장히 불쾌하게 생각 하는 중복이 발생한다.
이 중복을 없애는 방법은 중복을 지우고 HTML과 CSS라는 텍스트를 같은 그룹으로 묶는것이다.
그 그룹에 대해서 폰트 컬러를 회색으로 줄 것이다.
그 방법은 2개의 태그에 대해서 class라는 html의 속성을 주는것이다. 그리고 속성 값으로 보았다라는 뜻에서 saw라고 주겠다.
즉 saw라고하는 클래스의 값을 가지는 태그 2개를 만들었다.
이제 우리가 할것은 saw라는 클래스 값을 가지고 있는 모든 태그에 대해서 폰트 컬러를 회색으로 주고싶다.
배운 것을 토대로 작성해보자. 아래와 같이 작성하였다.
하지만 웹페이지는 그대로이다. 왜일까?
위와 같이 작성한 코드의 의미는 이 웹 페이지에 대해서 모든 saw라는 이름의 태그를 가진 선택자인 것이다.
우리가 하고 싶은것은 클래스 값이 saw인 태그인데 그때 사용하는 약속된 기호가 바로 .(점)이다.
saw 앞에 .(점)을 붙이는 순간 저것은 저 선택자는 어떤 뜻을 갖게되냐면
이 웹페이지에 있는 모든 saw라는 클래스 값을 가지는 태그를 선택자가 된다.
class는 어떤 뜻이 있는가? 우리가 학교에서 반을 class라고 한다.
class라고 하는 이유는 같은 의도에 따라서 묶여있는 학생들을 그룹핑 할때 쓰는 말이 class 이다.
class라는 말 속에는 그룹핑하다,하나로 묶는다. 이런 의미를 가지고 있는 것이다.
(3)그다음에 현재 사용자가 머물고 있는 CSS라는 링크는 현재 방문하고있다는 뜻에서 빨간색으로 바꾸고 싶다.
어떻게 해야할까?
saw 옆에다 띄어쓰기 하고 active 라는 새로운 클래스 값을 줘보자. 그 후에
active 라는 클래스 값을 가진 선택자(.active)에 color: red; 라는 효과를 주자. 어떻게 될까?
우리가 원하는대로 현재 방문중인 페이지는 빨간색으로 표시되고 있다.
이걸 통해서 알수있는것은 class(클래스)의 속성의 값은 여러 개의 값이 들어올수 있고, 띄워쓰기로 구분한다는 것과
하나의 태그에는 여러개의 속성이 들어 올수있고 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어 할 수 있다 라는 것을 알 수 있다. 그러나 이 방법은 그렇게 좋은 방법이 아니다. 왜냐하면
CSS라는 텍스트를 가진 a태그는 2개의 클래스의 영향을 받고 있다. 그러나 a 태그는 왜 빨간색이 된 것일까?
그것은 바로 순서 때문이다. .active가 .saw보다 나중에 등장 했기 때문이다. 즉 보다 가까이에 있는 명령이 더 큰 영향력을 갖는다.
그래서 좀 더 우선순위가 높은 것을 사용할 필요가 있다. 그것이 뭐냐하면 바로 id 선택자이다.
CSS라는 텍스트를 가진 a태그에 id값을 active 라고 준 후
active의값을 가진 id 선택자는 #active 이다.
.saw 가 #active 보다 뒤에 등장했음에도 불구하고 CSS라는 텍스트는 빨간색이 된다.
즉, id 선택자와 class 선택자가 붙으면 id 선택자가 이긴다. 또한
class 선택자와 태그 선택자가 붙으면 class 선택자가 이긴다.
왜 태그 선택자와 클래스 선택자와 id 선택자가 있으면 왜 id 선택자가 가장 강할까?
id라는 속성의 값은 단 한번만 등장해야한다. 써도 웹 페이지가 동작하긴 하지만 쓰지 말라고 되어있다.
즉, id의 값은 단 한번만 등장해야 된다. 생각해보자 학교에서 id카드가 무엇인가? 학번이다. 국가에서는 주민등록번호이다. 이것의 핵심은 id 이고 id의 핵심은 중복되서는 안된다이다. 즉 이 문서에서는 active라는 id 값을 썻기 때문에 다른데서는 id 값이 active가 나오면 안된다. 즉, 유일무이 한 값이다.
이 웹페이지에 있는 모든 a태그를 가르키는 태그 선택자(a)와 이 웹페이지에서 id 값이 active 인것만을 가르키는 아이디 선택자(#active)중에서 뭐가 더 포괄적이고 구체적일까? 태그 선택자가 아이디 선택자보다 포괄적이다. 그래서 css 만든 사람들은 좀 더 구체적인 것이 포괄적인 것보다 우선순위를 높였다. 왜냐하면 그래야지만 태그 선택자를 통해서 전체적인 태그의 디자인을 쭉 하고 그중에 예외적인 것들에게만 id 값을 줘서 id 선택자를 통해서 예외를 두는 것이 아무래도 디자인 하고 코딩하는데 훨씬 더 효율적이기 때문이다.
css selector 라고 구글에 검색해보자.
우리는 이제 이러한 여러가지 형태들의 선택자들을 해석할 수 있는 기초적인 눈을 가졌다.
이러한 선택자들을 조합해서 우리는 우리가 원하는 효과를 아주 정교하게 어떠한 태그에 타겟팅 할 수 있고 그것을 통해서
우리가 작성하는 코드의 양을 획기적으로 줄일 수있고,동시에 어떤 한 부분만 수정하면 나머지가 수정되는 굉장히 똑똑한 코드를 짤 수 있는 그런 토대가 마련되는것이다.
7강. 박스모델
h1태그는 화면 전체를 쓰고있다. a태그는 줄바꿈이 되지않고 다른 컨텐츠들과 같은라인에 위치하고있다.
이런차별이 왜 존재 하는걸까? 그 이유는 h1태그는 제목태그인데 화면 전체를 쓰는것이 기본적으로 편리하기 때문이다.
만약 링크가 화면 전체를 쓴다면 링크 앞뒤로 있는 컨텐트가 줄바꿈이 된다면 상당히 불편하기 때문에 기본적으로 링크는
줄바꿈을 하지않고 자기의 컨텐트 크기만큼을 쓴다 라는 것을 짐작할 수 있다.
그런데 이것을 짐작이아니라 분명하게 알수 있는방법이 있다.
우리가 만약에 옆에 투명인간이 있는데 투명인간의 크기를 알 수 있는 방법이 뭐가 있을까?
바로 투명인간에게 페인트를 던져버리는 것이다.
이와 마찬가지로 h1 과 a 태그에 테두리를 그린다면 저것들의 부피감을 알 수 있을 것 이다.
border-width:테두리의 두께
border-color:테두리의 색
border-style:테두리의 스타일 즉 테두리가 점선인지 실선인지 solid 는 실선이라는뜻
h1 태그는 화면 전체를 쓴다라는것을 알수있다.
a 태그는 화면 전체를 쓰지않고, 자기 자신의 컨텐트의 크기 만큼의 부피를 가진다.
화면전체를 쓰는 태그들을 block level element 라고 하고 자기 자신의 컨텐트의 크기 만큼을 갖는 태그들을 inline element 라고 한다.
block level element 와 inline element 는 display라는 속성의 기본값 일뿐 그 기본값은 css를 통해서 언제든지 바꿀 수 있다.
tip: display:none; - 태그를 사라지게함
13~15줄 과 22줄~24줄 이 중복이다.
이 중복을 제거하는 방법이 무엇일까?
,(콤마)이다. 하지만 여전히 중복이 존재한다. 11~13줄의 border- 부분이 중복이다.
아까와 같은 결과가 나온다. 그리고 5px solid red의 순서는 상관없다.
padding:테두리와 텍스트 사이의 공간
margin:테두리와 테두리 사이의 공간
h1의 기본 display는 block
하지만 width 속성을 이용해 100px 크기만큼 태그의 크기가 변경된다.
※ 중요 - 개발자 도구
웹페이지에서 오른쪽 클릭 하면 검사라는 항목이 있다.
h1 태그를 선택하고 Styles라는 부분은 h1태그가 어떤 css스타일에 영향을 받고있는가를 일목요연하게 보여주는 굉장히 중요한 기능이다. 이러한 기능을 사용하지 않으면 css와 html이 복잡해 졌을때 어떤 하나의 태그가 어떠한 css의 영향을 받는지를 찾기가 굉장히 힘들 것이다. 이런 도구를 이용하는 것은 굉장히 중요하다. 우리의 웹 개발을 할때 도와주는 도구이다.
'강의 정리 > 생활코딩' 카테고리의 다른 글
| WEB1 - HTML & Internet 강의 중요내용 (0) | 2022.11.27 |
|---|
