CSS 등장 이전의 상황
font 태그-지금은 안 씀
<h1><a href="index.html"><font color="red">WEB</font></h1>
색상이나 스타일을 변경할 수 있다. 하지만 시각장애인(혹은 검색 로봇)의 관점에서는 큰 의미가 없을 수도 있겠다.
CSS의 등장
주석 태그
<!--
<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>
-->
style 태그
HTML의 문법이면서 태그 안 쪽에 있는 내용은 CSS이므로 이것을 CSS에 맞게 해석해서 처리하라는 태그이다.
코드에 있는 모든 <a> 태그에 스타일링을 하기 위해 다음과 같이 p와 중괄호로 묶어준다
<style>
a {
color:black;
}
</style>
혁명적 변화
style 속성
단 하나의 HTML 태그 요소를 꾸며주기 위한 속성
HTML but CSS 문법이 들어가야 한다
자주 나오는 style 속성값
- 배경색상 지정: background-color
<body style="background-color:powderblue;">
powderblue 색상
</body>
-텍스트 색상: color
<h1 style="color:blue;">파란색 제목1</h1>
<p style="color:red;">빨간색 단락</p>
-글꼴 모양 지정: font-family
<h1 style="font-family:verdana;">verdana 글꼴 모양</h1>
<p style="font-family:courier;">courier 글꼴 모양</p>
-글꼴 크기: font-size
<h1 style="font-size:300%;">텍스트 3배 키운 제목1</h1>
<p style="font-size:160%;">텍스트 1.6배 단락 부분</p>
<p style="font-size:30px;">30px 크기 텍스트</p>
-텍스트 정렬: text-align
<h1 style="text-align:center;">가운데 정렬 제목1</h1>
<p style="text-align:center;">가운데 정렬 단락</p>
<h1 style="text-align:left;">왼쪽 정렬 제목1</h1>
<p style="text-align:left;">왼쪽 정렬 단락</p>
<h1 style="text-align:right;">오른쪽 정렬 제목1</h1>
<p style="text-align:right;">오른쪽 정렬 단락</p>
<!-- 양쪽 정렬 -->
<p style="text-align:justify;">옷을 우리 이상, 사라지지 황금시대를 이상의 뿐이다. 미묘한 있으며, 청춘에서만 때문이다. 관현악이며, 옷을 얼음 동력은 그들의 같이 작고 온갖 얼마나 듣는다. 듣기만 방지하는 위하여, 들어 보라. 가치를 보이는 풀밭에 칼이다.</p>
text-align="inherit"
부모 요소의 정렬 속성값을 상속받는다.
text-align="initial"
기본값으로 설정
혁명적인 변화
<style>
a {
color:black;
}
</style>
선택자 = Selector → a
선언, 효과 = Declaration → color:red;
속성 = Property → color
속성값 = Property Value → red
구분자로 세미콜론(;)을 사용한다.
CSS 속성을 스스로 알아내는 방법
모든 속성값을 외우게 되면 뇌를 혹사 시키게 된다. 뇌는 의지를 이길 수 없다. 뇌를 괴롭히지말고 원하는 코드가 있다면 구글링으로 찾아 해결하자!
CSS 선택자를 스스로 알아내는 방법
class
특정 태그 안에 class라는 속성으로 이들이 하나의 반(class)으로 만드는 것이다
한 번 방문한 적이 있는 링크
class="saw"
방문 중인 페이지
class="saw active"
class 선택자 온점(.)
css가 <style> 태그 안에서 class가 saw인 값을 찾아내게 하려면 반드시 .을 붙여야한다
<style>
a {
color:black;
}
.saw {
color:black;
}
.active {
color:gray;
}
</style>
복수의 클래스일 경우
<li><a href="2.html" class="saw active">CSS</a></li>
이렇게 된다면 class의 우선순위 중요도는 같으므로 가장 마지막에 명령을 내린 class의 명령을 듣는다.
.saw {
color:black;
}
.active {
color:gray;
}
이렇게 있다면 active의 명령을
.active {
color:red;
}
.saw {
color:gray;
}
이렇게 있다면 saw의 명령을 듣는다.
id 선택자
클래스가 중복으로 사용된다면 중요도가 보이지 않으니 클래스보다 우선순위가 더 높은 id를 사용한다
id 선택자는 <style>태그를 불러올 때 #을 붙여준다
<li><a href="2.html" class="saw" id="active">CSS</a></li>
#active {
color:red;
}
.saw {
color:gray;
}
이렇게 하더라도 id의 우선순위가 더 높기 때문에 active의 명령을 듣는다
선택자의 우선순위
id(id 선택자) > class(클래스 선택자) > a(태그 선택자)
즉, CSS는 구체적인 것을 포괄적인 것보다 우선순위를 높였다
포괄적으로 디자인을 잡고, 예외만 id로 잡아서 수정해주는 것이 훨씬 편리하기 때문이다.
다른 선택자-CSS selector 검색
박스모델
Block Element, Inline element
화면 전체를 쓰는 태그 Block Element ex) <h1>
자기 크기만큼 쓰는 태그 Inline Element ex) <a>
태그에 테두리를 그려 부피를 확인하려 할때 선 두께, 색, 선 종류를 지정
border-width 두께
border-color 색
border-style 선의 종류
h1{
border-width:5px;
border-color:red;
border-style: solid;
}
a{
border-width:5px;
border-color:red;
border-style: solid;
}
h1 태그는 화면전체를 사용하고 a 태그는 컨텐츠 크기만큼의 부피를 사용한다
Display
Block element를 Inline element로 바꿀때
h1{
border-width:5px;
border-color:red;
border-style: solid;
display:inline;
}
Inline Element를 Block Element로 바꿀때는 display: block;로 해준다
--> block, inline은 기본값이고 css로 바꿀수 있다
display:none;을 하면 화면에서 그 태그가 사라진다
코드 중복 없애기
h1{
border-width:5px;
border-color:red;
border-style: solid;
}
a{
border-width:5px;
border-color:red;
border-style: solid;
}
중복 많은 태그 줄이기
h1,a{
border-width:5px;
border-color:red;
border-style: solid;
}
h1, a를 쓰면 똑같이 적용
but, 이 코드도 border이라는 중복 존재
h1,a{
border : 5px solid red;
}
Padding
콘텐츠와 테두리 사이 간격 만들기
h1,a{
border : 5px solid red;
padding: 20px
}
Margin
테두리 사이의 간격을 수정
h1{
border:5px solid red;
padding: 20px;
margin: 20px;
}
h1{
border:5px solid red;
padding: 20px;
margin: 0;
}
Width
폭을 줄이고 싶을 때 사용
h1{
border:5px solid red;
padding: 20px;
margin: 20px;
width: 100px;
}
box model 속성 까먹었을 때
검색: css box model
검사
Web 페이지에서 우클릭 검사
파란색 -> 콘텐츠
초록색 -> padding
노란색 -> border
주황색 -> margin
그리드
그리드의 기본 사용법
문자에 테두리를 주고 나란히 배치하려면 각각 어떤 태그로 묶어줘야 하는데, 이는 디자인이란 목적을 위해서 아무런 의미가 없는 태그이다.
<div>
<div></div> 태그는 Division의 약자, 레이아웃을 나누는데 쓰인다 (block level element)
특별한 기능은 없고, 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓰인다.
<div>NAVIGATION</div>
<div>ARTICLE</div><html>
<body>
<div style="background-color:cyan">구역1</div>
<div style="width:100px; height:100px; background-color:#CF0">구역2</div>
</body>
</html>
<span>
<span></span>도 레이아웃을 나누는데 쓰인다 (inline level element)
<span>NAVIGATION</span><span>ARICLE</span><html>
<body>
<span style="background-color:red">span1</span>
<span style="background-color:blue">span2</span>
<span style="background-color:green">span3</span>
</body>
</html>
div 태그는 줄바꿈이 되지만, span 태그는 줄바꿈이 안된다.
grid
수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성
두 문자를 나란히 정렬하기 위해 grid를 사용
이 두개의 태그를 감싸는 부모태그가 필요
<style>
#grid{
border:5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid blue;
}
</style>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
부모 태그를 만들고 grid라는 id 값을 준다. 두개의 태그를 나란히 배치하거나 어떤 배치를 하고 싶다면, 부모태그가 필요
즉, 디자인의 목적만으로 <div id="grid">라는 태그를 만든 것이다.
<style>
#grid{
border:5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
</style>
display(block, inline, none 등 어떤 태그가 표시되는 방법을 바꿔주는 속성)에 grid라는 속성값을 주고,
두 글자를 하나의 칼럼에 배치하고 싶으니 grid-template-columns: 150px 1fr이라고 준다.(div로 묶은 태그에서 첫번째 div태그 navigation은 150px 부피 차지, 두번째 div 태그 article은 나머지 공간을 다 쓴다.
이때 fr은 fractional unit( 사용 가능한 공간에 대한 비율 )의 약자이다.
두개 다 1fr 1fr 속성값일 때는 두 문자는 같은 부피로 웹페이지 크기에 따라 달라진다.
2fr 1fr일 때는 화면이 3fr이라고 쳤을때 2:1 비율의 부피로 웹페이지 크기에 따라 자동으로 달라진다.
내가 쓰는 기능을 사용해도 되는지 판단해주는 사이트
추천 사이트 :https://caniuse.com
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
caniuse 사이트는 여러 CSS나 HTML 또는 JavaScript의 기술들 중 현재 웹브라우저들이 그 기술을 얼마나 채택하고 있는가에 대한 통계를 보여주는 서비스이다.
그리드 써먹기
<div>로 부모자식 태그를 만들고, 구분하기 위해 id값으로 grid와 article을 준다.
<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. 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>
grid 부분에 grid-template-columns 속성 및 속성값을 부여하며 ol캐그는 다른 ol 태그들과 구분하기 위해 id grid의 ol 태그를 하용한다는 의미로 선택자로 #grid ol을 사용한다.
<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;
margin: 0;
padding: 20px;
width: 100px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#gird ol{
padding-left: 33px;
}
#grid #article{
padding-left: 25px;
}
</style>
반응형 디자인
반응형 디자인과 미디어 쿼리 소개
들어가기
화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것을 반응형 웹, 반응형 디자인이라 한다. 이 반응형 디자인을 우리가 순수한 웹을 통해서 CSS를 통해서 구현하는 핵심적인 개념인 미디어 쿼리라는 것에 대해 알아보자.
화면의 크기에 따라 HTML의 요소가 보였다, 안 보였다 하게 하자
화면의 크기 800픽셀보다 크기에 따라 <div> 태그를 보이거나 안 보이게 하려면 화면의 크기를 알아야 한다.
화면-오른쪽클릭-검사를 통해 화면을 조정하면 우측상단에 크기를 볼 수 있다.
<style>
/*screen width > 800px*/
@media(min-width:800px){
div{
display:none;
}
</style>화면의 크기가 800px보다 크다는 얘기는 화면의 크기가 최소한 800px라는 것과 같다.
@media(min-width:800px){}: 최소 800px일 때부터 안에 명령 수행
@media(max-width:800px){}: 최소 800px일 때까지 안에 명령 수행
미디어쿼리 써먹기
화면의 크기가 800px보다 작을때 grid를 block level element로 바꾸게 하고 WEB 아래의 선과 목차 오른쪽의 선을 지운게 해보자
<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;
margin: 0;
padding: 20px;
width: 100px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#gird ol{
padding-left: 33px;
}
#grid #article{
padding-left: 25px;
}
/*screen width < 800px*/
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right:none;
}
h1{
border-bottom: none;
}
}
</style>CSS 코드의 재사용
이전에 작성한 코드, CSS코드가 모든 웹페이지레서 중복해서 등장하는 부분이 있다면 수정할 때 하나하나 수정하는 것은 시간이 많이 걸리고 복잡하다. 코드를 작성할때 중복 제거는 효율성 측면에서 아주 중요한 부분이다.
<link>
모든 웹페이지에서 중복되고 있는 CSS코드를 <style>태그를 제외한 순수한 CSS 코드만을 복사해서 style.css라는 파일에다가 붙인다.
그리고 html 파일에 있는 중복된 <style> 태그의 코드들을 삭제한다.
원래 <style> 태그가 있었던 부분에 style.css라는 파일에 저장된 CSS를 다운받아 여기에 원래 코드가 있었던 것처럼 동작하게 하는 태그 <link>를 사용한다
<head>
<title>WEB1 - HTML</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
내부적으로는 완전히 구현이 달라지면서 훨씬 효율적인 상태가 된다. 만약, 누군가 웹페이지의 모든 링크에 밑줄을 넣으라고 한다면 전자의 경우에는 html의 <style> 태그마다 선택자 a에 대해서 밑줄을 줘야하지만, 후자의 경우에는 style.css 파일의 선택자 a에 대해서만 밑줄을 주면 되기 때문이다.
또한, style.css라는 코드가 있다면 여기에 위치하는 코드는 style.css 파일 안에 있는 코드라는 것을 확신할 수 있다.
하지만, 1.html/2.html/3.html에 CSS 코드가 직접 기술되어 있다면 각각의 html 파일 별로 존재하는 CSS가 실제로 같은지 안 같은지를 파악하기 어렵다.
그리고, 새로운 웹페이지를 만들었을 때, 그 웹페이지에다 <link>만 추가하면 style.css가 뭔지는 몰라도 CSS의 시각적인 기능성을 사용할 수 있게 된다. 즉, 재사용성이 높아지고, 사용자 입장에서는 내부적인 코딩의 원리를 몰라도 사용할 수 있게 되어 사용성이 높아진다. 디자인을 수정해야할 웹페이지가 1억개여도 style.css라는 파일 하나만을 바꾸면 동시에 바뀌는 폭발적인 효과를 얻게 된다.
하나의 웹페이지에서 여러 개의 파일을 별도로 바깥에 두고 그것을 다운로드 받는 것과 그냥 웹페이지 안에 CSS코드를 내장하는 것 중에서 어떤게 더 네트워크 측면에서 효육적(더 적은 트래픽 사용)일까?
웹페이지 안에 CSS를 직접 놓는 것이 그것 자체로는 비효율적이지만, 캐싱이라고 하는 것은 저장하다는 뜻인데, 웹페이지가 한번 style.css 파일을 다운 받았다면, 저 파일이 바뀌기 전까지는 style.css란 파일을 이 웹브라우저는 내 컴퓨터에 저장했다가 그 다음에 필요할 때 저장된 결과를 가져와 속도를 높일 수 있다.(네트워크를 안 쓰기 때문)
즉, style.css 파일을 캐싱할 수 있게 되면 결국에는 훨씬 더 빠르게 웹페이지를 보여줄 수 있으면서 네트워크 트래픽, 사용료를 훨씬 더 적게 낼 수 있다. 가급적 CSS 파일을 만들었다면 별도의 파일을 꺼내서 중복을 제거하는 것은 추천한다.
Code Long-Take Version
'Full-Stack Study' 카테고리의 다른 글
| WEB - JavaScript (1) | 2024.05.06 |
|---|---|
| WEB1-HTML (0) | 2024.02.02 |