웹이 태어난 직후에 HTML에는 디자인을 위한 코드가 대거 추가됩니다. 무분별하게 추가된 디자인 기능은 정보로서의 웹이라는 가치를 오히려 퇴보시킵니다. 이를 극복하기 위해서 웹을 만드는 사람들은 디지털 정보의 세계를 완전히 바꿔놓을 기술을 궁리하기 시작하는데...
<style>
a {
color: blueviolet;
text-decoration: none;
}
</style>
style 태그 안에 들어가는 것이 css 코드라는 것을 html 문법으로 설명한 것이다. 어디에 적용할 것인가를 나타내주는 선택자(Selector)가 필요하고, 안에 효과(Declaration)가 들어간다. 효과를 지정한 다음에는 세미콜론으로 마무리한다.
<a href="http://naver.com" style="color:red; text-decoration:underline">NAVER</a>
style이라는 속성을 쓰면 속성의 값을 웹브라우저는 css의 문법에 따라 해석해서 그 속성이 위치한 태그에 적용한다. 이 경우, 선택자가 필요없다. style 속성 안에는 css 효과가 들어와야 한다.
CSS의 property와 다양한 selector를 검색을 통해 알아가는 과정을 살펴보자!
🔎 css text size property
🔎 css text center property
<style>
h1 {
font-size: 45px;
text-align: center;
}
</style>
자, 이래도 모든 property와 value를 외울 것인가? 뇌를 혹사하지 않은 시대다.
⚡ 재미있지 않나요? 재미없으면 자기 손해예요.
그룹핑하다. 하나로 묶는다는 뜻이 있다. 학창시절 반을 나누던 걸 떠올리면 쉽다. 의도에 따라 같은 성격을 가진 요소들을 그룹핑하는 것이다.
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
class="saw active"
를 넣었을 때, 그 차이를 알 수 있다. ID 선택자 > 클래스 선택자 > 태그 선택자
id의 값은 단 한번만 등장해야 한다. 고유한 값이다. 그러므로 ID선택자가 더 구체적이다. 포괄적인 것보다 구체적인 것의 우선순위를 높였다.
전체적인 디자인을 하고 예외적인 것은 ID로 선택해서 하는 것이 더 효율적이라고 생각했기 때문이다.
🔎 Css selector
선택자를 표현하는 다양한 방식에 대해서 나온다.
.class
#id
*
element
element, element
element element
element>element
이렇게나 다양하다. 이걸 보니 html에서 내가 쓰려는 콘텐트들을 어떤 태그로 묶어주느냐도 굉장히 중요할 것 같다. 아직은 좀 막막하다.
제목 태그는 화면 전체를 쓰고, a 태그는 자기 콘텐트 크기만큼만 쓴다. 시각적으로 한 번 확인해볼까? 부피를 확인하기 위해 페인트를 투명인간에 던진다고 상상해보자.
h1, a{
<!--
border-width:5px;
border-color:red;
border-style:solid;
중복을 없애서 간단하게 사용해보자 -->
border:5px solid red;
display:inline;
}
화면 전체를 쓰는 태그와 자기 크기 만큼의 콘텐트를 쓰는 것이 다르다.
어떤 것은 화면 전체를 쓰고 어떤 것은 부분을 쓴다는 것 정도만 알아두면 된다. 이 값들은 각 태그들의 display 기본값이지만, css display
를 통해서 언제든지 그 값을 바꿀 수 있다. 태그를 안 보이게 하고 싶으면 display:none;
을 할 수도 있다.
h1{
border:5px solid red;
padding:20px;
margin:20px;
display:block;
width:100px;
}
콘텐트와 보더사이에 여백을 주고 싶다면? 패딩padding
이다.
테두리와 테두리 사이에 간격은? 마진margin
이다.
화면 전체를 쓰는 태그의 콘텐트 크기를 조정하고 싶다면? 폭은 width
높이는 height
값을 지정하면 된다.
더 좋은 도구가 있다. 웹페이지에서 오른쪽 버튼을 눌러서 검사를 누르면 된다. 그림과 수치들을 함께 확인할 수 있다. 심지어 수치를 바꿔서 미리볼 수도 있다. 나중에 CSS와 HTML이 복잡해졌을 때, 하나의 태그가 어떤 css의 영향을 받는지를 확인할 때, 아주 중요한 개발자 도구
다.
태그를 박스로 취급한다. 그리고 박스 모델로 부피감을 결정한다는 것은 디자인에 아주 중요한 요소라는 것을 알 수 있다.
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
개발자 도구에서 값을 조정해서 미리볼 수 있고, 심지어 property와 value 값을 보여주니 매우 편리하다.
코드를 통해 레이아웃을 짜는 것에 웹은 굉장히 어려움을 많이 겪었는데, 그리드는 최신에 등장한 기술이다. (2017' 강의다) 최신 css 기능을 사용하기 위해서는 사용해도 되는지 데이터에 근거해서 판단해야 한다.
👉 Can I use 이 사이트를 꼭 참고하기를 바란다. css/html/javascript를 통해서 웹브라우저들이 그 기술을 채택하고 있는가 통계로 보여준다.
디자인의 목적을 위해서 어떤 의미도 존재하지 않는 태그를 사용해야 한다.
<div>
이건 block level element이다. <span>
이건 inline element다.
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
/* 혹은 1fr 2fr 이렇게 표현해줄 수도 있다. */
}
div{
border:5px solid gray;
}
<div id="grid">
<div>NAVIGATION</div>
<div>Lorem ipsum dolo blah blah blah </div>
전체 html 태그를 가져와봤다.
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>
화면의 크기에 따라 웹페이지의 각 요소들이 최적화된 모양으로 바뀌는 것
을 일컫는다. 웹은 수많은 형태의 화면에서 동작해야 하니, 개발에 어려움이 많았다. 여러가지 화면에 대응되는 웹페이지를 만들기 위한 기술을 발전시켜왔고, 반응형 디자인이라는 흐름까지 오게 되었다.
개발자 도구에서 화면의 크기를 알 수 있다. 800px를 기준으로 디자인을 다르게 적용하려고 한다.
@media(max-width:800px) {
div{
display:none;
}
}
max-width:800px
는 screen < 800px
와 같은 말이다! 약간 헷갈렸는데 이제는 이해가 되는 것 같다.
먼저, 검사를 열어서 스크린 기준을 정한다.
@media(max-with:800px){
#grid{
display:block; //그리드 없애기
}
#h1{
border-bottom:none;
}
#ol{
border-right:none;
}
}
기존에 있던 css에서 변경사항만 기재하는구나. 미디어 쿼리가 어떤 것인지 개념을 배우고 아주 간단한 예제만 적용해보았다.
근데 우리가 가진 웹페이지가 1억개라고 한다면? 이걸 어떻게 하나 하나 다 해주나? 중복의 제거는 좋은 코드의 핵심이다.
style.css 라는 별도의 파일을 만든다. 그리고 이런 코드를 덧붙인다.
<link rel="stylesheet" href="style.css">
⚡ 하지만 여전히, 손수 바꿔주어야 하는 디테일들이 있었다. css를 적용하기 위해 건들인 id값이나 class값들 말이다. 애초에 틀을 먼저 만들고 그 템플릿은 복사해서 쓰는 편이 나을 것 같다.
CSS를 지탱하는 두 개의 뿌리는 선택자(selector)와 속성(property)
이다. 이 둘이 가장 중요하다. 선택자와 속성을 많이 알수록, 더 풍부하고 정확하게 표현할 수 있을 것이다.
가장 중요하게, 그동안 배운 것을 써먹으십시오!