github
생활코딩을 참고했다.
에디터는 vscode를 사용했다.
📖 CSS 공부하기
HTML에서 만든 2.html 파일을 다뤄볼 것이다.
📢 CSS란?
- Cascading Style Sheets로 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다. (웹의 디자인)
- HTML에 주로 쓰이고 레이아웃과 스타일을 정의할 때의 자유도가 높다.
- HTML이 웹 사이트의 몸체를 담당한다면, CSS는 옷과 악세사리처럼 꾸미는 역할을 담당한다고 할 수 있다. (CSS에 따라 전혀 다른 웹 사이트가 됨)
💊 CSS가 등장하게 된 이유
- HTML이 정보에 전념하게 하기 위해서 디자인의 기능을 CSS가 담당한다.
- CSS를 통해서 웹을 디자인하는 것이 훨씬 효율적이다.
⚡ CSS를 사용하는 방법
-
태그 안에 언어를 기술하는 방법
ex)<a href="index.html"><font color="red">WEB</font></a></h1> -
⭐ 웹 브라우저에게 CSS 코드 문법에 따라 해석하게 하는 방법
<style>는 HTML 문법이면서 동시에 태그 안쪽에 있는 내용은 CSS 문법으로 해석해 처리하라는 의미의 태그이다. (선택자를 사용)
2번 방법이 가독성과 유지,보수면에서 매우 효율적이다.
1번 방법으로 font를 변경하려면 여러 개의 태그마다 지정해줘야하는데 만약 태그가 1억 개라면 1억 번을 해줘야 하는 것이다.
<a href="1.html"><font color="red">HTML</font></a>
<a href="2.html"><font color="red">CSS</font></a>
<a href="3.html"><font color="red">JavaScript</font></li>2번 방법은
<style>
a {
color:black;
text-decoration: none;
}
</style>라고 지정해주면 모든 a태그의 font색이 black으로 변경된다.(a를 선택자라고 한다.)
text-decoration은 아무 효과도 넣지 않겠다는 의미
만약 한 개의 태그만 따로 red로 변경하고 밑줄을 긋고 싶다면
<a href="1.html" style="color:red;text-decoration:underline"</a> 같이 HTML의 style이라는 속성을 inline으로 넣어주면 된다.
style은 그 값으로 CSS의 효과가 들어온다.
효과를 지정해줄 땐 ;를 꼭 붙여야 한다.
⭐ 따라서 1번과 같은 방법은 사용하지 않고 style태그와 style 속성 2가지 방법을 사용한다.
이외에도 여러 가지 선택자를 이용해 디자인 할 수 있다.
구글링 : css text size property
h1{
font-size:45px;
}등등 하고 싶은 디자인에 따라 구글링하면서 연습해보자
- 웹 페이지의 모든 a태그를 기본적으로 검은색으로 바꿀 것이다.
- 사용자가 방문한 적이 있는 부분은 회색으로 바꿀 것이다.
- 현재 방문하고 있는 부분은 빨간색으로 바꿀 것이다.
2번 부분
<style>
.saw {
color:gray;
}
</style>
...
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...회색으로 바꾸고 싶은 부분에 inline으로 class="이름"을 지정해준다.
style 부분에서는 웹 페이지의 모든 태그중에서 클래스로 saw를 가지고 있는 모든 태그에 대해서 회색으로 변경한다는 코드이다.
class값을 의미해줄 때는 .을 붙여줘야한다. (안붙이면 태그이름이 saw여야함.)
3번 부분
<style>
.saw {
color:gray;
}
.active{
color:red;
}
</style>
...
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...
class라는 속성의 값은 여러 개의 값이 들어올 수 있고 띄어쓰기로 구분한다. 그리고 여러 개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다. (가장 나중에 선언되어 있는 선택자가 적용된다.)
-> saw가 active보다 나중에 선언되었으면 CSS가 회색으로 적용됨
따라서 그리 좋은 방법이 아니다.
해결 방법은 ID선택자로 우선순위을 높게 지정해주면 된다
ID선택자는 중복이 있어서는 안된다.(하나의 클래스를 여러 태그에 쓸 수 있지만 하나의 ID 선택자는 하나의 태그에만 쓰인다.) -> 따라서 우선순위가 가장 높다.
<a href="1.html" class="saw" id="active">HTML</a>
<a href="2.html" class="saw" id="active">CSS</a>이런식으로 불가능!
ID선택자는 #을 써준다.
<style>
#active{
color:red;
}
.saw {
color:gray;
}
</style>
...
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
...
saw가 늦게 등장했음에도 active가 적용되어 빨간색이 나온다.
⚡ 정리해보자면
ID 선택자(#) > class 선택자(.) > tag 선택자
순으로 우선순위가 높고 같은 우선순위일 때는 나중에 선언된 선택자가 적용된다.(ID 선택자는 중복이 없으므로 우선순위가 같을 수가 없다.)
선택자를 이용해 코드를 잘 짜야 나중에 유지, 보수, 수정하기가 쉽다.
Selectors Reference를 참고
📢 박스모델
style 태그를 이용해 웹 페이지를 박스형식으로 꾸며보자
box.html 파일 생성
<style>
/*
block level element
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
}
/*
inline element
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>
default로 block level element를 갖는 태그 : h1 등
-> 화면 전체를 사용
default로 inline element를 갖는 태그 : a 등
-> 자신의 크기만큼 사용
block level element를 inline element로 변경할 수 있다.
-> 해당 선택자 안에 display:inline을 입력하면 된다.
반대로 inline element를 block level element로 변경할 수 있다.
-> display:block
<style>
/*
block level element
*/
h1{
border-width:5px;
border-color:red;
border-style:solid;
display:inline;
}
/*
inline element
*/
a{
border-width:5px;
border-color:red;
border-style:solid;
display:block;
}
</style>
- 크기 관련 코드들
display:width, display:height
display:none는 화면에서 보이지 않게 된다.(나중에 쓰일 수 있으니 그냥 알아만두자) - 박스 공간을 다루는 코드들
padding : 박스 테두리와 내용 사이의 여백 길이
margin : 박스 테두리 바깥쪽의 여백 길이
⚡구글링으로 찾아보면서 하자!
코드가 중복되면 이쁘지 않으니 h1생성자와 a생성자의 중복 코드를 제거해주자
<style>
h1, a{
border-width:5px;
border-color:red;
border-style:solid;
}
</style>더 줄여보자
<style>
h1, a{
border:5px solid red;
}
</style>border에 들어가는 값의 순서는 상관없다!
웹 페이지에서 오른쪽 키를 누르고 검사를 누르면 어떤 식으로 구성되어 있는지 쉽게 알 수 있다. (웹 페이지를 만들 때 자주 애용하면 좋은 도구이다.)
리스트를 만들고 싶어서 구분 짓는 선을 넣고 싶은데
이런식으로 끝에 나온다.
검사 버튼을 눌러서 확인해보면 ol 태그는 화면 전체를 쓰는 block level element이기 때문에 화면이 끝나는 부분에 선이 나오는 것이고 자체 마진값을 가지고 있어서 윗 선에서 살짝 띄어져 있는 것이다.
ol {
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
따라서 width, margin, padding을 이용해서 줄여주자.
📢 그리드 사용해보기
디자인이라는 목적을 위해서 어떠한 의미도 존재하지 않는 태그를 사용할 때 div와 span이라는 태그를 사용한다.
- div : block level element
- span : inline element
용도에 따라 골라서 사용하면 된다.
grid.html 파일 생성
이 2개를 나란히 놓기 위해서 그리드를 사용할 것이다.
2개를 감싸는 부모태그가 필요하다.(선택자 우선순위를 이용해 구분)
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
}
div{
border:5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
이제 그리드를 사용해서 나란히 나타내보자
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</style>columns는 div의 순서대로 할당된다.(150px이 NAVIGATION, 1fr이 ARTICLE)
📍 1fr는 나머지 공간을 할당한다는 뜻으로 NAVIGATION은 150px의 고정값을 가지고 ARTICLE은 남은 공간에 따라 값을 가진다.(화면을 옆으로 줄이면 ARTICLE의 길이가 줄어든다.)
-> xml의 gravity와 같음
ARTICLE 대신 의미없는 긴 문장을 넣으면 알아서 넓이와 높이가 커진다.(그리디를 사용하면 좋은 점)
이제 그리디를 써먹어보자
h1과 h2를 div로 묶고 grid 작업을 해주자.
body
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<h2>CSS</h2>
<p>
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1], HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
<br>
마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 즉, HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
<br>
현재 개발 중인 CSS3의 경우 그림자 효과, 그라데이션, 변형 등 그래픽 편집 프로그램으로 제작한 이미지를 대체할 수 있는 기능이 추가되었다. 또한 다양한 애니메이션 기능이 추가되어 어도비 플래시를 어느 정도 대체하고 있다.
</p>
</div>
</div>
</body>style
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
grid안에 있는 ol값의 패딩을 변경하고 싶으면
#grid ol {
padding-left:33px;
}이런식으로 grid라는 id를 가진 태그안에 있는 모든 ol이라고 지칭할 수 있다.(그냥 ol선택자로 해주면 웹 페이지의 모든 ol이 변경된다.)
📢 미디어 쿼리(반응형 웹 페이지)
화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게하는 것을 반응형 웹이라고 한다.
mediaquery.html 파일 생성
검사 도구에서 오른쪽 위에 화면의 크기를 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:60px;
}
@media(min-width:800px) {
div{
display:none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>@media에 의해서 화면이 800px보다 커지면 div태그의 내용이 안보이게 된다.
반대로 max-width:800px은 폭이 800px보다 작으면 div태그의 내용이 안보이게 된다.
이제 미디어 쿼리를 써먹어보자
800px보다 클 때와 작을 때를 미디어 쿼리를 통해 관리해볼 것이다.
...
@media(max-width:800px) {
#grid{
display: block;
}
ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}
...800px보다 클 때
800px보다 작을 때
짠!
📢 중복 제거
지금까지 2.html 파일의 코드를 변경해주었는데 똑같은 방식으로 1.html, 3.html, index.html을 수정해주면 된다. 하지만 이런식으로 1억번을 해준다고 한다면 매우 비효율적일 것이다.
따라서 중복되는 css코드를 따로 만들어주자.
style 태그의 내용을 style.css라는 파일에 붙여주자.
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;
}
#article{
padding-left:25px;
}
@media(max-width:800px) {
#grid{
display: block;
}
ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}그 후에 html파일의 style태그를 지워주고 link태그를 통해서 style 파일에 저장되어 있는 css를 적용시켜준다.
<head>
<title>WEB1 - CSS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>나머지 1,3,index에도 link를 이용해서 붙여주면 된다.
개발자 도구(검사)의 네트워크 부분을 보면
어떤 파일들을 이 웹 페이지에서 불러오는지 알 수 있다.
직관적으로 보았을 때는 웹 페이지 안에 css코드를 내장하는 것이 네트워크 측면에서는 효율적(더 적은 트래픽을 사용)이다.
하지만 캐싱이라는 테크닉때문에 그렇지 않은데 style.css라는 파일을 한 번 다운 받았다면 파일이 변경되지 않는한 웹 브라우저는 우리의 컴퓨터에 저장해놓았다가 style.css를 요청하면 다시 다운받는 것이 아니라 저장된 파일을 불러와서 속도를 높일 수 있다.
