본 내용은 "생활코딩! HTML + CSS + 자바스크립트" 책을 통해 학습했음.
CSS란?
웹 페이지를 좀 더 아름다우면서 보기 좋은 형태로 만들기 위한 언어로 글씨의 색깔을 바꾸는 기능을 예로, 기존에 하나하나 바꿔야하는 불편함에서 벗어나도록 도와준다. 이는 HTML이 정보 전달에만 전념하도록 HTML으로부터 디자인에 대한 기능을 빼앗아 왔다고 표현할 수 있다.
HTMl과 CSS는 완전히 다른 언어이므로 웹 페이지에 CSS를 포함시킬 때, 웹 브라우저로 하여금 어디서부터 어디까지가 CSS인지 알려줘야 한다.
웹 페이지에 CSS를 삽입하는 방법
웹 페이지에 CSS를 삽입하는 방법은 2가지가 있는데, 하나는 태그를 사용하는 것이고 나머지 하나는 속성을 쓰는 것이다.
1. 태그 사용
먼저 <style> 태그를 추가한다. 이 태그는 기본적으로 HTML 문법이지만, 태그 안쪽에 있는 내용은 CSS이므로 CSS의 언어 문법에 맞게 처리해야 한다.
#기본코드
<style>
(대상) {
color : red;
}
#예시코드
<style>
a {
color : red;
}
</style>
이러한 코드를 이 웹 페이지에 주고 싶은 효과를 누구에게 줄 것인가를 선택한다는 점에서 선택자(selector)라고 한다. 그리고 선택자에 지정될 효과를 효과 혹은 선언(delaration)이라고 부른다.
아래 코드가 <style> 태그의 기본 예시이며, 안쪽에 있는 내용은 "모든 <a> 태그에 대해서 폰트 색상이 빨간색"이라는 의미를 가진 CSS 코드이다.
2. 속성 이용
우선 코드부터 살펴보도록 하겠다.
<a href = "2.html" style = "color : red">CSS</a></li>
style = ""은 HTML의 속성이다. 그리고 style이라는 속성은 값으로 반드시 CSS 효과가 들어온다고 약속되어 있다.
기본적인 기능 알아보기
1. CSS를 이용해 링크에 밑줄 없애기
<style>
(대상) {
text-decoration : none;
}
</style>
추가로 알아야할 점은, 각 줄의 끝에 세미콜론(;)을 붙여 각 줄을 구분해야 한다는 것이다.
1-2. 현재 선택된 웹 페이지만큼은 링크에 밑줄을 긋고 싶다면
...생략...
<a href = "2.html" style = "color : red; text-decoration : underline;">CSS</a>
...생략...
2. 정렬 및 크기 변경
<style>
h1 {
font-size : 45px;
text-align : center;
}
</style>
위 코드를 해석하면, 폰트 사이즈는 45픽셀, 위치는 중앙으로 한다는 뜻이다. 정렬 방식은 center 말고도 left, right 등이 있다.
3.
박스 모델이란?
제목, 목차, 본문과 같이 각 요소들을 깔끔하게 정리할 수 있게끔 선을 그어주는 작업을 하기 위해 알아야할 선행 학습이다.
기본적인 기능 알아보기
1. 구역을 나눌 태그에 테두리 그리기
<style>
(대상1) {
border-width : 5px;
border-color ; red;
border-style : solid;
}
(대상2) {
border-width : 5px;
border-color ; red;
border-style : solid;
}
</style>
※HTML에 있는 여러 태그들은 태그의 성격과 일반적인 쓰임에 따라 화면 전체를 쓰는 것이 편한 것과 자신의 크기만큼의 부피를 갖는 게 편한 것이 있기 때문에 화면 전체를 쓰는 태그가 있고, 자기 크기만큼 쓰는 것들이 있다. 그래서 화면 전체를 쓰는 태그들을 블록 레벨 엘리먼트, 자기 자신의 컨텐츠 크기만큼 쓰는 태그들을 인라인 엘리먼트라고 한다. 태그 안에 display : block; 을 사용하면 블록 레벨 엘리먼트, display : inline; 을 사용하면 인라인 엘리먼트가 된다.
2. 코드의 중복 제거
위 코드의 {} 안에 중복된 부분이 존재하므로 이를 줄일 수 있다.
<style>
(대상1, 대상2) {
border-width : 5px;
border-color ; red;
border-style : solid;
}
</style>
하지만 여전히 중복이 존재하는데, 바로 border- 부분이다. 이 또한 줄일 수 있다.
<style>
(대상1) {
border : 5px solid red;
}
</style>
5px, solid, red 의 순서는 중요하지 않다.
3. 콘텐츠와 테두리 사이에 여백 추가하기
<style>
(대상) {
border : 5px solid red;
padding : 20px;
}
</style>
padding 의 크기에 따라 콘텐츠와 테두리 사이의 간격이 결정된다.
4. 테두리와 테두리 사이의 간격 없애기(3번에서 다룬 콘텐츠와 같은 콘텐츠를 추가했다고 가정한다.)
각 테두리 사이에 여백이 존재하게 되는데, 이는 margin 떄문이다. 다음 코드를 추가하면 마진이 사라진다.
<style>
(대상) {
border : 5px solid red;
padding : 20px;
margin : 0px;
}
</style>
5. width 속성을 지정하여 태그의 크기 변경
<style>
(대상) {
border : 5px solid red;
padding : 20px;
margin : 0px;
display : bolck;
width : 100px;
}
</style>
※웹 페이지에서 'CSS' 텍스트를 대상으로 마우스 우클릭하면 '검사'라는 항목이 나온다. 이를 클릭하면 개발자 도구가 나오는데, 이를 이해하고 활용하면 border, margin 등의 영역을 확인할 수 있다.
박스 모델 활용하기
1. <h1> 태그 아래쪽 테두리 만들기
<style>
h1 {
font-size : 45px;
text-align : center;
border-bottom : 1px solid gray;
}
</style>
1-2. <h1> 태그의 margin 값 지정하기
1-3. <h1> 태그의 padding 값 지정하기
2. <ol> 태그에 오른쪽 테두리 만들기
<style>
ol {
border-right : 1px solid gray;
}
</style>
2-2. <ol> 태그의 width 지정
2-3. <ol> 태그의 margin 값 지정
2-4. <ol> 태그의 padding 값 지정
※어떤 태그의 테두리를 만드냐에 따라 border- 값이 바뀐다. 또한 width, margin 등의 값을 변경하여 깔끔하고 보기 좋은 형식을 만들 수 있다.
그리드란?
사전적 의미로 '격자무늬' 또는 '격자판'을 의미하며, 디자인에서는 일정한 영역을 정하는 것을 의미하고 있다. 우리는 이 그리드를 사용하여 목록과 본문이 나란히 위치하는 디자인을 할 것이다.
기본적인 기능 알아보기
1. <div> 태그로 묶기
<body>
<div>내용1</div>
<div>내용2</div>
</body>
※여기서 <div> 태그는 디자인을 하기 위한 목적으로 사용하는 목적없는 태그이다.
2. 부피감을 확인하기 위해 <div> 태그에 테두리 지정
<style>
div {
border : 5px solid gray;
}
</style>
3. 두 개의 <div> 태그를 감싸는 부모 태그 추가(두 내용을 나란히 놓기 위해)
<body>
<div>
<div>내용1</div>
<div>내용2</div>
</div>
</body>
4. 부모 태그의 id 값 설정, 테두리를 분홍색으로 변경
<style>
#grid {
border : 5px solid pink;
}
div {
border : 5px solid black;
}
...생략...
<body>
<div id = "grid">
<div>내용1</div>
<div>내용2</div>
</div>
</body>
5. 두 개의 태그를 나란히 배치하기
...생략...
#grid {
border : 5px solid pink;
display : grid;
grid-temperate-columns : 150px 1fr;
}
※150px 1fr 부분을 1fr 1fr 로 바꾸면 두 칼럼의 크기는 같아지게 된다. 2fr 1fr로 바꾸면 전체를 3fr이라고 했을 때, 좌측 영억은 2만큼, 우측 영역은 1만큼 화면 전체를 나눠서 쓰게 된다.
반응형 디자인
화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 동작하게 된다는 것
<style>
@media(min-width : 800px) {
(대상) {
display : none;
}
}
</style>
화면의 크기가 800px보다 작으면 <div>가 사라진다. min-width 를 max-width로 바꾸면 반대로 작동한다.